Forms

Forms

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>
FormValidationMessage example

FormInput props

This component inherits all native TextInput props that come with a standard React Native TextInput element, along with the following:
prop default type description
containerStyle none object (style) TextInput container styling (optional)
inputStyle none object (style) TextInput styling (optional)
textInputRef none ref get ref of TextInput
containerRef none ref get ref of TextInput container
shake none all comparable types (===) shake the textinput if not a falsy value and different from the previous value

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

prop default type description
containerStyle none object (style) additional label container style (optional)
labelStyle none object (style) additional label styling (optional)
fontFamily System font bold (iOS), Sans Serif Bold (android) string specify different font family

FormValidationMessage props

prop default type description
containerStyle none object (style) additional label container style (optional)
labelStyle none object (style) additional label styling (optional)
fontFamily System font bold (iOS), Sans Serif Bold (android) string specify different font family

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.