Repository navigation
KeyboardAvoidingView Android white area when keyboard open/close #32612
Description
Activity
Hi, have you tried to re-build after changing
android:windowSoftInputMode:?
Whenbehavior='height'on Android, following code shows we returninitialHeight - 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.
Reacted by ChokriReacted by ChokriDid you find any solution?
I'm facing the same issue.+1
9 remaining items
@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
Reacted by Abraham Galué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 on what Android version? I think this is an Android problem with React Native and it seems resolved on newer versions of Android.
@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
Reacted by NantrisI 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
Reacted by Abraham Galué@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.
Reacted by NantrisGlad to hear it!
I think these are the underlying native functions:
Reacted by Abraham Galué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 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.
Description
When using KeyboardAvoidingView on android, whatever the configuration I use for the
behavioror thekeyboardVerticalOffsetI 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"orandroid: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 infoIt 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