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.

Solution 1

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

Solution 2

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