KeyboardAvoidingView is not adjusting correctly because the coordinate system mismatch

[summer-wu]

Description

You are comparing height using different coordinate systems.
The keyboard frame is in window system, and the view's frame is in parent view's coordinate system.
We have to convert the frame to the same coordinate system then do compare.
Here is how I fix it:

  _onLayout = (event: any) => {
    const measureCallback = (x: number, y: number, width: number, height: number) => {
      const wasFrameNull = this._frame == null;
      this._frame = { x, y, width, height };
      if (!this._initialFrameHeight) {
        // save the initial frame height, before the keyboard is visible
        this._initialFrameHeight = this._frame.height;
      }

      if (wasFrameNull) {
        this._updateBottomIfNecesarry();
      }
    };
    this.viewRef.current.measureInWindow(measureCallback);
  };

The buggy version:

  _onLayout = (event: ViewLayoutEvent) => {
    const wasFrameNull = this._frame == null;
    this._frame = event.nativeEvent.layout;
    if (!this._initialFrameHeight) {
      // save the initial frame height, before the keyboard is visible
      this._initialFrameHeight = this._frame.height;
    }

    if (wasFrameNull) {
      this._updateBottomIfNecesarry();
    }
  };

Version

0.66

Output of npx react-native info

don't needed

Steps to reproduce

don't needed

Snack, code example, screenshot, or link to a repository

No response

[drice]

Possibly related, I'm seeing when keyboard is opened in landscape then rotated to portrait, the _initialFrameHeight is a different value than when it was opened in portrait so it doesn't resize correctly.

[HacerBusraKILIC]

I'm having trouble switching from landscape to portrait and from portrait to landscape with KeyboardAvoidingView on android. Any idea how can i solve it?

My code:

return (
          <KeyboardAvoidingView
                      behavior = { Platform.OS === 'ios' ? 'padding' : 'height' }
                       keyboardVerticalOffset = {
                          Platform.OS === 'ios'
                              ? iosVerticalOffset
                              : androidVerticalOffset
                      }
                      style= {{ flex: 1 }}>
             <View style={{ flex:1 }}>
                 <Header />
                 <Flatlist style={{ flex: 1 }}/>
                 <TextInput />
             </View>
          </KeyboardAvoidingView>
);

20220516145020096.mp4

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[cortinico]

Closing as stale