Input
Usage
Interaction methods
method | description |
---|---|
focus | Focuses the Input |
blur | Removes focus from the Input |
clear | Clears the text in the Input |
isFocused | Returns true or false if the Input is focused |
setNativeProps | Sets props directly on the react native component |
shake | Shakes the input for error feedback |
Calling methods on Input
Store a reference to the Input in your component by using the ref prop provided by React (see docs):
const input = React.createRef();
<Input
ref={input}
...
/>
You can then use the Input methods like this:
input.current.focus();
input.current.blur();
input.current.clear();
input.current.isFocused();
input.current.setNativeProps({ value: 'hello' });
input.current.shake();
Props
note
Includes all React Native TextInput, View props.
Name | Type | Default | Description |
---|---|---|---|
ErrorComponent | React Component | component that will be rendered in place of the error message | |
InputComponent | React Component | component that will be rendered in place of the React Native TextInput | |
containerStyle | View Style | Style for container | |
disabled | boolean | disables the input component | |
disabledInputStyle | Text Style | disabled styles that will be passed to the style props of the React Native TextInput | |
errorMessage | string | Error message to be displayed under the input field | |
errorProps | object | props to be passed to the React Native Text component used to display the error message | |
errorStyle | Text Style | add styling to error message | |
inputContainerStyle | View Style | styling for Input Component Container | |
inputStyle | Text Style | Style for Input Component | |
label | ReactNode | add a label on top of the input | |
labelProps | object | props to be passed to the React Native Text component used to display the label or React Component used instead of simple string in label prop | |
labelStyle | Text Style | styling for the label; You can only use this if label is a string | |
leftIcon | IconNode | displays an icon on the left | |
leftIconContainerStyle | View Style | styling for left Icon Component container | |
renderErrorMessage | boolean | If the error message container should be rendered (take up vertical space). If false, when showing errorMessage, the layout will shift to add it at that time. | |
rightIcon | IconNode | displays an icon on the right | |
rightIconContainerStyle | View Style | styling for right Icon Component container | |
shake | Function | Shake method |