How to use Radio button in Flatlist - React native

Question

I want to create list with radio button using flatlist, but problem is i am able to click on radio button, its not geeting unchecked inside flatlist.

HERE IS MY CODE

 <FlatList
                    data={this.state.addressData}
                    horizontal={false}
                    extraData={this.state}
                    showsHorizontalScrollIndicator={false}
                    renderItem={({ item, index }) => (
                        <Card containerStyle={{ backgroundColor: GlobalColors.white, marginLeft: 0, marginRight: 0, marginTop: 0, marginBottom: 10, elevation: 2, padding: 0, borderColor: GlobalColors.white }}>

                            <View style={{ backgroundColor: GlobalColors.white, padding: 15 }}>


                                <View style={SelectAddressStyle.horizontalChangeAddress}>
                                   <Radio style={{marginRight : 10}} selected = {true}></Radio>
                                    <Text style={SelectAddressStyle.txtAddressUserName}>{""}</Text>
                                    <Text style={SelectAddressStyle.addressType}>{"HOME"}</Text>
                                </View>
                                <Text style={SelectAddressStyle.txtAddress}>
                                    {""}
                                </Text>



                            </View>
                        </Card>
                    )} />

Answer 1

You have:

<Radio style={{marginRight : 10}} selected = {true}></Radio>

So it can't become unchecked. Maybe try passing in a selected property.

Answer 2

Idk what package you are using for Radio (React native does not have radio by itself) but the problem is that according to this part of your code <Radio style={{marginRight : 10}} selected = {true}></Radio> , you're always passing true to your selected prop, so it won't change in any cases, until you declare a toggle function for it and store its current status in component state. example:

class Example extends component{
    state = {
    radioStatus: false
  }

  toggleRadio = () => {
    const {radioStatus} = this.state;
    this.setState({ radioStatus: !radioStatus})
  };

  render(){
    const {radioStatus} = this.state;
    return(
        <View>
          <Radio selected={radioStatus} onChange={this.toggleRadio} />
        </View>
    )
  }
}