Input

Usage

Import

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

Theme Key

Input

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

Playground

Loading...