ochui/Gender.js

## Gender.js
import React from 'react'
import { View } from 'native-base'
import { Field } from 'redux-form'

// Custom components
import { RadioButton } from '../Form'

export default class Gender extends React.Component {
  state = {
    selected: 'male'
  }

  onPress (selected) {
    this.setState({
      selected
    })
  }

  render () {
    return (
      <View>
        <Field
          name={'gender'}
          component={RadioButton}
          label='Male'
          val='male'
          icon='man'
          selected={this.state.selected}
          changeState={() => this.onPress('male')}
        />
        <Field
          name={'gender'}
          component={RadioButton}
          label='Female'
          val='female'
          icon='woman'
          selected={this.state.selected}
          changeState={() => this.onPress('female')}
        />
      </View>
    )
  }
}

## RadioButton.js
import React from 'react'
import { Body, Icon, Left, ListItem, Text, Radio, Right } from 'native-base'

export default class RadioButton extends React.Component {
  onPress (onChange, val, changeState) {
    onChange(val)
    changeState()
  }

  renderIcon (icon) {
    if (icon) {
      return (
        <Left>
          <Icon name={icon} />
        </Left>
      )
    }
  }

  render () {
    const { selected, val, icon, label, input, changeState } = this.props
    return (
      <ListItem icon>
        {this.renderIcon(icon)}
        <Body>
          <Text>
            {label}
          </Text>
        </Body>
        <Right>
          <Radio
            {...input}
            onPress={() => this.onPress(input.onChange, val, changeState)}
            selected={selected === val}
          />
        </Right>
      </ListItem>
    )
  }
}
	import React from 'react'
	import { View } from 'native-base'
	import { Field } from 'redux-form'

	// Custom components
	import { RadioButton } from '../Form'

	export default class Gender extends React.Component {
	state = {
	selected: 'male'
	}

	onPress (selected) {
	this.setState({
	selected
	})
	}

	render () {
	return (
	<View>
	<Field
	name={'gender'}
	component={RadioButton}
	label='Male'
	val='male'
	icon='man'
	selected={this.state.selected}
	changeState={() => this.onPress('male')}
	/>
	<Field
	name={'gender'}
	component={RadioButton}
	label='Female'
	val='female'
	icon='woman'
	selected={this.state.selected}
	changeState={() => this.onPress('female')}
	/>
	</View>
	)
	}
	}
	import React from 'react'
	import { Body, Icon, Left, ListItem, Text, Radio, Right } from 'native-base'

	export default class RadioButton extends React.Component {
	onPress (onChange, val, changeState) {
	onChange(val)
	changeState()
	}

	renderIcon (icon) {
	if (icon) {
	return (
	<Left>
	<Icon name={icon} />
	</Left>
	)
	}
	}

	render () {
	const { selected, val, icon, label, input, changeState } = this.props
	return (
	<ListItem icon>
	{this.renderIcon(icon)}
	<Body>
	<Text>
	{label}
	</Text>
	</Body>
	<Right>
	<Radio
	{...input}
	onPress={() => this.onPress(input.onChange, val, changeState)}
	selected={selected === val}
	/>
	</Right>
	</ListItem>
	)
	}
	}