How can I get this effect in react native? - react-native

Question

The radio button must be pair.
How can I make these 4 radio button in one group?

Answer 1

Hey Jin youcheng
You can use the react-native-radio-buttons-group package to implement the radio button group.
Have a look here:
import RadioGroup from 'react-native-radio-buttons-group';
export default class App extends Component {
state = {
data: [
{
label: 'Default value is same as label',
},
{
label: 'Value is different',
value: "I'm not same as label",
},
{
label: 'Color',
color: 'green',
},
{
disabled: true,
label: 'Disabled',
},
{
label: 'Size',
size: 32,
},
],
};
// update state
onPress = data => this.setState({ data });
render() {
let selectedButton = this.state.data.find(e => e.selected == true);
selectedButton = selectedButton ? selectedButton.value : this.state.data[0].label;
return (
<View style={styles.container}>
<Text style={styles.valueText}>
Value = {selectedButton}
</Text>
<RadioGroup radioButtons={this.state.data} onPress={this.onPress} />
</View>
);
}
}
Or something like this
https://github.com/moschan/react-native-simple-radio-button
Hope this will work for you :)
Thanks

Answer 2

If you want to do it without any third party library you can do it by making the layout and using Images of Radio Buttons(one for Selected and one for unselected) inside TouchableOpacity. You can take a variables for button and set them false for initial state. Now once you perform onPress of that particular Radio Button you can set that true. Now you can render Selected Radio Button by using Image source property. Here is the code where I have given background color to Image view as I don't have radio buttons. I also commented the source prop there which you can uncomment and pass the location of the radio buttons according to your condition.
<View style={{height: 200, marginTop:50, width: 220, borderColor: '#000000', borderWidth: 2, alignSelf: 'center'}}>
<View style={{flexDirection:'row', marginTop: 30}} >
<View style={{flexDirection:'row-reverse', width: '50%', height: 50, alignItems: 'center'}}>
<Text style={{marginRight: 5}}>Apple</Text>
<TouchableOpacity
// onPress = {() => this.selectRadioBtn}
>
<Image style={{height: 24, width: 24, backgroundColor: 'steelblue', marginRight: 5}}
// source={require('your_asset_url_her')}
/>
</TouchableOpacity>
</View>
<View style={{flexDirection:'row', width: '50%', height: 50, alignItems: 'center', marginLeft: 5}}>
<TouchableOpacity
// onPress = {() => this.selectRadioBtn}
>
<Image style={{height: 24, width: 24, backgroundColor: 'steelblue', marginRight: 5}}
// source={require('your_asset_url_her')}
/>
</TouchableOpacity>
<Text style={{marginRight: 5}}>Apple</Text>
</View>
</View>
<View style={{flexDirection:'row'}} >
<View style={{flexDirection:'row-reverse', width: '50%', height: 50, alignItems: 'center'}}>
<Text style={{marginRight: 5}}>Apple</Text>
<TouchableOpacity
// onPress = {() => this.selectRadioBtn}
>
<Image style={{height: 24, width: 24, backgroundColor: 'steelblue', marginRight: 5}}
// source={require('your_asset_url_her')}
/>
</TouchableOpacity>
</View>
<View style={{flexDirection:'row', width: '50%', height: 50, alignItems: 'center', marginLeft: 5}}>
<TouchableOpacity
// onPress = {() => this.selectRadioBtn}
>
<Image style={{height: 24, width: 24, backgroundColor: 'steelblue', marginRight: 5}}
// source={require('your_asset_url_her')}
/>
</TouchableOpacity>
<Text style={{marginRight: 5}}>Apple</Text>
</View>
</View>
<TouchableOpacity style={{height: 30, alignSelf: 'center', marginTop: 10, borderColor: '#000000', borderWidth: 2, justifyContent: 'center', alignItems: 'center'}}>
<Text style={{width: 80, alignSelf: 'center', textAlign: 'center'}}>OK</Text>
</TouchableOpacity>
</View>
Please let me know if any clarification required. Thanks :)