前提
react-native: 0.76.7
expo: 52.0.37
趣味でアプリ開発を行っているReactNative初心者です。
検索したりAIに質問したりして試行錯誤したものの、全然解決方法がわからなかったので質問させていただきます。
発生している問題・エラーメッセージ
TextInputに文字を入力する際、iosの場合通常は未確定の状態(入力中の状態)だと青い下線が表示されています。
しかし、3文字目を入力するとその青い下線が消えてしまいます。
一回テキストを全て削除し、再度入力しようとすると最初から青い下線は表示されなくなります。
また、その状態で別のTextInputにテキストを入力すると、2文字目から青い下線が表示されなくなります。
青い下線は消えてしまうものの、まだ未確定の状態ではあるのでそこから変換はできるのですが、どこまで入力したのかがわかりづらいので、青い下線が消えないようにしたいです。
この事象は、実機上・シミュレーター上どちらでも発生しており、シミュレーター上ではソフトキーボード・物理キーボードどちらを使っても発生しました。(実機はios18.3.1のiPhone16Pro、シミュレーターはios18.1のiPhone16です)
該当のソースコード
他コードの影響も考慮して、最低限の確認用の以下コードでも同じ事象が発生しています。
TypeScript
1import { useState } from 'react'; 2import { TextInput, View } from 'react-native'; 3 4export default function Index() { 5 const [text, setText] = useState(''); 6 7 return ( 8 <View> 9 <TextInput 10 value={text} 11 defaultValue='' 12 onChangeText={setText} 13 keyboardType='default' 14 style={{ borderWidth: 1, padding: 10, margin: 10, borderRadius: 10, textAlign: 'left' }} 15 /> 16 </View> 17 ); 18}
試したこと
標準のTextInputではなく、react-native-elementsのInputも試してみましたが同じでした。
また、ChatGPT等にも聞いて、出てきたTextInputの以下オプションを付けてみたりもしましたが、改善しませんでした。
TypeScript
1<TextInput 2 value={text} 3 onChange={(e) => setText(e.nativeEvent.text)} 4 importantForAccessibility='no-hide-descendants' 5 autoCorrect={false} 6 autoCapitalize='none' 7 keyboardType='default' 8 style={{ borderWidth: 1, padding: 10, margin: 10, borderRadius: 10, textAlign: 'left' }} 9 />
他、調べて見つかった情報としてはTextInputに underlineColorAndroid='transparent' を入れることで下線を消すということくらいですが、試してみたものの変わらずでした。
補足情報(FW/ツールのバージョンなど)
他不足している情報等ありましたが、言っていただけますと幸いです。

あなたの回答
tips
プレビュー