    import { FormLabel, FormInput } from 'react-native-elements'

    <FormLabel>Name</FormLabel>
    <FormInput onChangeText={someFunction}/>
    <FormValidationMessage>Error message</FormValidationMessage>

####
FormValidationMessage example

#####
The FormValidationMessage component is just a styled text. You have to implement for now the logic of errors. Basically, if you have an error, display the FormValidationMesage, if not, display nothing.

    <FormValidationMessage>{'This field is required'}</FormValidationMessage>

###
FormInput Props

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

- `containerStyle`
- `inputStyle`
- `textInputRef`
- `containerRef`
- `shake`

###
`containerStyle`

TextInput container styling (optional)

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

###
`inputStyle`

TextInput styling (optional)

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

###
`textInputRef`

get ref of TextInput

Type | Default
--- | ---
ref | none

###
`containerRef`

get ref of TextInput container

Type | Default
--- | ---
ref | none

###
`shake`

shake the textinput if not a falsy value and different from the previous value

Type | Default
--- | ---
all comparable types (`===`) | none

###
FormInput Methods

name | description
--- | ---
shake | shake the textinput, eg `this.refs.someInputRef.shake()`
focus | call focus on the textinput (example)
blur | call blur on the textinput (example)
clearText | call clear on the textinput (example)

###
FormLabel Props

- `containerStyle`
- `labelStyle`
- `fontFamily`

###
`containerStyle`

additional label container style (optional)

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

###
`labelStyle`

additional label styling (optional)

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

###
`fontFamily`

specify different font family

Type | Default
--- | ---
string | System font bold (iOS), Sans Serif Bold (android)

###
FormValidationMessage Props

- `containerStyle`
- `labelStyle`
- `fontFamily`

###
`containerStyle`

additional label container style (optional)

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

###
`labelStyle`

additional label styling (optional)

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

###
`fontFamily`

specify different font family

Type | Default
--- | ---
string | System font bold (iOS), Sans Serif Bold (android)

##
Calling methods on FormInput

Store a reference to the FormInput in your component by using the ref prop provided by React (see docs):

    <FormInput
      ref={input => this.input = input}
      ...
    />

You can then access FormInput methods like so:

    this.input.focus();
    this.input.blur();
    this.input.clearText();
    this.refs.forminput.refs.email

####
FormInput shake example

#####
Using ref

    errorHandler() {
      if (this.state.error) {
        this.formInput.shake()
      }
    }

    <TextInput
      ref={ref => this.formInput = ref}
    />

#####
Using props

Simple example

    <TextInput
      shake={!this.state.error ? false : true}
      ...props
    />

Advanced example

If you want to shake the input each time an error occurs, you can compare objects. Each time an error occurs, it'll create a new object and trigger shake.

      errorHandler(code, message) {
        this.setState({
          error: !code ? null :
            {
              code,
              message,
            }
        })
      }

      <TextInput
        shake={this.state.error}
        ...props
      />

With this system, you can trigger shakes consecutively. Of course, if shake is `null` or `false` or `undefined`, etc... (falsy values), it'll not trigger the shake.