【ReactNative開発】入力キーボード上に完了ボタンを表示させる方法

こんばんは。今晩もReact Nativeと戦っております。今日は、入力キーボード上に完了ボタンを表示する方法について整理しておきます。

どいうことか、もう少し説明します。

React Nativeで入力フォームを作成したのですが、入力が完了した時にキーボード右上にあるはず（と思い込んでいた）完了ボタンがなくてキーボードを閉じれない！という問題に遭遇しました。

これってデフォルトで表示されているものではないんですね・・・

このキーボード右上に”完了ボタン”を表示させるのが今回のゴールになります。

それでは早速参ります。

前提

• React Native
• Expo
• TypeScript

完了ボタンを表示させる方法

キーボードをカスタマイズするには、<InputAccessoryView>コンポーネントを利用します。

https://docs.expo.dev/versions/latest/react-native/inputaccessoryview/

こちらで紹介されている実装例がこちら。

import React, { useState } from 'react';
import { Button, InputAccessoryView, ScrollView, TextInput } from 'react-native';

export default function App() {
  const inputAccessoryViewID = 'uniqueID';
  const initialText = 'Placeholder Text';
  const [text, setText] = useState(initialText);

  return (
    <>
      <ScrollView keyboardDismissMode="interactive">
        <TextInput
          style={{
            padding: 16,
            marginTop: 50,
          }}
          inputAccessoryViewID={inputAccessoryViewID}
          onChangeText={text => setText(text)}
          value={text}
        />
      </ScrollView>
      <InputAccessoryView nativeID={inputAccessoryViewID}>
        <Button onPress={() => setText(initialText)} title="Reset Text" />
      </InputAccessoryView>
    </>
  );
}

また、以下の記事もわかりやすくまとめられていたので、参考にしていただけると思います。

これでアプリをテストしてみると・・・