Components for managing forms. Includes `FormLabel`, `FormInput` and `FormValidationMessage`.

##
Usage

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

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

##
FormLabel

Label above the FormInput. Can be used to describe the type of field (e.g Email).

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

Providers feedback to user about their input - usually an error message.

This component is only styled version of the Text component. You have to handle the error logic yourself. Basically, if you have an error, display the FormValidationMesage, if not, display nothing.

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

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

##
FormInput

Allows the user to input text.

> 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
blur | call blur on the textinput
clearText | call clear on the textinput

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 refs

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

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

####
Using props

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

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.