Search code examples
android-softkeyboardreact-nativereact-native-scrollviewreact-native-flexbox

React native Scrollview/flex layout behaves inconsistent after minimizing the app on Android

I’m taking my first step in react native land and trying to understand the layouting in regards to the soft keyboard.

I’ve created a new react project via rect-native init and written the following component:

<ScrollView style={{flex: 1}} contentContainerStyle={{flex: 1, borderColor: 'green', borderWidth: 10}}>
  <TextInput/>
  <View style={{flex: 1, borderColor: 'blue', borderWidth: 10}} />
</ScrollView>

The result looks as expected and when I touch the input field the keyboard covers my view. However, if I minimise the app by pressing the square/overview button and then choose the app again the view will adapt it’s height so the keyboard doesn’t cover the view.

My findings so far is that: - This only happens on Android

  • This only happens if a scrollView is present

  • Playing around with android:windowSoftInputMode in the android manifest doesn’t seem to affect the issue.

  • I’ve tried react-native: 0.39.0 / react: 15.4.1 and react-native: 0.33.0 / react: ~15.3.0 and it’s present in both

  • It’s however not reproducible in rnplay (0.33) : https://rnplay.org/apps/kr-OQw

  • I’ve tried on a sony experia z5compact (android 6.0.1), nexus 5x and samsung galaxy s6 (android 6.0.1) and it’s present in all.

I assume the resizing after minimising is an bug or am I missing something here? Is there a workaround to this issue?

Recording of issue (sorry for the quality and unfortunate looping

Solution

  • The default android:windowSoftInputMode is adjustUnspecified which causes this problem.

    You can have the screen resize all the time if you set android:windowSoftInputMode:"adjustResize" (This is the desired way according to the docs).

    You can also follow the bug I opened for react-native.