forms.md

id	forms
title	Forms

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.