How to create a custom radio group

Question

i wan't to create a radio group in react native with native base components. i have made a radiobutton now i want to create a group. i wan't to connect it to redux to use it in my forms, i created it with state but now i don't know how to code to make it reusable to change different set of data in redux.

i made this with state and class component

constructor(props) {
    super(props);
    this.state = {
        data: [{label: 'گزینه اول', value: false}, {label: 'گزینه دوم', value: true}, {label: 'گزینه سوم', value: false}
            , {label: 'گزینه چهارم', value: false}, {label: 'گزینه پنچم', value: false}, {label: 'گزینه ششم', value: false}],
        lastCheckedIndex: 0,
    };
}

componentDidMount() {
    this.findCheckedFirst();
}

onRadioPress = (value, index) => {
    console.log(index + ' -  ' + this.state.lastCheckedIndex);
    if (index !== this.state.lastCheckedIndex) {
        const {data} = this.state;
        data[index].value = !value;
        data[this.state.lastCheckedIndex].value = false;
        this.setState({data, lastCheckedIndex: index});
    }
};

findCheckedFirst = () => {
    for (let i = 0; i < this.state.data.length; i++) {
        console.log(this.state.data[i].value);
        if (this.state.data[i].value === true) {
            this.setState({lastCheckedIndex: i});
        }
    }
};

render() {
    const {listDirection, textStyle, title} = this.props;
    const {_label, _container, _title} = styles;
    return (
        <View style={_title}>
            <Text>{title}</Text>
            <View style={[_container, listDirection]}>
                {this.state.data.map((item, index) =>
                    <CustomRadioBtn
                        key={index}
                        label={item.label}
                        textStyle={[_label, textStyle]}
                        onPress={() => this.onRadioPress(item.value, index)}
                        selected={item.value}
                    />
                )}
            </View>
        </View>
    )
}

}

                    <NewCustomRadioGroup
                        onPress={() => console.log('Working !!!!')}
                        data={genderGroup}
                        listDirection={{ flexDirection: 'row' }}
                        title={'جنسیت'}
                        onPress={() => this.props.signUpFormUpdate({prop: 'user_gender_value', value: !signUpData.user_gender_value})}
                    />

i want to put all the logic inside my component and just pass the data and onpress and let it do the rest

score 0 · Answer 1 · answered Jun 26 '19 at 12:32

0

react-native-simple-radio-button has simple and useful radio button component for React Native

answered Jun 26 '19 at 12:32

Vinil Prabhu

1,279
1
10
22

score -1 · Answer 2 · answered Jun 26 '19 at 11:11

i solved it this way:

    <NewCustomRadioGroup
                        data={genderGroup}
                        listDirection={{ flexDirection: 'row' }}
                        title={'جنسیت'}
                        onPress={(value) => this.props.signUpFormUpdate({prop: 'user_gender_value', value})}
                    />

onRadioPress = (value,index,onPress) => {
        if (index !== this.state.lastCheckedIndex) {
            const {data} = this.state;
            data[index].checked = !value;
            data[this.state.lastCheckedIndex].checked = false;
            this.setState({data,lastCheckedIndex: index});
            onPress(data[index].value);
        }
    };   


<CustomRadioBtn
                            onPress={() => this.onRadioPress(item.checked,index,onPress)}
                            key={index}
                            label={item.name}
                            textStyle={[_label, textStyle]}
                            selected={item.checked}
                        />

How to create a custom radio group

2 Answers2