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

[jayesbe]

I created a ticket related to the ExNavigator here https://github.com/exponentjs/ex-navigator/issues/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.

[dwaligora]

I have experienced the same issue unfortunately.

[SyloRei]

This problem is a small , but annoying. Fix this , please.

[SyloRei]

Bump

[BigPun86]

+1

[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

[krailler]

Same issue..

[AtixD]

+1

[bpt2410]

I also have the same issue

[lolobosse]

+1

[luco]

+1 on this.

Using android:windowSoftInputMode="adjustNothing" breaks some classes, as chat which floats when keyboard slide in.

[irsyadmhdilham]

same issue

[a407121393]

same issue+1

[davebro]

+1

[danstepanov]

+1

[chudnyi]

+1

[nikojohnarellano]

+1

[neetocode]

+1

[verybluebot]

same issue, only with Text Input: when keyboard is open textInput fields are 'squashed' to minimum size.
only on android.
these kind of things make me want to run back to ionic or good old native development for each platform :/

[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

[IljaDaderko]

android:windowSoftInputMode="adjustNothing" does the trick, but renders https://facebook.github.io/react-native/docs/keyboardavoidingview.html as padding is not getting applied, kind of a loose loose situation

[sabbyt54]

+1

[daxaxelrod]

+1 Have the same issue. have a standard container with flex:1 and 2 components, flex:.8 and flex:.2

When the textinput is selected and the keyboard comes up, its as if the entire flex is squished

[gongteng0215]

@marcshilling Thank you,That helped me!

[Asleepace]

Setting the height of the view to the screen's height worked for me!

[RavinderRikhi]

Set the Parent container height to Device height fixed it for me . I think the view shrinks only if it is designed using flex boxes .

[dccarmo]

@ericvicenti Honestly this issue should be reopened, there isn't a clear solution.

Ideally android:windowSoftInputMode="adjustNothing" would be applied and then KeyboardAvoidingView would work as intended, which is not the case.

[kaueDM]

Bump

I have lots of absolute positioned components. My entire app breaks when the keyboard pops up.

[Ashoat]

I'm gonna reopen this issue since the solution provided when it was closed doesn't actually fix the problem.

[ankitkante]

Hi, for ejected apps android:windowSoftInputMode="adjustNothing" may work, but, we need a solution that works for non-ejected apps too.

[ChristianTucker]

@ankitkante Your issue of "Ejecting" has nothing to do with react-native and has everything to do with expo. You should ask for a solution over there. :)

[ospfranco]

Another possible workaround as mentioned by @Asleepace is using a fixed height.

Worked for me, not ideal, but better than nothing.

[maxfadeev]

None of solutions helps me(except android:windowSoftInputMode="adjustNothing", but I don't think it's a proper solution)

[maxfadeev]

Surprised, my problem was in the hidden StatusBar, I didn't run into such issue before. So check if you have the hidden StatusBar in your code :smiley:. Anyway it's a weird behaviour. Still wondering if there is a workaround.

[jh2oman]

+1

[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 https://github.com/facebook/react-native/issues/13000#issuecomment-397335819
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 https://github.com/facebook/react-native/issues/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.