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?
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.