Create Radio Button Component in React Native
source: inspiration.design
We will display four radio buttons, each containing name value, on user-selected any value among the options will be printed on the frontend.
Radio buttons are an essential element of forms. They are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.
uxplanet.org
Let’s implement Radio Buttons to React Native app employing a simple way.
Initiate React Native App
Install React Native CLI on your machine.
npm install -g react-native-cli
Upgrade to latest React Native version.
react-native upgrade
Create react native project by using the below command.
react-native init rnradiobutton
Get into the project directory.
cd rnradiobutton
Simple React Native Radio Button Example
Let’s add the following code in the App.js file.
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import RadioButton from './components/RadioButton';
const PROP = [
{
key: 'samsung',
text: 'Samsung',
},
{
key: 'apple',
text: 'Apple',
},
{
key: 'motorola',
text: 'Motorola',
},
{
key: 'lenovo',
text: 'Lenovo',
},
];
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<RadioButton PROP={PROP} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
We have to import View, StyleSheet component from the ‘react-native’ package. These components allow initializing and styling the UI components in react native applications.
We have to define the values in an array of radio buttons. In the example, we created the PROP array and added mobile phone companies’ names.
We will create the Radio Button component in other template and imported in the App component.
To align vertically and horizontally centered, we used the display:flex
property along with alignItems and justifyContent.
Creating React Native Radio Button Component
Next, create a components folder at the root of your project and create RadioButton.js file in it.
Import View, TouchableOpacity, Text and StyleSheet components in RadioButton.js file
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
Define the RadioButton component and set the initial state of radio buttons.
export default class RadioButton extends Component {
state = {
value: null,
};
}
Inside the render() method define the radio button properties and state.
The map() method iterate over the radio button properties and extract the value of currently selected radio button using onPress() event..
render() {
const { PROP } = this.props;
const { value } = this.state;
return (
<View>
{PROP.map(res => {
return (
<View key={res.key} style={styles.container}>
<Text style={styles.radioText}>{res.text}</Text>
<TouchableOpacity
style={styles.radioCircle}
onPress={() => {
this.setState({
value: res.key,
});
}}>
{value === res.key && <View style={styles.selectedRb} />}
</TouchableOpacity>
</View>
);
})}
<Text> Selected: {this.state.value} </Text>
</View>
);
}
To style the radio button we are using the StyleSheet component along with CSS classes.
const styles = StyleSheet.create({
container: {
marginBottom: 35,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
},
radioText: {
marginRight: 35,
fontSize: 20,
color: '#000',
fontWeight: '700'
},
radioCircle: {
height: 30,
width: 30,
borderRadius: 100,
borderWidth: 2,
borderColor: '#3740ff',
alignItems: 'center',
justifyContent: 'center',
},
selectedRb: {
width: 15,
height: 15,
borderRadius: 50,
backgroundColor: '#3740ff',
},
result: {
marginTop: 20,
color: 'white',
fontWeight: '600',
backgroundColor: '#F3FBFE',
},
});
Here is the final RadioButton.js file that we have already imported in App.js to display the Radio Buttons.
import React, { Component } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
export default class RadioButton extends Component {
state = {
value: null,
};
render() {
const { PROP } = this.props;
const { value } = this.state;
return (
<View>
{PROP.map(res => {
return (
<View key={res.key} style={styles.container}>
<Text style={styles.radioText}>{res.text}</Text>
<TouchableOpacity
style={styles.radioCircle}
onPress={() => {
this.setState({
value: res.key,
});
}}>
{value === res.key && <View style={styles.selectedRb} />}
</TouchableOpacity>
</View>
);
})}
<Text> Selected: {this.state.value} </Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
marginBottom: 35,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
},
radioText: {
marginRight: 35,
fontSize: 20,
color: '#000',
fontWeight: '700'
},
radioCircle: {
height: 30,
width: 30,
borderRadius: 100,
borderWidth: 2,
borderColor: '#3740ff',
alignItems: 'center',
justifyContent: 'center',
},
selectedRb: {
width: 15,
height: 15,
borderRadius: 50,
backgroundColor: '#3740ff',
},
result: {
marginTop: 20,
color: 'white',
fontWeight: '600',
backgroundColor: '#F3FBFE',
},
});
Run either of the command to run the React Native app.
react-native run-android
react-native run-ios
Get the complete code of this project on this GitHub repository.