【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>
    </>
  );
}

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

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

この記事を気に入っていただけたらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。

ABOUT US

Yuu113
初めまして。Yuu113と申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。