React Native で入力フィールドがソフトウェアキーボードに隠されてしまうのを防ぎたい

React Native で、入力フィールドを画面下部、具体的には半分より下くらいに設置すると、入力ボックスにフォーカスした場合、ソフトウェアキーボードに入力ボックスの一部が隠されてしまうケースがあります。

このままだと入力フィールドが隠れてしまい、現在入力中の内容が見えないので不便です。なんとかしましょう、というのが今回の記事。やることとしては簡単で、まず react-native-keyboard-controller を導入します。

$ pnpm add react-native-keyboard-controller

導入したら、まずは KeyboardProvider をアプリケーションルートへ追加します。

// @_layout.tsx
import { KeyboardProvider } from "react-native-keyboard-controller";

export default function Layout() {
  return <KeyboardProvider>
    {/* ... */}
  </KeyboardProvider>
}

次は、該当フィールドがある View 全体を、 KeyboardAwareScrollView で囲みます。 KeyboardAwareScrollView で囲んだ部分が、キーボードを避けるように動くようになるので、 View 全体を囲った方が自然な動きになります。

// @reports/page.tsx
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";

export default function ReportView() {
  return <KeyboardAwareScrollView>
    {/* ... */}
  </KeyboardAwareScrollView>
}