Awesome

react-native-clean-form

Easy react-native forms using bootstrap-like syntax with redux-form+immutablejs integration. Styled using styled-components

Big kudos to Artyom Khamitov

The look of the form was inspired by this shot by Artyom Khamitov. Check out his profile on Dribbble.

Form elements with syntax inspired by Bootstrap
Styled using styled-components. Easily extendible.
Integrated with redux-form
Supports immutable.js state

Installation

Run npm install --save react-native-clean-form

The form uses react-native-vector-icons so it is important the fonts are linked by using react-native link or one of the other options available.

Example

I have written an article on my blog about React Native and redux-form

For a complete example check out the example folder

Usage

import {
  ActionsContainer,
  Button,
  FieldsContainer,
  Fieldset,
  Form,
  FormGroup,
  Input,
  Label,
  Switch
} from 'react-native-clean-form'

const FormView = props => (
  <Form>
    <FieldsContainer>
      <Fieldset label="Contact details">
        <FormGroup>
          <Label>First name</Label>
          <Input placeholder="Esben" onChangeText={this.onFirstNameChange} />
        </FormGroup>
        <FormGroup>
          <Label>Email</Label>
          <Input placeholder="esbenspetersen@gmail.com" onChangeText={this.onEmailChange} />
        </FormGroup>
      </Fieldset>
      <Fieldset label="Password" last>
        <FormGroup>
          <Label>Password</Label>
          <Input placeholder="Enter a password" onChangeText={this.onPasswordChange} />
        </FormGroup>
        <FormGroup>
          <Label>Repeat password</Label>
          <Input placeholder="Repeat your password" onChangeText={this.onRepeatPasswordChange} />
        </FormGroup>
        <FormGroup border={false}>
          <Label>Save my password</Label>
          <Switch onValueChange={this.toggleSaveMyPassword} />
        </FormGroup>     
      </Fieldset>
    </FieldsContainer>
    <ActionsContainer>
      <Button icon="md-checkmark" iconPlacement="right" onPress={this.save}>Save</Button>
    </ActionsContainer>
  </Form>
)

Usage with redux-form

import React from 'react'
import { reduxForm } from 'redux-form'
import {
  ActionsContainer,
  Button,
  FieldsContainer,
  Fieldset,
  Form,
  FormGroup,
  Label,
} from 'react-native-clean-form'
import {
  Input,
  Switch
} from 'react-native-clean-form/redux-form'
import { View,Text } from 'react-native'

const onSubmit = (values, dispatch) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(values)
      resolve()
    }, 1500)
  })
}

const FormView = props => {
  const { handleSubmit, submitting } = this.props

  return (
    <Form>
      <FieldsContainer>
        <Fieldset label="Contact details">
          <Input name="first_name" label="First name" placeholder="John" />
          <Input name="email" label="Email" placeholder="something@domain.com" />
        </Fieldset>
        <Fieldset label="Shipping details" last>
          <Input name="password" label="Address" placeholder="Hejrevej 33" />
          <Input name="password_repeat" label="City" placeholder="Copenhagen" />
          <Switch label="Save my details" border={false} name="save_details" />
        </Fieldset>
      </FieldsContainer>
      <ActionsContainer>
        <Button icon="md-checkmark" iconPlacement="right" onPress={handleSubmit(onSubmit)} submitting={submitting}>Save</Button>
      </ActionsContainer>
    </Form>
  )
}

export default reduxForm({
  form: 'Form'
})(FormView)

Usage with redux-form and Immutable.js

To make it work with Immutable.js import Input, Select, and Switch from react-native-clean-form/redux-form-immutable instead of react-native-clean-form/redux-form. Also, check out the included example

Validation

If integrating with redux-form validation is supported right out of the box. Just add a validation key to reduxForm your normally would.

If not using redux-form, there is an error prop on FormGroup which will display the error if used.

Async feedback

The Button component has a submitting prop. If true, a spinner will be displayed.

Run the example

Clone the repo first.

git clone https://github.com/esbenp/react-native-clean-form && cd react-native-clean-form

Install dependencies.

cd example
npm install

Run the simulator.

react-native run-ios