Use radio button with React Native & Native Base

Hi, I want to use Redux Form with React Native and Native Base but I’m having trouble with rendering a radio button in my app and I was hoping that someone can guide me into right direction for it.

renderRadio({ input, type, options, meta: { touched, error } }) {
    const hasError = touched && error;
    return (
      <Form>
        <Grid>
          <Row>
            {options.map(o => <Item key={o.value}>
              <FontAwesome name={o.value === "M" ? "male" : "female"} size={25}/>
              <Label>{o.title}</Label>
              <Input {...input} type={type} value={o.value} checked={o.value === input.value}/>
              {hasError && <Text>{error}</Text>}
            </Item>)}
          </Row>
        </Grid>
      </Form>
    );
  }

render() {
    const { handleSubmit, fields: { email, password, passwordConfirm, gender } } = this.props;
    return (
      <Container style={styles.container}>
        <Content>
          <Form>
            <Field name="email" component={this.renderField} label="Email"/>
            <Field name="password" component={this.renderField} label="Password"/>
            <Field name="passwordConfirm" component={this.renderField} label="Password Confirm"/>
            <Field name="gender" type="radio" component={this.renderRadio} options={[
                {title: 'Male', value: "M"},
                {title: 'Female', value: "F"}
              ]}/>
            {this.renderAlert()}
            <Button
              style={styles.button} block
              action="submit"
              onPress={handleSubmit(this.handleFormSubmit.bind(this))}
            >
              <Text>Signup</Text>
            </Button>
          </Form>
        </Content>
      </Container>
    );
  }

In my code, I do not see any type of radio button (neither any check sign) and get my input value from renderRadio method as undefined.

Can anyone please help me with this?

[sophieews]

I’m not sure if this helps with the radio button but I got the Native Base checkbox working using

const renderCheckBox = ({ input, checked, label, meta: {touched, error}, children, ...custom }) => (
    <CheckBox
        checked={input.value}
        onPress={() => {
            input.value ? input.value = false: input.value = true;
            input.onChange(input.value)
        }}
        {...custom}
    />
);

[gustavohenke]

Hi @ckim16, this is a tricky one. See #2292 why.

When you use a <Field type="radio" />, Redux Form requires that you set value too. So you are basically not allowed to have a radio group this way; either remove the type or spread the radios in the component that will render them.

Example: https://codesandbox.io/s/EkggLy6m