KeyboardAvoidingView Android white area when keyboard open/close

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

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>
        );

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

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

same here

facing the same issue anyone has a solution?

same, no solution

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.

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

+1

The problem persists

@abrahamgalue

@abrahamgalue on what Android version? I think this is an Android problem with React Native and it seems resolved on newer versions of Android.

@Nantris

@Nantris Well, I went back to the Expo Snack and tried Expo Go on my Android 15 device, and I'm still seeing the problem that was reported when the keyboard jumps—there's a white background on a white background

I don't know if Expo Go is a valid test for this.

Try this to set the background color of the native root component (I guess is what this does) and make a custom dev client build and if you still see it then it's definitely still an issue: https://docs.expo.dev/versions/latest/sdk/system-ui/#systemuisetbackgroundcolorasynccolor

@Nantris

@Nantris Yes, that works. Although I can't stop thinking about how a developer who doesn't use Expo, only React Native as a library, would do it.

Glad to hear it!

I think these are the underlying native functions:

https://github.com/expo/expo/blob/27b2a908664cc5521961a65709dcb8c7e03e54ec/packages/expo-system-ui/ios/ExpoSystemUI/ExpoSystemUIModule.swift#L42

https://github.com/expo/expo/blob/27b2a908664cc5521961a65709dcb8c7e03e54ec/packages/expo-system-ui/android/src/main/java/expo/modules/systemui/SystemUIModule.kt#L40

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.

This issue was closed because it has been stalled for 7 days with no activity.

Navigation Menu

Repository navigation

KeyboardAvoidingView Android white area when keyboard open/close #32612

Description

Version

Output of `react-native info`

Steps to reproduce

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

11 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

KeyboardAvoidingView Android white area when keyboard open/close #32612

Description

Description

Version

Output of react-native info

Steps to reproduce

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

Activity

turker0 commented on Nov 22, 2021

kabus202 commented on Jan 23, 2022

HrithikMittal commented on Aug 18, 2022

KubaKubikula commented on Oct 14, 2022

omri81 commented on Mar 6, 2023

JaLe29 commented on Jun 10, 2023

apatozi commented on Jun 22, 2023

playsoremobile commented on Oct 7, 2023

Polad10 commented on Jan 15, 2024

11 remaining items

abrahamgalue commented on Oct 9, 2025

Nantris commented on Oct 9, 2025

abrahamgalue commented on Oct 9, 2025

Nantris commented on Oct 9, 2025

abrahamgalue commented on Oct 10, 2025

Nantris commented on Oct 10, 2025

react-native-bot commented on Apr 9, 2026

react-native-bot commented on Oct 8, 2026

react-native-bot commented on Oct 15, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Output of `react-native info`