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 |
---|---|---|---|
InputComponent | ComponentType<{}> or ForwardRefExoticComponent<any> | ||
containerStyle | View Style | ||
disabled | boolean | ||
disabledInputStyle | Text Style | ||
errorMessage | string | ||
errorProps | object | ||
errorStyle | Text Style | ||
inputContainerStyle | View Style | ||
inputStyle | Text Style | ||
label | ReactNode | ||
labelProps | object | ||
labelStyle | Text Style | ||
leftIcon | IconNode | ||
leftIconContainerStyle | View Style | ||
renderErrorMessage | boolean | ||
rightIcon | IconNode | ||
rightIconContainerStyle | View Style | ||
shake | Function |