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

If you are using expo, try expo-system-ui and set background color. It worked for me!

I fixed this by adding <item name="android:windowBackground">@color/windowBackgroundColor</item> within the styles.xml

Add to android/app/src/main/res/values/styles.xml so it becomes like:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
        <!-- Add the line here -->
        <item name="android:windowBackground">@color/windowBackgroundColor</item>
    </style>

</resources>

Then create android/app/src/main/res/values/colors.xml

<resources>
    <color name="windowBackgroundColor">#000000</color>
</resources>

Can name windowBackgroundColor whatever you want just so it matches the colors.xml name.

This makes the app feel so janky and poorly built no matter how much effort was really put into it, and so far I can't find any solution.

I fixed this by adding <item name="android:windowBackground">@color/windowBackgroundColor</item> within the styles.xml

Add to android/app/src/main/res/values/styles.xml so it becomes like:
<resources>

    
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
        
        <item name="android:windowBackground">@color/windowBackgroundColor</item>
    </style>

</resources>
Then create android/app/src/main/res/values/colors.xml
<resources>
    <color name="windowBackgroundColor">#000000</color>
</resources>
Can name windowBackgroundColor whatever you want just so it matches the colors.xml name.

This Fixed my issue ❤

+1 no solution find

If you use Expo I'm pretty sure this is the solution: https://docs.expo.dev/versions/latest/sdk/system-ui/#systemuisetbackgroundcolorasynccolor

I assume non-Expo users can figure out what that's doing and leverage it directly.

If you use Expo I'm pretty sure this is the solution: https://docs.expo.dev/versions/latest/sdk/system-ui/#systemuisetbackgroundcolorasynccolor

I assume non-Expo users can figure out what that's doing and leverage it directly.

This does indeed allow you to change the background color that appears when the keyboard is opened, but my question now is, how do I make it dynamic? I have a light and dark theme, and if I set a static value when the user switches themes, the user experience will still be poor. Thanks for the alternative.

@abrahamgalue

@abrahamgalue does SystemUI.setBackgroundColorAsync() from that link not do it for you? We just call it when the dark/light mode is changed and it works well for us (Expo 52.)

@abrahamgalue does SystemUI.setBackgroundColorAsync() from that link not do it for you? We just call it when the dark/light mode is changed and it works well for us (Expo 52.)

Do you have any examples of how to do this? I'd really appreciate it. I'm new to Expo and would like to fix this visual effect, but I don't know how to implement it.

@abrahamgalue

@abrahamgalue this is probably what you're looking for. You can listen to changes in dark/light and then set your preferred color: https://reactnative.dev/docs/appearance#addchangelistener

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.

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

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

davram88 commented on Mar 11, 2024

GrantBartlett commented on Jul 16, 2024

Nantris commented on Jul 18, 2024

iAmHammad261 commented on Sep 8, 2024

Odyrac commented on Nov 15, 2024

Nantris commented on Nov 23, 2024

abrahamgalue commented on Apr 10, 2025

Nantris commented on Apr 11, 2025

abrahamgalue commented on Apr 11, 2025

Nantris commented on Apr 11, 2025

react-native-bot commented on Oct 9, 2025

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`