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, };