react-native-clean-form

by esbenp

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

464 Stars 84 Forks Last release: Not found MIT License 85 Commits 12 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react-native-clean-form

npm Dependency Status devDependency Status

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.

















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 => (


Save )

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 (

Save ) }

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.