【ReactNative】KeyboardAvoidingViewでうまくスクロールしない時【株式会社ライトコード】

KeyboardAvoidingViewとは

スマートフォンの仮想キーボードで表示が隠れないようにするViewです。

これを設定すれば例えば以下のようにキーボードにTextInputが隠れてしまう場合などで、
隠れない位置までスクロールしてくれるようになります。

KeyboardAvoidingViewあり

KeyboardAvoidingViewなし

キーボードに合わせてTextInputがうまくスクロールしない

例えば以下のようなflexを用いたフォームの場合、

export default function RootLayout() {

  const [text, setText] = useState<string>('');



  return (

    <SafeAreaProvider>

      <SafeAreaView className="h-full bg-white">

        <KeyboardAvoidingView behavior='padding'>

          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>

            <View className='h-full'>

              <View className='m-5'>

                <Text className='text-3xl text-center text-slate-600'>タイトル</Text>

              </View>

              <View className='flex gap-10 p-5 pb-10 bg-gray-200'>

                <Text className='text-2xl text-center text-slate-600'>テキスト</Text>

                {[...new Array(5)].map((index) => (

                  <TextInput 

                    key={index}

                    className='w-full p-2 border border-gray-300 rounded text-2xl bg-neutral-50'

                    value={text} onChangeText={setText}

                    placeholder='TextInput'

                  />

                ))}

              </View>

              <View>

                <Text className='text-3xl text-center text-slate-600'>送信</Text>

              </View>

            </View>

          </TouchableWithoutFeedback>

        </KeyboardAvoidingView>

      </SafeAreaView>

    </SafeAreaProvider>

  );

}

以下の画像の通り、キーボードに隠れる要素にフォーカスを当てた場合にうまく機能しない時があります。

通常時

キーボード出現時

解決方法

justyfy-endを利用した上で、最下部にflex-growのViewを入れることで解決できます。

export default function RootLayout() {

  const [text, setText] = useState<string>('');



  return (

    <SafeAreaProvider>

      <SafeAreaView className="h-full bg-white">

        <KeyboardAvoidingView behavior='padding' className='h-full'>

          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>

            <View className='h-full justify-end'>

              <View className='m-5'>

                <Text className='text-3xl text-center text-slate-600'>タイトル</Text>

              </View>

              <View className='flex gap-10 p-5 pb-10 bg-gray-200'>

                <Text className='text-2xl text-center text-slate-600'>テキスト</Text>

                {[...new Array(5)].map((index) => (

                  <TextInput 

                    key={index}

                    className='h-[50px] w-full p-2 border border-gray-300 rounded text-2xl bg-neutral-50'

                    value={text} onChangeText={setText}

                    placeholder='TextInput'

                  />

                ))}

              </View>

              <View>

                <Text className='text-3xl text-center text-slate-600'>送信</Text>

              </View>

              <View className='flex-grow' />

            </View>

          </TouchableWithoutFeedback>

        </KeyboardAvoidingView>

      </SafeAreaView>

    </SafeAreaProvider>

  );

}