How to implement radio button in React Native
Solution 1
You can mimic a radio button really easily using just barebones RN. Here's one simple implementation which I use. Tweak size, colors etc. as you like. It looks like this (with a different tint, and some text). Add TouchableOpacity
on top to turn it into a button that does something.
function RadioButton(props) {
return (
<View style={[{
height: 24,
width: 24,
borderRadius: 12,
borderWidth: 2,
borderColor: '#000',
alignItems: 'center',
justifyContent: 'center',
}, props.style]}>
{
props.selected ?
<View style={{
height: 12,
width: 12,
borderRadius: 6,
backgroundColor: '#000',
}}/>
: null
}
</View>
);
}
Solution 2
This is another way of creating radioButtons (Source, thanks to php step by step channel)
Method 1
constructor(props) {
super(props);
this.state = {
radioBtnsData: ['Item1', 'Item2', 'Item3'],
checked: 0
}
}
import { View, TextInput, TouchableOpacity } from 'react-native';
{this.state.radioBtnsData.map((data, key) => {
return (
<View key={key}>
{this.state.checked == key ?
<TouchableOpacity style={styles.btn}>
<Image style={styles.img} source={require("./img/rb_selected.png")}/>
<Text>{data}</Text>
</TouchableOpacity>
:
<TouchableOpacity onPress={()=>{this.setState({checked: key})}} style={styles.btn}>
<Image style={styles.img} source={require("./img/rb_unselected.png")} />
<Text>{data}</Text>
</TouchableOpacity>
}
</View>
)
})}
const styles = StyleSheet.create({
img:{
height:20,
width: 20
},
btn:{
flexDirection: 'row'
}
});
Place below images in img folder
Method 2
Elaborated LaneRettig ex for new developers
Thanks to Lane Rettig
constructor(props){
super(props);
this.state = {
radioSelected: 1
}
}
radioClick(id) {
this.setState({
radioSelected: id
})
}
render() {
const products = [{
id: 1
},
{
id: 2
},
{
id: 3
}];
return (
products.map((val) => {
return (
<TouchableOpacity key={val.id} onPress={this.radioClick.bind(this, val.id)}>
<View style={{
height: 24,
width: 24,
borderRadius: 12,
borderWidth: 2,
borderColor: '#000',
alignItems: 'center',
justifyContent: 'center',
}}>
{
val.id == this.state.radioSelected ?
<View style={{
height: 12,
width: 12,
borderRadius: 6,
backgroundColor: '#000',
}} />
: null
}
</View>
</TouchableOpacity>
)
})
);
}
Solution 3
There is a react-native component called react-native-radio-buttons that may do some of what you need:
Solution 4
Here is my solution for radio button using functional components.
Note - I have used images for checked & unchecked radio icon
import React, {useState} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';
const Radio = () => {
const [checked, setChecked] = useState(0);
var gender = ['Male', 'Female'];
return (
<View>
<View style={styles.btn}>
{gender.map((gender, key) => {
return (
<View key={gender}>
{checked == key ? (
<TouchableOpacity style={styles.btn}>
<Image
style={styles.img}
source={require('../images/radio_Checked.jpg')}
/>
<Text>{gender}</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
onPress={() => {
setChecked(key);
}}
style={styles.btn}>
<Image
style={styles.img}
source={require('../images/radio_Unchecked.png')}
/>
<Text>{gender}</Text>
</TouchableOpacity>
)}
</View>
);
})}
</View>
{/* <Text>{gender[checked]}</Text> */}
</View>
);
};
const styles = StyleSheet.create({
radio: {
flexDirection: 'row',
},
img: {
height: 20,
width: 20,
marginHorizontal: 5,
},
btn: {
flexDirection: 'row',
alignItems: 'center',
},
});
export default Radio;
Solution 5
I use Checkbox
in react-native
for creating the radio button. Please refer below code.
constructor(props){
super(props);
this.state = {radioButton:'value1'};
}
render(){
return(
<View>
<CheckBox
title='value1'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={this.state.radioButton === 'value1'}
onPress={() => this.setState({radioButton: 'value1'})}
></CheckBox>
<CheckBox
title='value2'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={this.state.radioButton === 'value2'}
onPress={() => this.setState({radioButton: 'value2'})}
></CheckBox>
<CheckBox
title='value3'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={this.state.radioButton === 'value3'}
onPress={() => this.setState({radioButton: 'value3'})}
></CheckBox>
<CheckBox
title='value4'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={this.state.radioButton === 'value4'}
onPress={() => this.setState({radioButton: 'value4'})}
></CheckBox>
<CheckBox
title='value5'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={this.state.radioButton === 'value5'}
onPress={() => this.setState({radioButton: 'value5'})}
></CheckBox>
</View>
);
}
vasavi
Updated on December 15, 2020Comments
-
vasavi over 3 years
I am converting React code to React Native. So I need to implement radio buttons.
-
Axeva over 7 yearsExcellent approach. Married with the proper state variables, this can either be checkboxes or radio buttons.
-
Keshav Gera over 3 yearsWorking both in android as well ios fine
-
Federico Baù almost 3 years-> reactnative.dev/docs/checkbox is Removed in the last verions