TextInput

キーボード経由でアプリにテキストを入力するための基本的なコンポーネントです。Propsは、自動修正、自動大文字化、プレースホルダーテキスト、数値キーパッドなどのさまざまなキーボードタイプなど、いくつかの機能の設定可能性を提供します。

最も基本的な使用例は、TextInputを配置し、onChangeTextイベントを購読してユーザーの入力を読み取ることです。他にも、onSubmitEditingやonFocusなどのイベントを購読できます。最小限の例は以下の通りです。

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

一部のpropsはmultiline={true/false}でのみ利用可能であることに注意してください。さらに、要素の一辺にのみ適用されるボーダースタイル（例：borderBottomColor、borderLeftWidthなど）は、multiline=trueの場合には適用されません。同じ効果を得るには、TextInputをViewでラップします。

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

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

---

リファレンス

Props

ViewのProps

ViewのPropsを継承します。

---

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の場合、入力フィールドにフォーカスします。デフォルト値はfalseです。

型
bool

---

blurOnSubmit

非推奨。submitBehaviorがblurOnSubmitの代わりとなり、blurOnSubmitで定義された動作を上書きすることに注意してください。submitBehaviorを参照してください。

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

型
bool

---

caretHidden

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

型
bool

---

clearButtonMode

iOS

テキストビューの右側にクリアボタンが表示されるタイミング。このプロパティは単一行の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'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')

---

defaultValue

ユーザーがタイピングを開始すると変更される初期値を提供します。イベントをリッスンしてvalueプロパティを更新し、制御された状態を同期させる必要がないユースケースに便利です。

型
string

---

cursorColor

Android

指定された場合、コンポーネント内のカーソル（または「キャレット」）の色を設定します。selectionColorの動作とは異なり、カーソルの色はテキスト選択ボックスの色とは独立して設定されます。

型
color

---

disableFullscreenUI

Android

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

型
bool

---

editable

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

型
bool

---

enablesReturnKeyAutomatically

iOS

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

型
bool

---

enterKeyHint

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

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

• done
• next
• search
• send
• go

Androidのみ

以下の値はAndroidでのみ動作します

• previous

iOSのみ

以下の値はiOSでのみ動作します

• enter

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

---

importantForAutofill

Android

Android APIレベル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

---

inputAccessoryViewButtonLabel

iOS

デフォルトの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

注意

iOSでのnumberOfLinesは新しいアーキテクチャでのみ利用可能です。

TextInputの最大行数を設定します。行を埋められるようにするには、multilineをtrueに設定して使用します。

型
number

---

onBlur

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

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

型
({nativeEvent: TargetEvent}) => void

---

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: TargetEvent}) => 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はタッチイベントを親コンポーネントに渡すことができます。これにより、iOS上でSwipeableListViewなどのコンポーネントがTextInputからスワイプ可能になります（Androidではデフォルトでこのようになっています）。falseの場合、TextInputは常に入力を処理しようとします（無効になっている場合を除く）。デフォルト値はtrueです。

型
bool

---

rows

Android

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

型
number

---

scrollEnabled

iOS

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

型
bool

---

secureTextEntry

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

型
bool

---

selection

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

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

---

selectionColor

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

型
color

---

selectionHandleColor

Android

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

型
color

---

selectTextOnFocus

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

型
bool

---

showSoftInputOnFocus

falseの場合、フィールドがフォーカスされてもソフトキーボードが表示されなくなります。デフォルト値はtrueです。

型
bool

---

spellCheck

iOS

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

型
bool

---

submitBehavior

リターンキーが押されたとき、

単一行入力の場合

• 'newline' は 'blurAndSubmit' がデフォルトになります
• undefined は 'blurAndSubmit' がデフォルトになります

複数行入力の場合

• 'newline' は改行を追加します
• undefined は 'newline' がデフォルトになります

単一行と複数行の両方の入力で

• 'submit' は送信イベントのみを送信し、入力のフォーカスは外れません
• 'blurAndSubmit' は入力のフォーカスを外し、送信イベントを送信します

型
enum('submit', 'blurAndSubmit', 'newline')

---

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レベル23以上でテキストの改行戦略を設定します。指定可能な値はsimple、highQuality、balancedです。デフォルト値はhighQualityです。

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

---

underlineColorAndroid

Android

TextInputの下線の色です。

型
color

---

value

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

型
string

---

lineBreakStrategyIOS

iOS

iOS 14以降で改行戦略を設定します。指定可能な値はnone、standard、hangul-word、push-outです。

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

---

lineBreakModeIOS

iOS

iOSで改行モードを設定します。指定可能な値はwordWrapping、char、clip、head、middle、tailです。

型	デフォルト
enum('wordWrapping', 'char', 'clip', 'head', 'middle', 'tail')	'wordWrapping'

---

disableKeyboardShortcuts

iOS

trueの場合、キーボードショートカット（元に戻す/やり直し、コピーボタン）が無効になります。デフォルト値はfalseです。

型
bool

メソッド

.focus()

tsx

focus();

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

.blur()

tsx

blur();

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

clear()

tsx

clear();

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

---

isFocused()

tsx

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をサポートしていません。