Skip to content

Latest commit

 

History

History
241 lines (162 loc) · 4.94 KB

forms.md

File metadata and controls

241 lines (162 loc) · 4.94 KB
id title
forms
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:

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

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

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.