TextInput

キーボードを介してアプリにテキストを入力するための基本的なコンポーネントです。プロパティは、自動修正、自動大文字化、プレースホルダーテキスト、および数値キーパッドなどのさまざまなキーボードタイプなど、いくつかの機能の構成を提供します。

最も基本的なユースケースは、TextInput を配置し、onChangeText イベントをサブスクライブしてユーザー入力を読み取ることです。サブスクライブできる onSubmitEditing や onFocus などの他のイベントもあります。最小限の例

ネイティブ要素を介して公開される 2 つのメソッドは、.focus() と .blur() であり、TextInput をプログラムでフォーカスまたはぼかします。

一部のプロパティは、multiline={true/false} でのみ使用できることに注意してください。また、要素の片側のみに適用されるボーダースタイル (例: borderBottomColor、borderLeftWidth など) は、multiline=true の場合は適用されません。同じ効果を実現するには、TextInput を View でラップできます。

TextInput には、デフォルトでビューの下部に境界線があります。この境界線は、システムによって提供される背景画像によって設定されたパディングを持っており、変更することはできません。これを回避するための解決策は、高さを明示的に設定しないか、その場合、システムが境界線を正しい位置に表示するように処理するか、underlineColorAndroid を透明に設定して境界線を表示しないかのいずれかです。

Android では、入力でテキストを選択すると、アプリのアクティビティ windowSoftInputMode パラメーターが adjustResize に変更される可能性があることに注意してください。これにより、キーボードがアクティブなときに position: 'absolute' を持つコンポーネントで問題が発生する可能性があります。この動作を回避するには、AndroidManifest.xml (https://developer.android.com/guide/topics/manifest/activity-element.html) で windowSoftInputMode を指定するか、ネイティブコードでこのパラメーターをプログラムで制御します。

---

リファレンス

プロパティ

View プロパティ

View プロパティを継承します。

---

allowFontScaling

フォントがテキストサイズのアクセシビリティ設定を尊重してスケーリングされるかどうかを指定します。デフォルトはtrueです。

型
bool

---

autoCapitalize

特定の文字を自動的に大文字にするようにTextInputに指示します。このプロパティは、name-phone-padなどの一部のキーボードタイプではサポートされていません。

• characters: すべての文字。
• words: 各単語の最初の文字。
• sentences: 各文の最初の文字 (デフォルト)。
• none: 何も自動的に大文字にしない。

型
enum('none', 'sentences', 'words', 'characters')

---

autoComplete

システムにオートフィルを提供できるように、オートコンプリートのヒントを指定します。Androidでは、システムは常にヒューリスティックを使用してコンテンツのタイプを識別し、オートフィルを提供しようとします。オートコンプリートを無効にするには、autoComplete を off に設定します。

次の値はプラットフォーム間で動作します

• additional-name
• address-line1
• address-line2
• birthdate-day (iOS 17+)
• birthdate-full (iOS 17+)
• birthdate-month (iOS 17+)
• birthdate-year (iOS 17+)
• cc-csc (iOS 17+)
• cc-exp (iOS 17+)
• cc-exp-day (iOS 17+)
• cc-exp-month (iOS 17+)
• cc-exp-year (iOS 17+)
• cc-number
• country
• current-password
• email
• family-name
• given-name
• honorific-prefix
• honorific-suffix
• name
• new-password
• off
• one-time-code
• postal-code
• street-address
• tel
• username

iOS

次の値はiOSでのみ動作します

• cc-family-name (iOS 17+)
• cc-given-name (iOS 17+)
• cc-middle-name (iOS 17+)
• cc-name (iOS 17+)
• cc-type (iOS 17+)
• nickname
• organization
• organization-title
• url

Android

次の値はAndroidでのみ動作します

• gender
• name-family
• name-given
• name-middle
• name-middle-initial
• name-prefix
• name-suffix
• password
• password-new
• postal-address
• postal-address-country
• postal-address-extended
• postal-address-extended-postal-code
• postal-address-locality
• postal-address-region
• sms-otp
• tel-country-code
• tel-device
• tel-national
• username-new

型

enum('additional-name', 'address-line1', 'address-line2', 'birthdate-day', 'birthdate-full', 'birthdate-month', 'birthdate-year', 'cc-csc', 'cc-exp', 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'country', 'current-password', 'email', 'family-name', 'given-name', 'honorific-prefix', 'honorific-suffix', 'name', 'new-password', 'off', 'one-time-code', 'postal-code', 'street-address', 'tel', 'username', 'cc-family-name', 'cc-given-name', 'cc-middle-name', 'cc-name', 'cc-type', 'nickname', 'organization', 'organization-title', 'url', 'gender', 'name-family', 'name-given', 'name-middle', 'name-middle-initial', 'name-prefix', 'name-suffix', 'password', 'password-new', 'postal-address', 'postal-address-country', 'postal-address-extended', 'postal-address-extended-postal-code', 'postal-address-locality', 'postal-address-region', 'sms-otp', 'tel-country-code', 'tel-device', 'tel-national', 'username-new')

---

autoCorrect

falseの場合、自動修正を無効にします。デフォルト値はtrueです。

型
bool

---

autoFocus

trueの場合、componentDidMountまたはuseEffectで入力にフォーカスします。デフォルト値はfalseです。

型
bool

---

blurOnSubmit

trueの場合、テキストフィールドは送信時にフォーカスが外れます。デフォルト値は、1行のフィールドの場合はtrue、複数行のフィールドの場合はfalseです。複数行のフィールドの場合、blurOnSubmitをtrueに設定すると、Returnキーを押すとフィールドのフォーカスが外れ、フィールドに改行を挿入する代わりにonSubmitEditingイベントがトリガーされることに注意してください。

型
bool

---

caretHidden

trueの場合、キャレットは非表示になります。デフォルト値はfalseです。

型
bool

---

clearButtonMode

iOS

テキストビューの右側にクリアボタンが表示されるタイミング。このプロパティは、1行のTextInputコンポーネントでのみサポートされています。デフォルト値はneverです。

型
enum('never', 'while-editing', 'unless-editing', 'always')

---

clearTextOnFocus

iOS

trueの場合、編集が開始されるとテキストフィールドが自動的にクリアされます。

型
bool

---

contextMenuHidden

trueの場合、コンテキストメニューは非表示になります。デフォルト値はfalseです。

型
bool

---

dataDetectorTypes

iOS

テキスト入力でクリック可能なURLに変換されるデータのタイプを決定します。multiline={true}およびeditable={false}の場合のみ有効です。デフォルトでは、データ型は検出されません。

1つのタイプまたは複数のタイプの配列を提供できます。

dataDetectorTypesの可能な値は次のとおりです。

• 'phoneNumber'
• 'link'
• 'address'
• 'calendarEvent'
• 'none'
• 'all'

型
enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')の配列

---

defaultValue

ユーザーが入力し始めると変更される初期値を指定します。イベントをリッスンし、値のプロパティを更新して制御された状態を同期させる必要がないユースケースに役立ちます。

型
string

---

cursorColor

Android

提供されると、コンポーネントのカーソル (または「キャレット」) の色を設定します。selectionColorの動作とは異なり、カーソルの色はテキスト選択ボックスの色とは別に設定されます。

型
color

---

disableFullscreenUI

Android

falseの場合、テキスト入力の周囲に利用可能なスペースが少ない場合 (たとえば、電話での横向き)、OSはユーザーにフルスクリーンのテキスト入力モード内でテキストを編集させることを選択する場合があります。trueの場合、この機能は無効になり、ユーザーは常にテキスト入力をテキスト入力内で直接編集します。デフォルトはfalseです。

型
bool

---

editable

falseの場合、テキストは編集できません。デフォルト値はtrueです。

型
bool

---

enablesReturnKeyAutomatically

iOS

trueの場合、テキストがないときはキーボードのリターンキーが無効になり、テキストがあるときは自動的に有効になります。デフォルト値はfalseです。

型
bool

---

enterKeyHint

リターンキーに表示するテキストを決定します。returnKeyTypeプロパティよりも優先されます。

次の値はプラットフォーム間で動作します

• enter
• done
• next
• search
• send

Androidのみ

次の値はAndroidでのみ動作します

• previous

型
enum('enter', 'done', 'next', 'previous', 'search', 'send')

---

importantForAutofill

Android

Android API Level 26以上で、アプリ内の個々のフィールドを自動入力の目的でビュー構造に含めるかどうかをオペレーティングシステムに伝えます。可能な値はauto、no、noExcludeDescendants、yes、yesExcludeDescendantsです。デフォルト値はautoです。

• auto: Androidシステムがヒューリスティックを使用して、ビューが自動入力に重要かどうかを判断します。
• no: このビューは自動入力に重要ではありません。
• noExcludeDescendants: このビューとその子ビューは自動入力に重要ではありません。
• yes: このビューは自動入力に重要です。
• yesExcludeDescendants: このビューは自動入力に重要ですが、その子ビューは自動入力に重要ではありません。

型
enum('auto', 'no', 'noExcludeDescendants', 'yes', 'yesExcludeDescendants')

---

inlineImageLeft

Android

定義されている場合、指定された画像リソースが左側にレンダリングされます。画像リソースは/android/app/src/main/res/drawable内にあり、次のように参照する必要があります。

<TextInput
 inlineImageLeft='search_icon'
/>

型
string

---

inlineImagePadding

Android

インライン画像（存在する場合）とテキスト入力自体の間のパディング。

型
number

---

inputAccessoryViewID

iOS

このテキスト入力にカスタムInputAccessoryViewをリンクするオプションの識別子。このテキスト入力がフォーカスされている場合、InputAccessoryViewはキーボードの上にレンダリングされます。

型
string

---

inputMode

HTMLのinputmode属性のように機能し、開くキーボードを決定します（例：numeric）。keyboardTypeよりも優先されます。

次の値をサポートします

• none
• text
• decimal
• numeric
• tel
• search
• email
• url

型
enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url')

---

keyboardAppearance

iOS

キーボードの色を決定します。

型
enum('default', 'light', 'dark')

---

keyboardType

開くキーボードを決定します（例：numeric）。

すべてのタイプのスクリーンショットはこちらで確認できます。

次の値はプラットフォーム間で動作します

• default
• number-pad
• decimal-pad
• numeric
• email-address
• phone-pad
• url

iOSのみ

次の値はiOSでのみ動作します

• ascii-capable
• numbers-and-punctuation
• name-phone-pad
• twitter
• web-search

Androidのみ

次の値はAndroidでのみ動作します

• visible-password

型
enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password')

---

maxFontSizeMultiplier

allowFontScalingが有効になっている場合に、フォントが到達できる最大のスケールを指定します。可能な値：

• null/undefined（デフォルト）：親ノードまたはグローバルデフォルト（0）から継承します
• 0：最大値なし、親/グローバルデフォルトを無視します
• >= 1：このノードのmaxFontSizeMultiplierをこの値に設定します

型
number

---

maxLength

入力できる最大文字数を制限します。ちらつきを避けるために、JSでロジックを実装する代わりにこれを使用してください。

型
number

---

multiline

trueの場合、テキスト入力は複数行にすることができます。デフォルト値はfalseです。

注意

これはiOSではテキストを上に揃え、Androidでは中央に揃えることに注意してください。両方のプラットフォームで同じ動作にするには、textAlignVerticalをtopに設定して使用してください。

型
bool

---

numberOfLines

Android

TextInputの行数を設定します。複数行を埋めるには、multilineをtrueに設定して使用します。

型
number

---

onBlur

テキスト入力がフォーカスを失ったときに呼び出されるコールバック。

注意：nativeEventからtextの値にアクセスしようとする場合は、結果の値がundefinedになる可能性があり、意図しないエラーが発生する可能性があることに注意してください。TextInputの最後の値を見つけようとしている場合は、編集の完了時に発生するonEndEditingイベントを使用できます。

型
function

---

onChange

テキスト入力のテキストが変更されたときに呼び出されるコールバック。

型
({nativeEvent: {eventCount, target, text}}) => void

---

onChangeText

テキスト入力のテキストが変更されたときに呼び出されるコールバック。変更されたテキストは、コールバックハンドラーに単一の文字列引数として渡されます。

型
function

---

onContentSizeChange

テキスト入力のコンテンツサイズが変更されたときに呼び出されるコールバック。

複数行のテキスト入力の場合にのみ呼び出されます。

型
({nativeEvent: {contentSize: {width, height} }}) => void

---

onEndEditing

テキスト入力が終了したときに呼び出されるコールバック。

型
function

---

onPressIn

タッチが開始されたときに呼び出されるコールバック。

型
({nativeEvent: PressEvent}) => void

---

onPressOut

タッチが解放されたときに呼び出されるコールバック。

型
({nativeEvent: PressEvent}) => void

---

onFocus

テキスト入力がフォーカスされたときに呼び出されるコールバック。

型
({nativeEvent: LayoutEvent}) => void

---

onKeyPress

キーが押されたときに呼び出されるコールバック。これは、それぞれのキーに対してkeyValueが'Enter'または'Backspace'であるオブジェクト、およびスペースの場合は' 'を含む入力された文字で呼び出されます。onChangeコールバックの前に発生します。注意：Androidでは、ソフトキーボードからの入力のみが処理され、ハードウェアキーボードの入力は処理されません。

型
({nativeEvent: {key: keyValue} }) => void

---

onLayout

マウント時およびレイアウトの変更時に呼び出されます。

型
({nativeEvent: LayoutEvent}) => void

---

onScroll

コンテンツスクロール時に呼び出されます。ScrollEventの他のプロパティも含まれる場合がありますが、Androidではパフォーマンス上の理由からcontentSizeは提供されません。

型
({nativeEvent: {contentOffset: {x, y} }}) => void

---

onSelectionChange

テキスト入力の選択範囲が変更されたときに呼び出されるコールバック。

型
({nativeEvent: {selection: {start, end} }}) => void

---

onSubmitEditing

テキスト入力の送信ボタンが押されたときに呼び出されるコールバック。

型
({nativeEvent: {text, eventCount, target}}) => void

iOSでは、keyboardType="phone-pad"を使用している場合、このメソッドは呼び出されないことに注意してください。

---

placeholder

テキスト入力が入力される前にレンダリングされる文字列。

型
string

---

placeholderTextColor

プレースホルダー文字列のテキストの色。

型
color

---

readOnly

trueの場合、テキストは編集できません。デフォルト値はfalseです。

型
bool

---

returnKeyLabel

Android

リターンキーをラベルに設定します。returnKeyTypeの代わりに使用します。

型
string

---

returnKeyType

リターンキーの表示方法を決定します。Androidでは、returnKeyLabelも使用できます。

クロスプラットフォーム

次の値はプラットフォーム間で動作します

• done
• go
• next
• search
• send

Androidのみ

次の値はAndroidでのみ動作します

• none
• previous

iOSのみ

次の値はiOSでのみ動作します

• default
• emergency-call
• google
• join
• route
• yahoo

型
enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo')

rejectResponderTermination

iOS

trueの場合、TextInputが親コンポーネントにタッチイベントを渡せるようにします。これにより、SwipeableListViewなどのコンポーネントは、デフォルトでAndroidの場合と同様に、iOSのTextInputからスワイプできるようになります。falseの場合、TextInputは常に（無効になっている場合を除いて）入力を処理するように要求します。デフォルト値はtrueです。

型
bool

---

rows

Android

TextInputの行数を設定します。複数行を埋めるには、multilineをtrueに設定して使用します。

型
number

---

scrollEnabled

iOS

falseの場合、テキストビューのスクロールは無効になります。デフォルト値はtrueです。multiline={true}の場合のみ機能します。

型
bool

---

secureTextEntry

trueの場合、パスワードなどの機密性の高いテキストを安全に保つために、入力されたテキストを隠します。デフォルト値はfalseです。multiline={true}では機能しません。

型
bool

---

selection

テキスト入力の選択範囲の開始と終了。カーソルを配置するには、startとendに同じ値を設定します。

型
object: {start: number,end: number}

---

selectionColor

テキスト入力のハイライト、選択ハンドル、カーソルの色。

型
color

---

selectionHandleColor

Android

選択ハンドルの色を設定します。selectionColorとは異なり、選択ハンドルの色を選択の色とは独立してカスタマイズできます。

型
color

---

selectTextOnFocus

trueの場合、フォーカス時にすべてのテキストが自動的に選択されます。

型
bool

---

showSoftInputOnFocus

falseの場合、フィールドがフォーカスされたときにソフトウェアキーボードが表示されるのを防ぎます。デフォルト値はtrueです。

型
bool

---

spellCheck

iOS

falseの場合、スペルチェックのスタイル（赤の下線など）を無効にします。デフォルト値はautoCorrectから継承されます。

型
bool

---

textAlign

入力フィールドの左側、中央、または右側に入力テキストを揃えます。

textAlignに使用できる値は次のとおりです。

• left
• center
• right

型
enum('left', 'center', 'right')

---

textContentType

iOS

ユーザーが入力するコンテンツの予想される意味に関する情報をキーボードとシステムに提供します。

注意

autoCompleteは、同じ機能を提供し、すべてのプラットフォームで利用できます。Platform.selectを使用して、プラットフォームごとの動作を切り替えることができます。

textContentTypeとautoCompleteの両方を使用することは避けてください。下位互換性のために、両方のプロパティが設定されている場合は、textContentTypeが優先されます。

textContentTypeをusernameまたはpasswordに設定すると、デバイスのキーチェーンからのログイン詳細の自動入力が有効になります。

newPasswordは、ユーザーがキーチェーンに保存したい新しいパスワード入力を示すために使用でき、oneTimeCodeは、SMSで届くコードでフィールドを自動入力できることを示すために使用できます。

自動入力を無効にするには、textContentTypeをnoneに設定します。

textContentTypeに使用できる値は次のとおりです。

• none
• addressCity
• addressCityAndState
• addressState
• birthdate (iOS 17+)
• birthdateDay (iOS 17+)
• birthdateMonth (iOS 17+)
• birthdateYear (iOS 17+)
• countryName
• creditCardExpiration (iOS 17+)
• creditCardExpirationMonth (iOS 17+)
• creditCardExpirationYear (iOS 17+)
• creditCardFamilyName (iOS 17+)
• creditCardGivenName (iOS 17+)
• creditCardMiddleName (iOS 17+)
• creditCardName (iOS 17+)
• creditCardNumber
• creditCardSecurityCode (iOS 17+)
• creditCardType (iOS 17+)
• emailAddress
• familyName
• fullStreetAddress
• givenName
• jobTitle
• location
• middleName
• name
• namePrefix
• nameSuffix
• newPassword
• nickname
• oneTimeCode
• organizationName
• password
• postalCode
• streetAddressLine1
• streetAddressLine2
• sublocality
• telephoneNumber
• URL
• username

型

enum('none', 'addressCity', 'addressCityAndState', 'addressState', 'birthdate', 'birthdateDay', 'birthdateMonth', 'birthdateYear', 'countryName', 'creditCardExpiration', 'creditCardExpirationMonth', 'creditCardExpirationYear', 'creditCardFamilyName', 'creditCardGivenName', 'creditCardMiddleName', 'creditCardName', 'creditCardNumber', 'creditCardSecurityCode', 'creditCardType', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'newPassword', 'nickname', 'oneTimeCode', 'organizationName', 'password', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'URL', 'username')

---

passwordRules

iOS

iOSでtextContentTypeをnewPasswordとして使用する場合、OSにパスワードの最小要件を知らせて、それらを満たすパスワードを生成させることができます。PasswordRulesの有効な文字列を作成するには、Appleドキュメントをご覧ください。

パスワード生成ダイアログが表示されない場合は、以下を確認してください。

• 自動入力が有効になっていること：設定 → パスワードとアカウント → パスワードを自動入力を「オン」に切り替えます。
• iCloudキーチェーンが使用されていること：設定 → Apple ID → iCloud → キーチェーン → iCloudキーチェーンを「オン」に切り替えます。

型
string

---

style

すべてのテキストスタイルがサポートされているわけではないことに注意してください。サポートされていないものの不完全なリストには、以下が含まれます。

• borderLeftWidth
• borderTopWidth
• borderRightWidth
• borderBottomWidth
• borderTopLeftRadius
• borderTopRightRadius
• borderBottomRightRadius
• borderBottomLeftRadius

スタイル

型
Text

---

textBreakStrategy

Android

Android API Level 23+でテキストの改行戦略を設定します。使用できる値は、simple、highQuality、balancedです。デフォルト値はhighQualityです。

型
enum('simple', 'highQuality', 'balanced')

---

underlineColorAndroid

Android

TextInputの下線の色。

型
color

---

value

テキスト入力に表示する値。TextInputは制御されたコンポーネントであるため、提供されている場合は、ネイティブ値はこの値のpropと一致するように強制されます。ほとんどの場合、これはうまく機能しますが、場合によってはちらつきが発生する可能性があります。一般的な原因の1つは、値を同じに保つことで編集を防ぐことです。同じ値を設定するだけでなく、editable={false}を設定するか、maxLengthを設定/更新して、ちらつきなしに不要な編集を防ぎます。

型
string

---

lineBreakStrategyIOS

iOS

iOS 14+で改行戦略を設定します。使用できる値は、none、standard、hangul-word、push-outです。

型	デフォルト
enum('none', 'standard', 'hangul-word', 'push-out')	'none'

メソッド

.focus()

focus();

ネイティブ入力にフォーカスを要求させます。

.blur()

blur();

ネイティブ入力からフォーカスを失わせます。

clear()

clear();

TextInputからすべてのテキストを削除します。

---

isFocused()

isFocused(): boolean;

入力が現在フォーカスされている場合はtrueを、そうでない場合はfalseを返します。

既知の問題

• react-native#19096：AndroidのonKeyPreImeをサポートしていません。
• react-native#19366：Androidのバックボタンでキーボードを閉じた後に.focus()を呼び出すと、キーボードが再び表示されません。
• react-native#26799：keyboardType="email-address"またはkeyboardType="phone-pad"の場合、AndroidのsecureTextEntryをサポートしていません。