# Redux Form Example Redux Form is a sample app made with [React Native](https://github.com/facebook/react-native), [Redux](https://github.com/reactjs/react-redux), and [Redux-Form](https://github.com/erikras/redux-form) and [NativeBase](https://nativebase.io/) as the main Libraries at work here.
This is a simple step-by-step tutorial to get familiar with basic concepts of [Redux](https://github.com/reactjs/react-redux) (used for state management), and [Redux-Form](https://github.com/erikras/redux-form). This simple App should get you familiar with these Libraries and their use case.
# Find Full code [here](https://github.com/GeekyAnts/native-base-example-redux-form) ![ReduxForm Gif](https://docs.nativebase.io/docs/assets/ReduxForm.gif)
## Aim We aim to create a single page application that uses [Redux-Form](https://github.com/erikras/redux-form) and has validation functionality. ## Installation 1. **SetUp React Native Project**
SetUp a React Native project. Refer [this](https://facebook.github.io/react-native/docs/getting-started.html) for more information about setting up a React Native project.

2. **Installing Libraries**
With a React Native project SetUp, We can now install all required Libraries as follows.

a. **Redux** and **react-redux**
In your terminal enter the following

npm install redux react-redux --save

b. **redux-form**

npm install --save redux-form

c. **NativeBase**

npm install native-base --save

**Configure all dependencies by running the following command**

react-native link

**Note:** You might have some problems setting up the project due to version conflicts, make sure you use same versions as mentioned below in the package.json By the end of Installation, your package.json file should look something like this.
![Redux-Form package](https://docs.nativebase.io/docs/assets/ReduxFormPackage.png)
## SetUp Create a **src** folder at root of your project. Create folders **components** **reducers** and one file **Application.js** for our App.
### Reducers Create a file **index.js** inside reducers folder. Paste the following code.
**Code src/reducers/index.js**

import {combineReducers} from 'redux';
import { reducer as formReducer } from 'redux-form';
const reducers = {
  form: formReducer
}
const allReducers= combineReducers(reducers);
export default allReducers;

### Component Create a file **SimpleForm.js** inside components folder.
**Code src/components/SimpleForm.js**

import React , { Component } from 'react';
import Expo from 'expo';
import { View } from 'react-native';
import { Container, Item, Input, Header, Body, Content, Title, Button, Text } from 'native-base';
import { Field,reduxForm } from 'redux-form';
const validate = values => {
  const error= {};
  error.email= '';
  error.name= '';
  var ema = values.email;
  var nm = values.name;
  if(values.email === undefined){
    ema = '';
  }
  if(values.name === undefined){
    nm = '';
  }
  if(ema.length < 8 && ema !== ''){
    error.email= 'too short';
  }
  if(!ema.includes('@') && ema !== ''){
    error.email= '@ not included';
  }
  if(nm.length > 8){
    error.name= 'max 8 characters';
  }
  return error;
};
class SimpleForm extends Component {
  constructor(props){
    super(props);
    this.state={
      isReady: false
    };
    this.renderInput = this.renderInput.bind(this);
  }
  async componentWillMount() {
      await Expo.Font.loadAsync({
        'Roboto': require('native-base/Fonts/Roboto.ttf'),
        'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
      });
      this.setState({isReady: true});
    }
  renderInput({ input, label, type, meta: { touched, error, warning } }){
    var hasError= false;
    if(error !== undefined){
      hasError= true;
    }
    return( 
      <Item error= {hasError}>
        <Input {...input}/>
        {hasError ? <Text>{error}</Text> : <Text />}
      </Item>
    )
  }
  render(){
     const { handleSubmit, reset } = this.props;
     if (!this.state.isReady) {
      return <Expo.AppLoading />;
    }
    return (
      <Container>
        <Header>
          <Body>
            <Title>Redux Form</Title>
          </Body>
        </Header>
        <Content padder>
          <Field name="email" component={this.renderInput} />
          <Field name="name" component={this.renderInput} />
          <Button block primary onPress= {reset}>
            <Text>Submit</Text>
          </Button>
        </Content>
      </Container>
    )
  }
}
export default reduxForm({
  form: 'test',
  validate
})(SimpleForm)

**Explained**
- We load fonts using loadAsync as defined in previous examples. - Note how we have added validate functionality in the end using reduxForm decorator. - Conditions added to validate are user defined. ### Application **Code src/Application.js**

import React , { Component } from 'react';
import allReducers from './reducers/index.js';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import SimpleForm from './components/SimpleForm.js';
import { Field, reduxForm } from 'redux-form';
const store = createStore(allReducers);
 export default class Application extends Component{
  render(){
    return(
      <Provider store= {store}>
        <SimpleForm />
      </Provider>
    )
  }
}

**Explained**
Here we import allReducers containing our formReducer and add it to our store. Next we simply pass our store to Provider component.
### Finishing Up Finally add the Application component in our App.js as follows
**Code App.js**

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Application from './src/Application.js';
import allReducers from './src/reducers/index.js';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import { TextInput, TouchableOpacity } from 'react-native';
const store = createStore(allReducers);
export default class App extends React.Component {
  render() {
    return (
      <Application />
    );
  }
}

All done. Our App must work now. It looks awesome(unicorn alert). Build and run for magic.