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

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.