React Native の keyboardType はあまり信用してはいけない

こちらは CureApp Advent Calendar 2022 8 日目の記事です。

はじめに

Web アプリやネイティブアプリにとって最も基本的な操作の 1 つに入力があります。
この入力操作は、キーボードから入力するキーに対して制限を設けることもできます。
例えば、半角英数字しか入力できない、数字しか入力できないフォームなどなど。

最も代表的なのはユーザ登録やログイン時でのフォーム入力ですね。
ユーザ ID やパスワードには入力可能な文字が決められていることが多いです。
この時、ユーザ ID とパスワードを入力するフォームで、表示されるキーボードが若干違うというのも珍しくはないです。
React Native ではデフォルトで表示されるキーボードを TextInput コンポーネントの keyboardType という props で変更することができます。
とても便利な機能ですが、我々日本人が作る日本語入力をサポートする国内向けのアプリではほぼ機能しないので気をつけてください。

React Native がベースの話にはなりますが、（残念ながら）Swift や Kotlin でも共通の話になります。

指定できる keyboardType の一覧

公式リファレンスによると、サポートされている keyboardType は以下になっています。
これらのキーボードの見た目はこちらで確認できます。
指定する keyboardType によっては、英数字と一部記号のみ入力できるキーボードになったりします。

keyboardTyoe	iOS	Android
default	o	o
number-pad	o	o
decimal-pad	o	o
numeric	o	o
email-address	o	o
url	o	o
ascii-capable	o
numbers-and-punctuation	o
name-phone-pad	o
twitter	o
web-search	o
visible-password		o

OS の設定でキーボードは変更することができる

iPhone や Android は設定で OS 自体の言語やキーボードを変更できます。
React Native の公式リファレンスに引用されているキーボードの見た目は、「English(US)」と「Emoji」のものとなっています。
まぁ、英語圏ではこの設定がおそらくデフォルトだとは思われます。
OS で日本語のキーボード「Japanese - Kana」を追加すると、このデフォルトの見た目が変わります。
下の画像は、iOS 12 で TextInput コンポーネントの keyboardType をemail-addressに指定した時の見た目の違いになります。

日本語キーボード無し	日本語キーボード有り

結構ちがいますね。
特に iOS は酷く、普通の日本語入力キーボードのまんまです。
最大の違いとして、日本語入力と英語入力を切り替えることができるようになっているという点ですね。
keyboardType では入力する文字の制限も可能ですが、日本語キーボードにおいてはほぼ機能しません。
左下の地球アイコンをタップすると email-address のキーボードには変わりますが、ちがう・・・そうじゃないんだ・・・

日本語入力用のキーボードと、英字入力用のキーボードの切り替えを抑制することはできないため、どうすることもできません。
日本ユーザ向けのアプリを作る場合、keyboardType による見た目変更とそのことによる入力制限は諦めた方がいいです。

全てのキーボードの見た目が変わらないわけではなく、数字入力系のキーボードの見た目は変わります。
というか、ちゃんと機能するのは number-pad、numeric、phone-pad ぐらいです。

secureTextEntry は必ず英数字入力キーボードになる

キーボードの見た目を変更する方法はもう 1 つあり、それがsecureTextEntryになります。
パスワード入力フォームなどに渡す props ですね。
こちらは日本語キーボードを入れていても、必ず英数字と記号のみが入力できるキーボード（ascii-capable と同じ）に強制されます。
なお、入力キーボードを変えるために secureTextEntry を渡すのはやめましょう。
そもそもの用途が違いますし、挙動も異なります。

さいごに

React Native で日本ユーザ向けのアプリを開発するならば、必ず設定で日本語キーボードを追加しておきましょう。

余談ですが日本語入力をサポートするということはフリック入力やトグル入力（ガラケー式入力）もサポートするということになります。
React Native では文字数をトリガーにした処理は日本式入力の前ではことごとく機能しません。
日本語入力には闇が詰まっています。
というか、CJK そのものが闇ですね。