[Android] [adjustResize] Keyboard pushes absolute-positioned dynamic-height component off screen

[jayesbe]

I created a ticket related to the ExNavigator here expo/ex-navigator#105

However I believe this is a core issue.

Currently I am using RN 0.22.2 (on Android)

Basically this is my View

<View style={{flex: 1}}>
      <View style={[position: 'absolute', top: 0, left: 0, right: 0, height: 50]}>

      </View>
      <View style={[position: 'absolute', bottom: 0, left: 0, right: 0, height: 50]}>
          <TextInput />
     </View>
<View>

This is basically a chat window with an input field positioned at the bottom of the screen and a header positioned at the top of the screen.

When I first open / run the app, Upon focus of the TextInput, the keyboard appears and the View component positioned at the top is pushed off the page.

I spent a day yesterday figuring out why but in the end I used keyboardDidShow and keyboardDidHide to offset the position of the element so it kind of works.

However today I noticed something different. By chance I minimized the App. I didn't close it. I opened it back up and now the View component that should be positioned at the top was now in the middle. (My offset was calculated to ~270)

So I once again removed the offset handling changes and positioned it statically at the top with top: 0.
I then ran the app again by closing and reopening, as expected the View component was once again pushed off the screen when the keyboard appeared.

I minimized the app, then brought it back up. This time when the keyboard appeared, the View component stayed at the top! This is what I am expecting when you open the app the first time, however it only works after minimizing it first.

Definitely seems like a bug to me.

[SimplyLinn]

I just ran into the same problem. My entire view gets pushed off top when the keyboard pops up. making coding really hard since any keyboard-showing-code I may throw at the application suddenly gets interrupted by the entire view being pushed.

[marcshilling]

I'm experiencing this too. Android only, and only when the selected text input WOULD BE obscured by the keyboard. If I select an input that would remain visible after the keyboard appearance, this does not occur.

[jveldboom]

As a quick fix for this, setting the height on the parent View with onLayout seems to fix the issue.

<View onLayout={(event) => {
     var {height} = event.nativeEvent.layout;
     this.setState({height})
  }}
  style={{flex: 1, height: this.state.height}}>
  <View style={{position: 'absolute', top: 0, left: 0, right: 0, height: 50}}>

  </View>
  <View style={{position: 'absolute', bottom: 0, left: 0, right: 0, height: 50}}>
    <TextInput />
  </View>
<View>

[marcshilling]

Setting android:windowSoftInputMode="adjustNothing" on the MainActivity in AndroidManifest.xml to completely disable the automatic keyboard resizing was my workaround. I then do all the keyboard resizing/scrolling logic myself.

[ericvicenti]

I think android:windowSoftInputMode="adjustResize" is the best option here

[nihgwu]

but android:windowSoftInputMode="adjustResize" still doesn't resolve this issue @ericvicenti

[atakanyenel]

android:windowSoftInputMode="adjustNothing" fixed it for me too in Android.

[ivanzotov]

android:windowSoftInputMode="adjustPan" works for me

[rochapablo]

android:windowSoftInputMode="adjustPan|adjustResize" read more

[charpeni]

Please use reaction instead of "+1" comment, adding noise won't help this issue.

[galkahana]

I found the solution of @jveldboom to be the only one that actually works. mind you it should be minHeight and not height...otherwise flex will win.

[lyminhtanh]

Adding this line of code in the manifest file for the activity you want to apply.
android:windowSoftInputMode="adjustNothing"
I confirm that it works in my case. My activity layout is a Constraint layout.
<activity android:name=".activity.MyProfileActivity" android:screenOrientation="portrait" android:windowSoftInputMode="adjustNothing"/>

[jarvisluong]

I followed the solution from @maxfadeev and it works! I don't know if the contributes anything to this bug but if it's hidden, the view will be moved upwards

[maxfadeev]

@jarvisluong, good to see that my comment helped you!
If you still need a solution, I finally found a workaround here #13000 (comment)
Thanks to @reyalpsirc.
I don't understand why there is no any reaction on that comment except mine. It looks like it's just working as expected.

[ZuhaKarim]

I have like tried soooo many solutions and NOTHING WORKS!! NOTHING!.

[mahendramahi]

use your view Wrap with KeboardAvoidingView like:-

 <KeyboardAvoidingView   
            style={styles.container}
            // behavior='padding'
            behavior={(Platform.OS === 'ios') ? 'padding' : null}
            keyboardVerticalOffset={Platform.select({ ios: 0, android: 500 })}
            enabled
            >
.................... 

And use below code on react native Activity in AndroidManifest.xml
android:windowSoftInputMode="adjustPan|adjustResize"

Work For me ...

[iamshadmirza]

Using android:windowSoftInputMode="adjustPan" in AndroidManifest.xml is fixes the issue but then KeyboardAvoidingView is not working properly, some part of View is always getting hidden behind the keyboard. I tried with both positive and negative offset in keyboardVerticalOffset.
I have been scratching my head for so long and tried everything, there is no clear solution.

[MurugappanV]

Setting full device height to absolute layout works fine for me

[mahendramahi]

@iamshadmirza use this library if you want to control your view when keyboard open in android and ios both platforms
react-native-keyboard-aware-scrollview

[bartolkaruza]

This issue looks very similar (if not identical) to #13000, which is closed as 'un-actionable' because the root cause is an underlying Android system issue.

There appear to be several workarounds in the issue comments above, which allow you to solve this case. The separate issue about the KeyboardAvoidingView not working with 'adjustPan' should be posted as a standalone issue, if that is still the case.

The reproduction posted by the OP (after fixing the syntax) does not reproduce the issue on recent Android emulator (Android 9) with RN 0.59.1.

I'm closing this for now, if you disagree, please help us out with an easy to setup (in a repository) reproduction.

[lilosir]

android:windowSoftInputMode="adjustPan" is working for the Footer, but at the same time, the Header will be pushed up as well.

[stefanfrancis93]

android:windowSoftInputMode="adjustPan" works for me

This worked for me. Thanks 💯

[mahdidarzi]

Setting android:windowSoftInputMode="adjustNothing" on the MainActivity in AndroidManifest.xml to completely disable the automatic keyboard resizing was my workaround. I then do all the keyboard resizing/scrolling logic myself. after this pls run your project again

[AmitPandya007]

I have used this below library but scrollview gets stuck when the keyboard appears.
https://github.com/APSL/react-native-keyboard-aware-scroll-view

and my project is an undetached Expo project.
Please help me with some solutions related to this. Thanks in Advance.

[mahdidarzi]

hi, dude, I don't use this library

[e3bmo3ty]

still same issue on iOS, when keyboard shows up it resize the main container and pushes the views up :(...... thats so frustrated

[Hristijan95]

On Android it's impossible to cover all scenarios. Either there is a problem with empty spacing above the keyboard, if I fix this by "adjustNothing" in android manifest, the KeyboardAvoidingView is completely dead.