⌨️

react-nativeでsecureTextEntryなTextInputの前のTextInputで3rdParty製のキーボードが出ない

2023/02/13に公開

iOS

状況

react-native:0.68.2
iOS: 15.6.1

問題はiOSで発生しています。

const EmailAndPassword = (props) => {
  return (
    <View>
      <TextInput placeholder="Email" style={{ marginBottom: 20 }} />
      <TextInput placeholder="Password" secureTextEntry={true} />
    </View>
  );
}

この状態で上のTextInputにフォーカスを当てると出てくるキーボードに3rdParty製のキーボードがキーボードを切り替えても出てきませんでした。使用しているキーボードは片手キーボードPROです。

この辺をみるとlocaleに影響してるようですが、通常の日本語キーボードは出ました。バグの状況が変わってるのかも。

どうやら、IOSのバグだと言うことでreact-native側では対応しないようです。

解決策

こちらの関連したISSUEで解決策が共有されてました。高さが1のTextInputを挿入すると動きます。

      <View>
        <TextInput style={{ borderColor: 'black', borderWidth: 1 }} />
        <TextInput style={{ height: 1, marginBottom: -1 }} />
        <TextInput secureTextEntry style={{ borderColor: 'black', borderWidth: 1 }} />
      </View>

ちなみに{height: 0}はだめでした。ちょっと強引ですね。他に美味いのあったら教えてください。

上記ISSUEに

I just found out, that this problem does not occur when the one of the fields is set to editable={false}.

というのがあるのですが、これはsecureTextEntryのやつをeditable={false}にすれば治りますが、他のフィールドだとだめでした。IOSのアップデートで状況が変わってるようですね。

パスワードをeditable={false}にするとメール入力後パスワード入力欄をクリックしてもフォーカスが移動しないのでやめました。

native-baseの場合

私はnative-base(3.4.25)を使ってるのですが、その場合は

<Input />
<Input h={0} borderWidth={0} />
<Input type={'password'} />

と高さ0でいけました。内部的にどう言う実装になっていて、どういうTextInputがrenderされてるのか追ってません。

状況

解決策

native-baseの場合

Discussion