Radio Buttons are not working on ios

Question

I am trying to use Native-Base radio buttons. I've added some additional code to it for making radio buttons work. While it's still not working. 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 {
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>
   );
  }
}

How can this code be fixed? What's wrong?

Answer 1

Handle the onPress event in the ListItem

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 onPress={() => this.setState({ itemSelected: "itemOne" })}>
            <Text>Daily Stand Up</Text>
            <Right>
              <Radio selected={this.state.itemSelected == "itemOne"} />
            </Right>
          </ListItem>
          <ListItem onPress={() => this.setState({ itemSelected: "itemTwo" })}>
            <Text>Discussion with Client</Text>
            <Right>
              <Radio selected={this.state.itemSelected == "itemTwo"} />
            </Right>
          </ListItem>
        </Content>
      </Container>
    );
  }
}