placeholderTextColorallowFontScalingautoCapitalizeautoCorrectautoFocusblurOnSubmitcaretHiddenclearButtonModeclearTextOnFocuscontextMenuHiddendataDetectorTypesdefaultValuedisableFullscreenUIeditableenablesReturnKeyAutomaticallyinlineImageLeftinlineImagePaddingkeyboardAppearancekeyboardTypemaxLengthmultilinenumberOfLinesonBluronChangeonChangeTextonContentSizeChangeonEndEditingonFocusonKeyPressonLayoutonScrollonSelectionChangeonSubmitEditingplaceholderautoCapitalizeplaceholderTextColorreturnKeyLabelreturnKeyTypesecureTextEntryselectTextOnFocusselectionselectionColorselectionStateselectTextOnFocusspellCheckstylevaluedisableFullscreenUIinlineImageLeftinlineImagePaddingnumberOfLinesreturnKeyLabeltextBreakStrategyunderlineColorAndroidclearButtonModeclearTextOnFocusdataDetectorTypesenablesReturnKeyAutomaticallykeyboardAppearanceonKeyPressselectionStatespellCheckvalueplaceholderTextColorThe text color of the placeholder string.
-| Type | Required |
|---|---|
| color | No |
allowFontScalingSpecifies whether fonts should scale to respect Text Size accessibility settings. The default is true.
autoCapitalizeCan tell TextInput to automatically capitalize certain characters.
characters: all characters.words: first letter of each word.sentences: first letter of each sentence (default).none: don't auto capitalize anything.| Type | Required |
|---|---|
| enum('none', 'sentences', 'words', 'characters') | No |
autoCorrectIf false, disables auto-correct. The default value is true.
clearButtonModeWhen the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component.
+| Type | Required | Platform |
|---|---|---|
| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS |
clearTextOnFocusIf true, clears the text field automatically when editing begins.
| Type | Required | Platform |
|---|---|---|
| bool | No | iOS |
contextMenuHiddenIf true, context menu is hidden. The default value is false.
dataDetectorTypesDetermines 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 | Required | Platform |
|---|---|---|
| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') | No | iOS |
defaultValueProvides an initial value that will change when the user starts typing. Useful for simple 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.
disableFullscreenUIWhen 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 | Required | Platform |
|---|---|---|
| bool | No | Android |
editableIf false, text is not editable. The default value is true.
enablesReturnKeyAutomaticallyIf 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 | Required | Platform |
|---|---|---|
| bool | No | iOS |
inlineImageLeftIf 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 | Required | Platform |
|---|---|---|
| string | No | Android |
inlineImagePaddingPadding between the inline image, if any, and the text input itself.
+| Type | Required | Platform |
|---|---|---|
| number | No | Android |
keyboardAppearanceDetermines the color of the keyboard.
+| Type | Required | Platform |
|---|---|---|
| enum('default', 'light', 'dark') | No | iOS |
keyboardTypeDetermines which keyboard to open, e.g.numeric.
The following values work across platforms:
@@ -300,6 +408,17 @@ AppRegistry.registerComponent(numberOfLinesSets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines.
| Type | Required | Platform |
|---|---|---|
| number | No | Android |
onBlurCallback that is called when the text input is blurred.
onKeyPressCallback that is called when a key is pressed. This will be called with { nativeEvent: { key: keyValue } } where keyValue is 'Enter' or 'Backspace' for respective keys and the typed-in character otherwise including ' ' for space. Fires before onChange callbacks.
| Type | Required | Platform |
|---|---|---|
| function | No | iOS |
onLayoutInvoked on mount and layout changes with {x, y, width, height}.
autoCapitalizeCan tell TextInput to automatically capitalize certain characters.
characters: all characters.words: first letter of each word.sentences: first letter of each sentence (default).none: don't auto capitalize anything.placeholderTextColorThe text color of the placeholder string.
| Type | Required |
|---|---|
| enum('none', 'sentences', 'words', 'characters') | No |
| color | No |
returnKeyLabelSets the return key to the label. Use it instead of returnKeyType.
| Type | Required | Platform |
|---|---|---|
| string | No | Android |
selectTextOnFocusIf true, all text will automatically be selected on focus.
| Type | Required |
|---|---|
| bool | No |
selectionThe start and end of the text input's selection. Set start and end to the same value to position the cursor.
selectionStateAn instance of DocumentSelectionState, this is some state that is responsible for maintaining selection information for a document.
Some functionality that can be performed with this instance is:
+blur()focus()update()++You can reference
+DocumentSelectionStateinvendor/document/selection/DocumentSelectionState.js
| Type | Required | Platform |
|---|---|---|
| DocumentSelectionState | No | iOS |
selectTextOnFocusIf true, all text will automatically be selected on focus.
| Type | Required |
|---|---|
| bool | No |
spellCheckIf false, disables spell-check style (i.e. red underlines). The default value is inherited from autoCorrect.
| Type | Required | Platform | |
|---|---|---|---|
| bool | No | iOS | --- |
styleNote that not all Text styles are supported, an incomplete list of what is not supported includes:
valueThe value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
| Type | Required |
|---|---|
| string | No |
disableFullscreenUIWhen 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 | Required | Platform |
|---|---|---|
| bool | No | Android |
inlineImageLeftIf 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 | Required | Platform |
|---|---|---|
| string | No | Android |
inlineImagePaddingPadding between the inline image, if any, and the text input itself.
-| Type | Required | Platform |
|---|---|---|
| number | No | Android |
numberOfLinesSets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines.
| Type | Required | Platform |
|---|---|---|
| number | No | Android |
returnKeyLabelSets the return key to the label. Use it instead of returnKeyType.
| Type | Required | Platform |
|---|---|---|
| string | No | Android |
textBreakStrategySet text break strategy on Android API Level 23+, possible values are simple, highQuality, balanced The default value is simple.
clearButtonModeWhen the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component.
+valueThe value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
| Type | Required | Platform |
|---|---|---|
| Type | Required | |
| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS |
clearTextOnFocusIf true, clears the text field automatically when editing begins.
| Type | Required | Platform |
|---|---|---|
| bool | No | iOS |
dataDetectorTypesDetermines 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 | Required | Platform |
|---|---|---|
| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') | No | iOS |
enablesReturnKeyAutomaticallyIf 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 | Required | Platform |
|---|---|---|
| bool | No | iOS |
keyboardAppearanceDetermines the color of the keyboard.
-| Type | Required | Platform |
|---|---|---|
| enum('default', 'light', 'dark') | No | iOS |
onKeyPressCallback that is called when a key is pressed. This will be called with { nativeEvent: { key: keyValue } } where keyValue is 'Enter' or 'Backspace' for respective keys and the typed-in character otherwise including ' ' for space. Fires before onChange callbacks.
| Type | Required | Platform |
|---|---|---|
| function | No | iOS |
selectionStateAn instance of DocumentSelectionState, this is some state that is responsible for maintaining selection information for a document.
Some functionality that can be performed with this instance is:
-blur()focus()update()--You can reference
-DocumentSelectionStateinvendor/document/selection/DocumentSelectionState.js
| Type | Required | Platform |
|---|---|---|
| DocumentSelectionState | No | iOS |
spellCheckIf false, disables spell-check style (i.e. red underlines). The default value is inherited from autoCorrect.
| Type | Required | Platform |
|---|---|---|
| bool | No | iOS |
| string | No |
isFocused()isFocused():
-Returns true if the input is currently focused; false otherwise.
clear()clear();
Removes all text from the TextInput.
isFocused()isFocused():
+Returns true if the input is currently focused; false otherwise.