How to select a single radio button at a time in react native flatlist

Question

I am using react-native-radio-button to implement a flatlist with radio button as shown in the image.

[![enter image description here][1]][1]

But i am unable to select a single radio button at a time in flatlist.

Here is my code

import React from 'react';
import { StyleSheet, View, Text, FlatList, TouchableOpacity, Image, LayoutAnimation, UIManager, Platform } from 'react-native';
import RadioButton from 'react-native-radio-button';
import PHARMACY from './api/mockPharmacyList';
import { Colors, Fonts } from '../../styles';

interface IState {
    selected: number;
    selectedIndex: number;
    data: any;
    expanded: boolean;
    checked: boolean;
}


export class TransferToPharmacy extends React.Component<{}, IState> {
    constructor(props) {
        super(props);
        this.state = {
            data: PHARMACY,
            selected: 0,
            selectedIndex: 0,
            expanded: true,
            checked: false,
        };
        this.onPress = this.onPress.bind(this);
        this.renderItem = this.renderItem.bind(this);
        this.renderSeparator = this.renderSeparator.bind(this);
        this._keyExtractor = this._keyExtractor.bind(this);
        this.changeLayout = this.changeLayout.bind(this);
        this.onCheck = this.onCheck.bind(this);

        if (Platform.OS === 'android') {
            UIManager.setLayoutAnimationEnabledExperimental(true);
        }
    }

    changeLayout = () => {
        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
        this.setState({ expanded: false });
    }

    getInitialState() {
        return {
            value: 0,
        };
    }
    onPress(value) {
        this.setState({ selected: value });
    }

    _keyExtractor = (item, index) => item.id;

    onCheck = () => {
        const { checked } = this.state;
        if (checked === true) {
            this.setState({ checked: false  });
        } else {
            this.setState({ checked: true  });
        }
    }

    renderItem(data) {
        const { item } = data;
        return (
                <View style={styles.itemBlock}>

              <TouchableOpacity   >

                    <View style={styles.arrowIconStyle}>
                        <Text style={styles.pharmacyText}>{item.name}</Text>
                        <RadioButton
                            innerColor={Colors.darkBlue}
                            outerColor={Colors.lightGray}
                            animation={'bounceIn'}
                            isSelected={this.state.selectedIndex === 0}
                            onPress={this.onPress}
                        />
                    </View>
                    </TouchableOpacity>
                    <Text>{item.key1}</Text>

                 <View style={{ height: this.state.expanded === true ?  90 : 0, overflow: 'hidden' }}>

                        <View style={{ flexDirection: 'row', marginTop: 5, padding: 10 }}>
                             <Image style={[styles.itemImage, { width: 15, height: 15, margin: 1 }]} source={require('./images/map_pic_icon.png')} />
                             <Text style={styles.itemText}>{item.location}</Text>
                         </View>

                         <View style={{ flexDirection: 'row', marginTop: 5, padding: 10 }}>
                            <Image style={[styles.itemImage, { width: 15, height: 15, margin: 1 }]} source={require('./images/phone_icon.png')} />
                             <Text style={styles.itemText}>{item.phone}</Text>
                         </View>

                     </View>
                </View>
        );
    }

    renderSeparator() {
        return <View style={styles.separator} />;
    }
    render() {
        return (
            <View style={styles.container} >
                <Text style={styles.textStyle}>Transfer to Pharmacy</Text>

                <View style={styles.childViewStyle}>
                    <FlatList
                        keyExtractor={this._keyExtractor}
                        data={this.state.data}
                        renderItem={this.renderItem}
                        ItemSeparatorComponent={this.renderSeparator}
                    />
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    textStyle: {
        fontSize: 18,
        color: Colors.black,
        marginTop: 30,
        marginLeft: 20
    },
    childViewStyle: {
        margin: 20,
    },
    itemBlock: {
        paddingVertical: 15,
    },
    itemImage: {
        width: 50,
        height: 50,
        borderRadius: 25,
        margin: 10
    },
    itemText: {
        fontSize: 16,
        justifyContent: 'center',
        color: Colors.darkySkyBlue
    },
    itemName: {
        fontSize: 20,
        color: Colors.black,
    },
    separator: {
        borderRadius: 4,
        borderWidth: 1,
        borderColor: Colors.lightGray,
    },
    pharmacyText: {
        fontSize: 16,
        fontFamily: Fonts.bold,
        color: Colors.black

    },
    radioStyle: {
        marginTop: 10,
        marginRight: 50,
        justifyContent: 'space-between'
    },
    arrowIconStyle: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 10
        // flex: 1
    }
});

with this code i am not able to select the radio button

Please let me know where it is going wrong as i am unable to select radio button in the flatlist separately.

i have changed onPress() like this

onPress( index) {
        this.setState({  selected: index, });
    }

and in renderItem method i have changed it like this

const { item, index } = data;
 <RadioButton
                            innerColor={Colors.darkBlue}
                            outerColor={Colors.lightGray}
                            animation={'bounceIn'}
                            isSelected={this.state.selected === index}
                            onPress={() => this.onPress(index)}
                        />

Now the output is like this

Now the first radio button is selected but when i tried to select other radio buttons they are not getting selected.

Here is my mock data file which is used for Flatlist.

export const PHARMACY = [
    {
        key: 0,
        name: 'Plaza Pharmacy',
        type: 'Urgent Care Center - 4.01 mi',
        location: '3417 Gaston Avenue, Suite 195\n Dallas, TX 75202',
        phone: '469.764.7100',

    },

    {
        key: 1,
        name: 'Courtyard Pharmacy',
        type: 'Urgent Care Center - 4.09 mi',
        location: '5236 West University Drive, Suite 1900\n MCKINNEY, TX 75071',
        phone: '969.264.7190',
    },
    {
        key: 2,
        name: 'Outptaient Pharmacy at the Cancer Center',
        type: 'Urgent Care Center - 4.66 mi',
        location: '3800 Gaylord Parkway, Ste 110\n FRISCO, TX 75034',
        phone: '890.664.8130',
    },
    {
        key: 3,
        name: 'Carrolton Pharmacy',
        type: 'Urgent Care Center - 4.08 mi',
        location: '5236 West University Drive, Suite 1900\n MCKINNEY, TX 75071',
        phone: '969.264.7190',
    },
    {
        key: 4,
        name: 'Garland Pharmacy',
        type: 'Urgent Care Center - 22.11 mi',
        location: '3417 Gaston Avenue, Suite 195\n Dallas, TX 75202',
        phone: '469.764.7100',
    },
];

I am exporting this const PHARMACY and importing it in my class and set this to a state variable "data".

Answer 1

you can do something like this in renderItem

renderItem = ({item, index}) => {
 .....
<RadioButton
  innerColor={Colors.darkBlue}
  outerColor={Colors.lightGray}
  animation={'bounceIn'}
  isSelected={this.state.selectedIndex === index}
  onPress={() => {this.onPress(index)}}
/>
}

and replace onPress with

onPress = (index) => {
   this.setState({ selectedIndex: index });
 }

and update FlatList with extraData props as FlatList needs to be re-rendered as

<FlatList
   keyExtractor={this._keyExtractor}
   data={this.state.data}
   renderItem={this.renderItem}
   ItemSeparatorComponent={this.renderSeparator}
   extraData={this.state}
 />

You can refer in snack here

Answer 2

First, you need to get the index of the current item like so:

const { item, index } = data;

After you get the index of the current item you can then check if the current radio button is selected or not and for changing the radio button you need to pass the value of the current index to the onPress function.

<RadioButton
  innerColor={Colors.darkBlue}
  outerColor={Colors.lightGray}
  animation={'bounceIn'}
  isSelected={this.state.selected === index}
  onPress={() => this.onPress(index)}
/>