KeyboardAvoidingView Android white area when keyboard open/close

[romancxx]

Description

When using KeyboardAvoidingView on android, whatever the configuration I use for the behavior or the keyboardVerticalOffset I always have a white area when the keyboard is opening or closing while on iOS everything is moving smoothly.

Screenrecorder-2021-11-17-13-15-28-66.mp4

In the video, we can see that when the keyboard opens there is a big white area and when closing sometimes a small white rectangle with some flickering. I'm wondering if this is normal behavior because on iOS it transitions smoothly

I tried modifying android manifest with android:windowSoftInputMode="adjustResize" or android:windowSoftInputMode="adjustPan" but the problem is still there with both config.

It would actually be ok if we could change this color from white to something else like the background color of the content (red in my example). But I couldn't find a way.

Version

0.66

Output of react-native info

It happens from the documentation snack so I guess this section is not necessary

Steps to reproduce

Take the example from the KeyboardAvoidingView of react-native documentation and modify the background color of the container from white to red in order to see the white area when opening/closing the keyboard.

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

https://snack.expo.dev/@flowwwww/keyboardavoidingview

[turker0]

Hi, have you tried to re-build after changing android:windowSoftInputMode: ?
When behavior='height' on Android, following code shows we return initialHeight - bottomHeight.
When keyboard is opening the remaining bottomHeight px area shows up as white blank area.

in KeyboardAvoidingView.js

  switch (behavior) {
      case 'height':
        let heightStyle;
        if (this._frame != null && this.state.bottom > 0) {
          // Note that we only apply a height change when there is keyboard present,
          // i.e. this.state.bottom is greater than 0. If we remove that condition,
          // this.frame.height will never go back to its original value.
          // When height changes, we need to disable flex.
          heightStyle = {
            height: this._initialFrameHeight - bottomHeight,
            flex: 0,
          };
        }
        return (
          <View
            ref={this.viewRef}
            style={StyleSheet.compose(style, heightStyle)}
            onLayout={this._onLayout}
            {...props}>
            {children}
          </View>
        );

[kabus202]

I have the same. Did you find any solution @Nazort ??

[HrithikMittal]

I also face the same issue and haven't find any good solution for this

[KubaKubikula]

same here

[omri81]

facing the same issue anyone has a solution?

[JaLe29]

same, no solution

[apatozi]

If you are using Expo there is a solution.
For me it worked setting the android:windowSoftInputMode="adjustPan" but doing so in the expo app.config.json setting the

"android": {
    "softwareKeyboardLayoutMode": "pan",
    
}

and after that Using the <KeyboardAvoidingView behaviour={'padding'} /> for both Android and iOS and have the same result.

[playsoremobile]

Did you find any solution?
I'm facing the same issue.

[Polad10]

+1