Intergrating native-base styled components & redux-form.

DeviceForm.js

import React, { Component } from 'react';
import { Grid, Col, Row } from 'react-native-easy-grid';
import * as renders from './renderedComponents';
import { Field, reduxForm } from 'redux-form';
import normalizePhone from './normalizePhone';
import { createRouter, withNavigation } from '@exponent/ex-navigation';
import {
Container,
Header,
Title,
Text,
Content,
Button,
Icon,
List,
ListItem,
Picker
} from 'native-base';

import TabbedApp from './../../containers/TabbedApp';

const Router = createRouter(() => ({
    TabbedHome: TabbedApp,
})
);

@withNavigation
export default class DevicesForm extends Component {

    constructor(props) {
        super(props);

        this.goToHome = this.goToHome.bind(this);
        //this.submitThenClear = this.submitThenClear.bind(this);
    }

    componentDidMount() {

        //- Dispatching an action if this.props.route.params is a number, suppose to work with
        //- form editing
        
        function isObject(o) {
          return null != o && toString.call(o) === '[object Object]';
        }

        
        if(!isObject(this.props.route.params)) {
            this.props.getVehicle(this.props.route.params.number);

            console.log('Mouted!!!!!!!!! ' + this.props.route.params.number );
        }
    }

    goToHome() {
        this.props.navigator.push(Router.getRoute('TabbedHome'));
    }

    submitThenClear(data) {
        const { createRecord, reset } = this.props;
        return createRecord(data).then(() => {
            reset();
            // do other success stuff
            this.goToHome();
        });
    }

    render() {

        const { showPassword, handleSubmit, pristine, submitting, values, reset } = this.props;
        const Item = Picker.Item;

        return (
                <List>

                    <Field name="vehicleName" placeholder="Vehicle Nickname" component={renders.renderName} />

                    <Field name="vehicleNumber" placeholder="Vehicle Phone Number (071-253-2742)" component={renders.renderNumber} normalize={normalizePhone} />

                    <Field name="vehiclePassword" placeholder="Vehicle Password" component={renders.renderPassword} secureTextEntry={!showPassword} />

                    <Field name="vehiclePasswordTrigger" component={renders.renderCheckbox} label="Show / Hide Password" />

                    <Row>
                        <Col style={{width: 120, justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{color: 'grey'}}> Type of Vehicle </Text>
                        </Col>
                        <Col>
                            <Field name="vehicleType" mode="dropdown" style={{left: 10}} component={renders.renderSelect} >
                                <Item label="Car" value="Car" />
                                <Item label="Bus" value="Bus" />
                                <Item label="Bajaji" value="Bajaji" />
                                <Item label="Motorbike" value="Motobike" />
                                <Item label="Camel" value="Camel" />
                            </Field>
                        </Col>
                    </Row>

                    <ListItem>
                        <Row>
                            <Col>
                                <Button success block onPress={handleSubmit} disabled={pristine || submitting}>
                                    Save Vehicle
                                </Button>
                            </Col>

                            <Col style={{width: 5}}></Col>

                            <Col>
                                <Button success block onPress={reset} disabled={pristine || submitting}>
                                    Clear Fields
                                </Button>
                            </Col>
                        </Row>
                    </ListItem>

                </List>
        )
    }
}

renderedComponents.js

import React, { Component } from 'react';
import {
Text,
Icon,
Input,
List,
ListItem,
InputGroup,
TextInput,
CheckBox,
Picker
} from 'native-base';

const renderName = ({ input, placeholder, meta: { pristine, touched, error } }) => (
    <ListItem>
        <InputGroup iconRight>
            <Icon name="ios-person" />
            <Input placeholder={placeholder} {...input} />
        </InputGroup>
    </ListItem>
);

const renderNumber = ({ input, placeholder, meta: { asyncValidating, touched, error } }) => (
    <ListItem>
        <InputGroup iconRight>
            <Icon name="ios-phone-portrait" />
            <Input placeholder={placeholder} {...input} />
        </InputGroup>
    </ListItem>
);

const renderPassword = ({ input, placeholder, meta: {touched, error }, ...custom }) => (
    <ListItem>
        <InputGroup iconRight>
            <Icon name="ios-code-working" />
            <Input placeholder="Password" {...input} {...custom} />
        </InputGroup>
    </ListItem>
);

const renderCheckbox = ({ input, label, custom }) => (

    <ListItem>
        <CheckBox {...input} checked={input.value ? true : false} onPress={() => input.onChange(!input.value)} />
        <Text> {label} </Text>
    </ListItem>

);

const renderSelect = ({ input, label, children, ...custom }) => (

    <Picker {...input} selectedValue={input.value} onValueChange={(value, index) => input.onChange(value)} children={children} {...custom} />
);

export { renderName, renderNumber, renderPassword, renderCheckbox, renderSelect, };

Note

The package.json file dependencies of this gist.

  "dependencies": {
    "@exponent/ex-navigation": "^2.2.1",
    "babel-preset-react-native-stage-0": "^1.0.1",
    "native-base": "^0.5.15",
    "react": "^15.4.1",
    "react-if": "^2.1.0",
    "react-native": "^0.38.1",
    "react-native-code-push": "^1.16.1-beta",
    "react-native-easy-grid": "^0.1.7",
    "react-native-image-picker": "^0.23.0",
    "react-native-linear-gradient": "^1.5.15",
    "react-native-scrollable-tab-view": "^0.6.0",
    "react-native-side-menu": "^0.20.1",
    "react-native-sms-android": "^0.4.1",
    "react-native-toast": "^1.0.1",
    "react-redux": "^4.4.6",
    "realm": "^0.15.0",
    "redux": "^3.6.0",
    "redux-actions": "^1.2.0",
    "redux-form": "^6.3.2",
    "redux-logger": "^2.7.4",
    "redux-observable": "^0.12.2",
    "redux-promise-middleware": "^4.2.0",
    "redux-thunk": "^2.1.0",
    "rx": "^4.1.0",
    "rxjs": "^5.0.1"
  }