Radio buttons are not working in Native-Base

Question

I am using Native-Base. I need to use radio buttons, but they don't work. When you click nothing happens. Here is the code.

import React, { Component } from 'react';
import { Container, Header, Content, ListItem, Text, Radio, Right } from 'native-base';
export default class RadioButtonExample extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <ListItem>
            <Text>Daily Stand Up</Text>
            <Right>
              <Radio selected={false} />
            </Right>
          </ListItem>
          <ListItem>
            <Text>Discussion with Client</Text>
            <Right>
              <Radio selected={true} />
            </Right>
          </ListItem>
        </Content>
      </Container>
    );
  }
}

How can I make it work? Please don't send different libraries which are containing just radio button functionality. I already checked different radio button libraries. Just need to add something to this code for making it work.

Answer 1

I've adapted the RadioGroup to redux-form, this is the code with horizontal radio layout:

import React from 'react';
import { Radio, View, Text, Label } from 'native-base';
import { StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import { Field } from 'redux-form';
import { required } from './validaciones';

const RadioGroup = ({ label, name, options }) => (
  <View style={styles.container}>
    {!!label && <Label>{label}</Label>}
    <View style={styles.radioContainar}>
      <Field
        validate={[required]}
        component={({ input, options }) => options.map(option => (
          <View key={option.id} style={styles.radio}>
            <Radio
              id={option.id}
              type="radio"
              {...input}
              value={option.value}
              onPress={() => input.onChange(option.value)}
              selected={option.value === input.value}
            />
            <Text onPress={() => input.onChange(option.value)} style={styles.label}>
              {option.label}
            </Text>
          </View>
        ))
        }
        name={name}
        options={options}
      />
    </View>
  </View>
);

RadioGroup.propTypes = {
  options: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      label: PropTypes.string.isRequired,
      value: PropTypes.string.isRequired
    })
  ),
  label: PropTypes.string,
  name: PropTypes.string.isRequired
};

const styles = StyleSheet.create({
  container: {
    marginTop: 14,
    marginBottom: 7
  },
  radioContainar: {
    marginTop: 7,
    flexDirection: 'row',
    alignSelf: 'flex-start'
  },
  label: {
    marginLeft: 3
  },
  radio: {
    marginRight: 14,
    flexDirection: 'row',
    alignSelf: 'flex-start'
  }
});

export default RadioGroup;

Usage:

<RadioGroup
  label="Sexo"
  name="sexo"
  options={[
    {
      id: 'gender-male',
      label: 'Hombre',
      value: 'HOMBRE'
    },
    {
      id: 'gender-female',
      label: 'Mujer',
      value: 'MUJER'
    }
  ]}
/>

Answer 2

The onPress property must be on the ListItem node. I managed to make it work by doing this:

                <ListItem
                    selected={this.state.registerForm.type == 'item1'}
                    onPress={() => this._handleRegisterFormChanges('item1', 'type')}
                >
                    <Left>
                        <View style={{ flexDirection: 'column' }}>
                            <Text style={{ alignSelf: 'flex-start' }}>Radio text 1</Text>
                        </View>
                    </Left>
                    <Right>
                        <Radio
                            selected={this.state.registerForm.type == 'item1'}
                            color={Colors.tintColor}
                            selectedColor={Colors.tintColor}
                        />
                    </Right>
                </ListItem>
                <ListItem
                    selected={this.state.registerForm.type == 'item2'}
                    onPress={() => this._handleRegisterFormChanges('item2', 'type')}
                >
                    <Left>
                        <View >
                            <Text style={{ alignSelf: 'flex-start' }}>Radio text 2</Text>
                        </View>
                    </Left>
                    <Right>
                        <Radio
                            selected={this.state.registerForm.type == 'item2'}
                            color={Colors.tintColor}
                            selectedColor={Colors.tintColor}
                        />
                    </Right>
                </ListItem>

Answer 3

The simplest an easy way is, first create an array of radio items.

const radioItem = [
    { label: 'Female', value: 'female' },
    { label: 'Male', value: 'male' }
];

Then inside your content do it like this.

<Content>
   <Text>Select your choice</Text>
   {
     radioItem.map((data, key) => {
         return (
                  <ListItem key={key}>

                     <Left>
                         <Text>{data.label}</Text>
                     </Left>
                     <Right>
                         <Radio
                            onPress={()=> this.setState({radioValue:data.value})}
                            color={"gray"}
                            selectedColor={"gray"}
                            selected={data.value === this.state.radioValue}
                          />
                     </Right>
                  </ListItem>
                 )
       })
   }
</Content>

Let's understand this:

First you need to understand about the Radio component of native base it use selected props to check Boolean value true or false and accordingly it shows the active radio.

So, we are using onPress action to get the current value and we are storing it to the state and our selected props matches for the value and returns true or false. So we can see by default our value will be false for both the radio item as we don't have the state value.

You can also set the default selected radio by defining the state value inside the constructor

Answer 4

you can add onPress as it replacement of TouchableOpacity it will accept it's props.

import React, { Component } from 'react';
import { Container, Header, Content, ListItem, Text, Radio, Right } from 'native-base';
export default class RadioButtonExample extends Component {
constructor() {
  super();
  this.state = {
   itemSelected: 'itemOne',
 }
}
render() {
 return (
    <Container>
      <Header />
      <Content>
        <ListItem>
          <Text>Daily Stand Up</Text>
          <Right>
            <Radio onPress={() => this.setState({ itemSelected: 'itemOne' })}
              selected={this.state.itemSelected == 'itemOne'}
            />
          </Right>
        </ListItem>
        <ListItem>
          <Text>Discussion with Client</Text>
          <Right>
            <Radio onPress={() => this.setState({ itemSelected: 'itemTwo' })}
                  selected={this.state.itemSelected == 'itemTwo' }
                />
          </Right>
        </ListItem>
      </Content>
    </Container>
   );
  }
}