Skip to main content
Version: 0.80

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}. Additionally, border styles that apply to only one side of the element (e.g., borderBottomColor, borderLeftWidth, etc.) will not be applied if multiline=true. To achieve the same effect, you can wrap your TextInput in a View:

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.

TypeDefault
boolfalse

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