質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.32%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Q&A

0回答

119閲覧

React Native(Expo)でiosでテキスト入力時に下線が消えてしまう

smalake

総合スコア0

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

0グッド

0クリップ

投稿2025/02/28 14:26

編集2025/02/28 15:16

前提

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/ツールのバージョンなど)

他不足している情報等ありましたが、言っていただけますと幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.32%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問