Easy react-native forms using bootstrap-like syntax with redux-form+immutablejs integration. Styled using styled-components
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
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.
I have written an article on my blog about React Native and redux-form
For a complete example check out the example folder
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>
)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)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
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.
The Button component has a submitting prop. If true, a spinner will be displayed.
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