Skip to content

Latest commit

 

History

History
186 lines (124 loc) · 3.51 KB

input.md

File metadata and controls

186 lines (124 loc) · 3.51 KB
Raw
id title
input
Input
 

import Icon from 'react-native-vector-icons/FontAwesome';
import { Input } from 'react-native-elements';

<Input
  placeholder='BASIC INPUT'
/>

<Input
  placeholder='INPUT WITH 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:

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

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 none

labelString

styling for the label (optional)

Type Default
object none

leftIcon

displays an icon to the left (optional)

Type Default
React Native Component none

leftIconContainerStyle

styling for left Icon Component container

Type Default
View style (object) none

rightIcon

displays an icon to the right (optional)

Type Default
React Native 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