Input

Import

import { Input } from "@rneui/themed";

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

Playground

Loading...