Android で React Native の KeyboardAvoidingView の behavior を指定すると、逆に Input がキーボードに隠れてしまう

環境

• react-native : 0.57.8

Android で React Native の KeyboardAvoidingView の behavior を指定すると、逆に Input がキーボードに隠れてしまった話

• React Native に KeyboardAvoidingView というコンポーネントがある

  • キーボードを出した際に、入力フィールドなどがキーボードに隠れないようにしてくれる

• Android で React Native の KeyboardAvoidingView の behavior に padding を指定すると、逆に Input がキーボードに隠れてしまった

• なので、behavior={Platform.OS === 'ios' ? 'padding' : null} のようにして Android では behavior を指定しないようにした

• 公式ドキュメントにもこう書かれている (最初からちゃんと読もう)

  • Android and iOS both interact with this prop differently. Android may behave better when given no behavior prop at all, whereas iOS is the opposite.

<KeyboardAvoidingView
  style={{flex: 1}}
  behavior={Platform.OS === 'ios' ? 'padding' : null} // Android で padding を使用すると、KeyboardAvoidingView を使用しているにも関わらず、Input がキーボードに隠れてしまう
>
  <View style={{
    backgroundColor: 'gray',
    height: 100,
  }}
  >
  </View>

  <View style={{
    flex: 1, //キーボードを出した際、KeyboardAvoidingView の behavior='padding' によりキーボードで狭くなった領域を 100% として調整される
    backgroundColor: 'pink',
  }}>
    <Text>
      Android で padding を使用すると、KeyboardAvoidingView を使用しているにも関わらず、Input がキーボードに隠れてしまう
    </Text>
  </View>

  <Input 
    style={{
      backgroundColor: 'white',
      height: 50,
    }}
    placeholder={'なにか入力してください'}
  />
</KeyboardAvoidingView>

iOS behavior=padding => 意図した動作をする

Android behavior=padding => Input がキーボードに隠れてしまう

Android behavior=null => こっちのほうが良い動作になる

• OS の UI に依存した機能(=今回で言うとキーボード)を利用して画面をつくるが意外と難しいなー。
  • このあたりが React Native で iOS/Android で if 文を書かなければならないところかー。