├── App.js
├── App.test.js
├── README.md
├── app.json
├── package.json
├── src
    ├── Application.js
    ├── components
    │   └── SimpleForm.js
    └── reducers
    │   └── index.js
└── yarn.lock


/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { StyleSheet, Text, View } from 'react-native';
 3 | import Application from './src/Application.js';
 4 | import allReducers from './src/reducers/index.js';
 5 | import {createStore} from 'redux';
 6 | import {Provider} from 'react-redux';
 7 | import { TextInput, TouchableOpacity } from 'react-native';
 8 | const store = createStore(allReducers);
 9 | 
10 | export default class App extends React.Component {
11 |   render() {
12 |     return (
13 |     <Application />
14 |     );
15 |   }
16 | }
17 | 
18 | const styles = StyleSheet.create({
19 |   container: {
20 |     flex: 1,
21 |     backgroundColor: '#fff',
22 |     alignItems: 'center',
23 |     justifyContent: 'center',
24 |   },
25 | });
26 | 


--------------------------------------------------------------------------------
/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import App from './App';
 3 | 
 4 | import renderer from 'react-test-renderer';
 5 | 
 6 | it('renders without crashing', () => {
 7 |   const rendered = renderer.create(<App />).toJSON();
 8 |   expect(rendered).toBeTruthy();
 9 | });
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Redux Form Example
2 | 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.<br />
3 | 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. <br />
4 | # [Tutorial](http://docs.nativebase.io/docs/StickyHeaderExample.html) <br />
5 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 |   "expo": {
3 |     "sdkVersion": "15.0.0"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ReduxFormExample",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "devDependencies": {
 6 |     "react-native-scripts": "0.0.27",
 7 |     "jest-expo": "^0.3.0",
 8 |     "react-test-renderer": "~15.4.1"
 9 |   },
10 |   "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
11 |   "scripts": {
12 |     "start": "react-native-scripts start",
13 |     "eject": "react-native-scripts eject",
14 |     "android": "react-native-scripts android",
15 |     "ios": "react-native-scripts ios",
16 |     "test": "node node_modules/jest/bin/jest.js --watch"
17 |   },
18 |   "jest": {
19 |     "preset": "jest-expo"
20 |   },
21 |   "dependencies": {
22 |     "@expo/vector-icons": "^4.0.0",
23 |     "expo": "^15.1.0",
24 |     "native-base": "2.1.0",
25 |     "react": "~15.4.0",
26 |     "react-native": "0.42.0",
27 |     "react-redux": "^5.0.4",
28 |     "redux": "^3.6.0",
29 |     "redux-form": "^6.6.2"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/Application.js:
--------------------------------------------------------------------------------
 1 | import React , { Component } from 'react';
 2 | import allReducers from './reducers/index.js';
 3 | import {createStore} from 'redux';
 4 | import {Provider} from 'react-redux';
 5 | import SimpleForm from './components/SimpleForm.js';
 6 | import { Field, reduxForm } from 'redux-form';
 7 | const store = createStore(allReducers);
 8 | import { TextInput, View, Text, TouchableOpacity } from 'react-native';
 9 | 
10 |  export default class Application extends Component{
11 |   render(){
12 |     return(
13 |     <Provider store= {store}>
14 |     <SimpleForm />
15 |     </Provider>
16 |   )
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/components/SimpleForm.js:
--------------------------------------------------------------------------------
 1 | import React , { Component } from 'react';
 2 | import Expo from 'expo';
 3 | import { View } from 'react-native';
 4 | import { Container, Item, Input, Header, Body, Content, Title, Button, Text } from 'native-base';
 5 | import { Field,reduxForm } from 'redux-form';
 6 | const validate = values => {
 7 |   const error= {};
 8 |   error.email= '';
 9 |   error.name= '';
10 |   var ema = values.email;
11 |   var nm = values.name;
12 |   if(values.email === undefined){
13 |     ema = '';
14 |   }
15 |   if(values.name === undefined){
16 |     nm = '';
17 |   }
18 |   if(ema.length < 8 && ema !== ''){
19 |     error.email= 'too short';
20 |   }
21 |   if(!ema.includes('@') && ema !== ''){
22 |     error.email= '@ not included';
23 |   }
24 | 
25 |   if(nm.length > 8){
26 |     error.name= 'max 8 characters';
27 |   }
28 | return error;
29 | };
30 | class SimpleForm extends Component {
31 |   constructor(props){
32 |     super(props);
33 |     this.state={
34 |       isReady: false
35 |     };
36 |     this.renderInput = this.renderInput.bind(this);
37 |   }
38 |   async componentWillMount() {
39 |       await Expo.Font.loadAsync({
40 |         'Roboto': require('native-base/Fonts/Roboto.ttf'),
41 |         'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
42 |       });
43 |       this.setState({isReady: true});
44 |     }
45 |   renderInput({ input, label, type, meta: { touched, error, warning } }){
46 |     var hasError= false;
47 |     if(error !== undefined){
48 |       hasError= true;
49 |     }
50 |     return( <Item style= {{ margin: 10 }} error= {hasError}>
51 |                         <Input {...input}/>
52 |                         {hasError ? <Text>{error}</Text> : <Text />}
53 |                     </Item> )
54 |   }
55 |   render(){
56 |      const { handleSubmit, reset } = this.props;
57 |      if (!this.state.isReady) {
58 |       return <Expo.AppLoading />;
59 |     }
60 |   return (
61 |     <Container style= {{ backgroundColor: "#eafcf9"}}>
62 |     <Header>
63 |         <Body>
64 |           <Title>Redux Form</Title>
65 |         </Body>
66 |     </Header>
67 |     <Content padder>
68 |       <Field name="email" component={this.renderInput} />
69 |       <Field name="name" component={this.renderInput} />
70 |       <Button style= {{ margin: 10 }} block primary onPress= {reset}>
71 |       <Text>Submit</Text>
72 |       </Button>
73 |       </Content>
74 |     </Container>
75 |   )
76 | }
77 | }
78 | 
79 | 
80 | export default reduxForm({
81 |   form: 'test',
82 |   validate
83 | })(SimpleForm)
84 | 


--------------------------------------------------------------------------------
/src/reducers/index.js:
--------------------------------------------------------------------------------
1 | import {combineReducers} from 'redux';
2 | import { reducer as formReducer } from 'redux-form';
3 | const reducers = {
4 |   form: formReducer
5 | }
6 | 
7 | const allReducers= combineReducers(reducers);
8 | export default allReducers;
9 | 


--------------------------------------------------------------------------------