Forms
import { FormLabel, FormInput } from 'react-native-elements'
<FormLabel>Name</FormLabel>
<FormInput onChangeText={someFunction}/>
<FormValidationMessage>Error message</FormValidationMessage>
FormValidationMessage example
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.
The<FormValidationMessage>{'This field is required'}</FormValidationMessage>
FormInput Props
all native TextInput props that come with a standard React Native TextInput element, along with the following:
This component inheritscontainerStyle
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.