TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. This will be called with nativeEvent: selection: start, end . But if it doesn't the form does not break. It can also be helpful in establishing a brand. Color is a simple, subtle way to convey meaning to users. Type Required object: start: number,end: number No selectionColor The highlight and cursor color of the text input. To achieve the same effect, you can wrap your TextInput in a View: import React, Component from 'react'; import AppRegistry, View, TextInput from 'react-native'; class UselessTextInput extends Component render return ; export default class UselessTextInputMultiline extends Component { constructor props { super props ; this.
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 simplest 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 simple example: import React, Component from 'react'; import AppRegistry, TextInput from 'react-native'; export default class UselessTextInput extends Component{ constructor props { super props ; this. Additionally, border styles that apply to only one side of the element e. input placeholder color To achieve the same effect, you can wrap your TextInput in a View: import React, Component from 'react'; import AppRegistry, View, TextInput from 'react-native'; class UselessTextInput extends Component render return ; export default class UselessTextInputMultiline extends Component { constructor props { super props ; this. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which 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 input can change app's activity windowSoftInputMode param to adjustResize. This may cause issues with components that have position: 'absolute' while keyboard is active. To avoid this behavior either specify windowSoftInputMode in AndroidManifest. Type Required bool No autoCapitalize Can tell TextInput to automatically capitalize certain characters. This property is not supported by some keyboard types such as name-phone-pad. Type Required enum 'none', 'sentences', 'words', 'characters' No autoCorrect If false, disables auto-correct. The default value is true. Type Required input placeholder color No autoFocus If true, focuses the input on componentDidMount. The default value input placeholder color false. Type Required bool No blurOnSubmit If true, the text field will blur when submitted. The default value is true for single-line fields and false for input placeholder color 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. Input placeholder color Required bool No caretHidden If true, caret is hidden. The default value is false. Type Required bool No clearButtonMode 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. The default value is false. By default no data types are detected. You can provide one type or an array of many types. 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. When true, this feature is disabled and users will always edit the text directly inside of the text input. Type Required Platform bool No Android editable If false, text is not editable. The default value is true. Type Required bool No enablesReturnKeyAutomatically 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 Required Platform number No Android keyboardAppearance Determines the color of the keyboard. Type Required number No multiline If true, the text input can be multiple lines. The default value is false. Type Required bool No numberOfLines Sets 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 onBlur Callback that is called when the text input is blurred. Type Required function No onChange Callback that is called when the text input's text changes. Type Required function No onChangeText Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. Type Required function No onContentSizeChange Callback that is called when the text input's content size changes. This will be called with nativeEvent: contentSize: width, height . Only called for multiline text inputs. Type Required function No onEndEditing Callback that is called when text input ends. Type Required function No onFocus Callback that is called when the text input is focused. Type Required function No onKeyPress Callback 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. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs. Type Required function No onLayout Invoked on mount and layout changes with x, y, width, height. Type Required function No onScroll Invoked on content scroll with nativeEvent: contentOffset: x, y . May also contain other properties from ScrollEvent but on Android contentSize is not provided for performance reasons. Type Required function No onSelectionChange Callback that is called when the text input selection is changed. This will be called with nativeEvent: selection: start, end . Type Required function No onSubmitEditing Callback that is called when the text input's submit button is pressed. Type Required function No placeholder The string that will be rendered before text input has been entered. Type Required string No placeholderTextColor The text color of the placeholder string. Type Required No returnKeyLabel Sets the return key to the label. Use it instead of returnKeyType. Type Required Platform string No Android returnKeyType Determines how the return key should look. On Android you can also use returnKeyLabel. The default value is true. The default value is false. Type Required bool No selection The start and end of the text input's selection. Set start and end to the same value to position the cursor. Type Required object: start: number,end: number No selectionColor The highlight and cursor color of the text input. Type Required No selectionState Input placeholder color instance of DocumentSelectionState, this is some state that is responsible for maintaining selection information for a document. Type Required bool No spellCheck If false, disables spell-check style i. The default value is inherited from autoCorrect. To disable autofill, set input placeholder color to none. Type Required Platform enum 'simple', 'highQuality', 'balanced' No Android underlineColorAndroid The color of the TextInput underline. Type Required Platform No Android value The 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 input placeholder color this may cause flickering - one common cause is preventing edits by keeping value the same. Type Required string No Methods clear clear ; Removes all text from the TextInput.
