TextInput

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

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

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

一部のプロパティは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に設定すると、Returnキーを押したときにフィールドに改行が挿入されず、フィールドがぼやけて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

---

disableKeyboardShortcuts

iOS

trueの場合、キーボードショートカット (元に戻す/やり直しボタン、コピーボタン) は無効になります。

型	デフォルト
bool	false

---

cursorColor

Android

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

型
color

---

disableFullscreenUI

Android

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

型
bool

---

editable

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

型
bool

---

enablesReturnKeyAutomatically

iOS

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

型
bool

---

enterKeyHint

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

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

• done
• next
• search
• send
• go

Androidのみ

以下の値はAndroidのみで機能します

• previous

iOSのみ

以下の値はiOSのみで機能します

• enter

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

---

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

---

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')

---

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'

---

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がタッチイベントを親コンポーネントに渡せるようにします。これにより、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

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

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

---

selectionColor

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

型
color

---

selectionHandleColor

Android

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

型
color

---

selectTextOnFocus

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

型
bool

---

showSoftInputOnFocus

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

型
bool

---

smartInsertDelete

iOS

falseの場合、iOSシステムは貼り付け操作後に余分なスペースを挿入せず、カットまたは削除操作後に1つまたは2つのスペースを削除しません。

型	デフォルト
bool	true

---

spellCheck

iOS

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

型
bool

---

submitBehavior

Returnキーが押されたとき、

単一行入力の場合

• '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にパスワードの最小要件を知らせることで、OSがそれらを満たすパスワードを生成できるようにすることができます。PasswordRulesの有効な文字列を作成するには、Apple Docsを参照してください。

ヒント

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

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

型
string

---

style

すべてのテキストスタイルがサポートされているわけではありません。サポートされていないスタイルの不完全なリストは以下の通りです。

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

Styles

型
Text

---

textBreakStrategy

Android

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

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

---

underlineColorAndroid

Android

TextInputの下線の色。

型
color

---

value

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

型
string

Methods

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