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

##
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='INPUT WITH SHAKING EFFECT'
      shake={true}
    />

    <Input
      placeholder='INPUT WITH ERROR MESSAGE'
      errorStyle={{ color: 'red' }}
      errorMessage='ENTER A VALID ERROR HERE'
    />

##
Props

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

- `containerStyle`
- `inputContainerStyle`
- `errorMessage`
- `errorStyle`
- `errorProps`
- `inputComponent`
- `inputStyle`
- `label`
- `labelStyle`
- `labelProps`
- `leftIcon`
- `leftIconContainerStyle`
- `rightIcon`
- `rightIconContainerStyle`
- `shake`

##
Reference

###
`containerStyle`

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

Type | Default
--- | ---
View style (object) | none

###
`inputContainerStyle`

styling for Input Component Container (optional)

Type | Default
--- | ---
View style (object) | none

###
`errorMessage`

adds error message (optional)

Type | Default
--- | ---
string | none

###
`errorStyle`

add styling to error message (optional)

Type | Default
--- | ---
object | none

###
`errorProps`

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

Type | Default
--- | ---
{...Text props} | none

###
`inputComponent`

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

Type | Default
--- | ---
React Native Component | TextInput

###
`inputStyle`

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

Type | Default
--- | ---
object | none

###
`label`

add a label on top of the input (optional)

Type | Default
--- | ---
string OR React element or component | none

###
`labelStyle`

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

Type | Default
--- | ---
object | none

###
`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)

Type | Default
--- | ---
{...Text props} OR passed component props | none

###
`leftIcon`

displays an icon on the left (optional)

Type | Default
--- | ---
{...Icon props} OR component | none

###
`leftIconContainerStyle`

styling for left Icon Component container

Type | Default
--- | ---
View style (object) | none

###
`rightIcon`

displays an icon on the right (optional)

Type | Default
--- | ---
{...Icon props} OR component | none

###
`rightIconContainerStyle`

styling for right Icon Component container

Type | Default
--- | ---
View style (object) | none

###
`shake`

add shaking effect to input component (optional)

Type | Default
--- | ---
any | none

####
Styles explanation

Input with a label and an error message | Styles explanation
--- | ---

← Image ListItem →