TextInput

A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.

The most basic use case is to plop down a TextInput and subscribe to the onChangeText events to read the user input. There are also other events, such as onSubmitEditing and onFocus that can be subscribed to. A minimal example:

Two methods exposed via the native element are .focus() and .blur() that will focus or blur the TextInput programmatically.

Note that some props are only available with multiline={true/false}:

TextInput has a border at the bottom of its view by default. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this are to either not set height explicitly, in which case the system will take care of displaying the border in the correct position, or to not display the border by setting underlineColorAndroid to transparent.

Note that on Android performing text selection in an input can change the app's activity windowSoftInputMode param to adjustResize. This may cause issues with components that have position: 'absolute' while the keyboard is active. To avoid this behavior either specify windowSoftInputMode in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.

---

Reference

Props

View Props

Inherits View Props.

---

allowFontScaling

Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true.

Type
bool

---

autoCapitalize

Tells TextInput to automatically capitalize certain characters. This property is not supported by some keyboard types such as name-phone-pad.

• characters: all characters.
• words: first letter of each word.
• sentences: first letter of each sentence (default).
• none: don't auto capitalize anything.

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

---

autoComplete

Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content. To disable autocomplete, set autoComplete to off.

The following values work across platforms:

• 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

The following values work on iOS only:

• 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

The following values work on Android only:

• 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

Type

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

If false, disables auto-correct. The default value is true.

Type
bool

---

autoFocus

If true, focuses the input. The default value is false.

Type
bool

---

🗑️ blurOnSubmit

Deprecated

Note that submitBehavior now takes the place of blurOnSubmit and will override any behavior defined by blurOnSubmit. See submitBehavior.

If true, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting blurOnSubmit to true means that pressing return will blur the field and trigger the onSubmitEditing event instead of inserting a newline into the field.

Type
bool

---

caretHidden

If true, caret is hidden. The default value is false.

Type
bool

---

clearButtonMode

iOS

When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is never.

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

---

clearTextOnFocus

iOS

If true, clears the text field automatically when editing begins.

Type
bool

---

contextMenuHidden

If true, context menu is hidden. The default value is false.

Type
bool

---

dataDetectorTypes

iOS

Determines the types of data converted to clickable URLs in the text input. Only valid if multiline={true} and editable={false}. By default no data types are detected.

You can provide one type or an array of many types.

Possible values for dataDetectorTypes are:

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

Type
enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')

---

defaultValue

Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.

Type
string

---

disableKeyboardShortcuts

iOS

If true, the keyboard shortcuts (undo/redo and copy buttons) are disabled.

Type	Default
bool	false

---

cursorColor

Android

When provided it will set the color of the cursor (or "caret") in the component. Unlike the behavior of selectionColor the cursor color will be set independently from the color of the text selection box.

Type
color

---

disableFullscreenUI

Android

When false, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), the OS may choose to have the user edit the text inside of a full screen text input mode. When true, this feature is disabled and users will always edit the text directly inside of the text input. Defaults to false.

Type
bool

---

editable

If false, text is not editable. The default value is true.

Type
bool

---

enablesReturnKeyAutomatically

iOS

If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false.

Type
bool

---

enterKeyHint

Determines what text should be shown to the return key. Has precedence over the returnKeyType prop.

The following values work across platforms:

• done
• next
• search
• send
• go

Android Only

The following values work on Android only:

• previous

iOS Only

The following values work on iOS only:

• enter

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

---

importantForAutofill

Android

Tells the operating system whether the individual fields in your app should be included in a view structure for autofill purposes on Android API Level 26+. Possible values are auto, no, noExcludeDescendants, yes, and yesExcludeDescendants. The default value is auto.

• auto: Let the Android System use its heuristics to determine if the view is important for autofill.
• no: This view isn't important for autofill.
• noExcludeDescendants: This view and its children aren't important for autofill.
• yes: This view is important for autofill.
• yesExcludeDescendants: This view is important for autofill, but its children aren't important for autofill.

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

---

inlineImageLeft

Android

If defined, the provided image resource will be rendered on the left. The image resource must be inside /android/app/src/main/res/drawable and referenced like

<TextInput
 inlineImageLeft='search_icon'
/>

Type
string

---

inlineImagePadding

Android

Padding between the inline image, if any, and the text input itself.

Type
number

---

inputAccessoryViewID

iOS

An optional identifier which links a custom InputAccessoryView to this text input. The InputAccessoryView is rendered above the keyboard when this text input is focused.

Type
string

---

inputAccessoryViewButtonLabel

iOS

An optional label that overrides the default InputAccessoryView button label.

By default, the default button label is not localized. Use this property to provide a localized version.

Type