0

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

Pomi Form
  • 23
  • 5
  • 1
    android:windowSoftInputMode:"adjustResize" should work. See here: https://github.com/facebook/react-native/issues/10260 – atlanteh Dec 05 '16 at 16:00
  • Thanks! I was sure I tried them all but must have missed that one since my original intent was to not resize the window regardless keyboard. However, this makes it consequent and that's the most important thing here. If someone is looking for a workaround where you want to handle resize by your self at all times you can set an absolute height with the help of Dimensions + https://github.com/Sunhat/react-native-extra-dimensions-android – Pomi Form Dec 05 '16 at 21:31
  • While "adjustResize" works in all cases it looks like the default setting "adjustUnspecified" only "kicks in" once the user has minimised the app, this must be a bug? – Pomi Form Dec 05 '16 at 21:36
  • I'm not sure..Like u see I opened a bug, but apparently it's not important enough for them to handle.. I'll add an answer, please accept :) – atlanteh Dec 06 '16 at 08:39

1 Answers1

4

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.

atlanteh
  • 5,615
  • 2
  • 33
  • 54