Version: 2.3.2

Input

Inputs allow users to enter text into a UI. They typically appear in forms and dialogs.

Input with placeholder
Placeholder
Input with Label and icons
Label with Icons

Usage

import Icon from 'react-native-vector-icons/FontAwesome';
import { Input } from 'react-native-elements';
<Input
placeholder='BASIC INPUT'
/>
<Input
placeholder='INPUT WITH ICON'
leftIcon={{ type: 'font-awesome', name: 'chevron-left' }}
/>
<Input
placeholder='INPUT WITH CUSTOM ICON'
leftIcon={
<Icon
name='user'
size={24}
color='black'
/>
}
/>
<Input
placeholder="Comment"
leftIcon={{ type: 'font-awesome', name: 'comment' }}
style={styles}
onChangeText={value => this.setState({ comment: value })}
/>
<Input
placeholder='INPUT WITH ERROR MESSAGE'
errorStyle={{ color: 'red' }}
errorMessage='ENTER A VALID ERROR HERE'
/>
<Input placeholder="Password" secureTextEntry={true} />

Props

This component inherits all native TextInput props that come with a standard React Native TextInput element, along with the following:


Reference

containerStyle

styling for view containing the label, the input and the error message

TypeDefault
View style (object)none

disabled

disables the input component

TypeDefault
booleanfalse

disabledInputStyle

disabled styles that will be passed to the style props of the React Native TextInput (optional)

TypeDefault
Text style (object)none

inputContainerStyle

styling for Input Component Container (optional)

TypeDefault
View style (object)none

errorMessage

adds error message (optional)

TypeDefault
stringnone

errorStyle

add styling to error message (optional)

TypeDefault
objectnone

errorProps

props to be passed to the React Native Text component used to display the error message (optional)

TypeDefault
{...Text props}none

inputStyle

style that will be passed to the style props of the React Native TextInput (optional)

TypeDefault
objectnone

label

add a label on top of the input (optional)

TypeDefault
string OR React element or componentnone

labelStyle

styling for the label (optional); You can only use this if label is a string

TypeDefault
objectnone

labelProps

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 (optional)

TypeDefault
{...Text props} OR passed component propsnone

leftIcon

displays an icon on the left (optional)

TypeDefault
{...Icon props}
OR
component
none

leftIconContainerStyle

styling for left Icon Component container

TypeDefault
View style (object)none

rightIcon

displays an icon on the right (optional)

TypeDefault
{...Icon props}
OR
component
none

rightIconContainerStyle

styling for right Icon Component container

TypeDefault
View style (object)none

renderErrorMessage

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.

TypeDefault
booleantrue

InputComponent

component that will be rendered in place of the React Native TextInput (optional)

TypeDefault
React Native ComponentTextInput

Styles explanation

Input with a label and an error messageStyles explanation 

Interaction methods

methoddescription
focusFocuses the Input
blurRemoves focus from the Input
clearClears the text in the Input
isFocusedReturns true or false if the Input is focused
setNativePropsSets props directly on the react native component
shakeShakes 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();