6/27/23, 2:23 PM Create Radio Button Component in React Native
Home » React Native » Create Radio Button Component in React Native
Create Radio Button Component in React Native
Last updated on: April 24, 2023 by Digamber
FEATURED VIDEOS Powered by
N
PLA
This tutorial shows you how you can create a radio button component in React
Native application pretty smoothly. We will learn the easiest way to deal with
React Native Radio Buttons.
https://www.positronx.io/create-radio-button-component-in-react-native/ 1/14
6/27/23, 2:23 PM 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.
Scheda
Madre
Gigabyte
Z790 UD
LGA 170…
BPM-POWER
Ad
https://www.positronx.io/create-radio-button-component-in-react-native/ 2/14
6/27/23, 2:23 PM Create Radio Button Component in React Native
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
https://www.positronx.io/create-radio-button-component-in-react-native/ 3/14
6/27/23, 2:23 PM Create Radio Button Component in React Native
Create react native project by using the below command.
react-native init rnradiobutton
Get into the project directory.
Martello
perforatore
Hikoki
DH26PC2
[DH26PC2]
BPM-POWER
Ad
cd rnradiobutton
Simple React Native Radio Button Example
Let’s add the following code in the App.js file.
https://www.positronx.io/create-radio-button-component-in-react-native/ 4/14
6/27/23, 2:23 PM Create Radio Button Component in React Native
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.
https://www.positronx.io/create-radio-button-component-in-react-native/ 5/14
6/27/23, 2:23 PM Create Radio Button Component in React Native
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,
https://www.positronx.io/create-radio-button-component-in-react-native/ 6/14
6/27/23, 2:23 PM Create Radio Button Component in React Native
};
}
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.selected
</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,
https://www.positronx.io/create-radio-button-component-in-react-native/ 7/14
6/27/23, 2:23 PM Create Radio Button Component in React Native
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;
https://www.positronx.io/create-radio-button-component-in-react-native/ 8/14
6/27/23, 2:23 PM Create Radio Button Component in React Native
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.sele
</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',
},
https://www.positronx.io/create-radio-button-component-in-react-native/ 9/14
6/27/23, 2:23 PM Create Radio Button Component in React Native
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
https://www.positronx.io/create-radio-button-component-in-react-native/ 10/14
6/27/23, 2:23 PM Create Radio Button Component in React Native
Get the complete code of this project on this GitHub repository.
Digamber
A Full-stack developer with a passion to solve real world
problems through functional programming.
Twitter GitHub
Recommended Posts:
https://www.positronx.io/create-radio-button-component-in-react-native/ 11/14
6/27/23, 2:23 PM Create Radio Button Component in React Native
How to Add Full Screen Background Image in React Native
React Native Build & Validate Forms with Formik & Yup
React Native Pick Images From Camera & Gallery Example
React Native Firebase – Login and User Registration Tutorial
React Native StackNavigator Pass & Get Params to Screen
React Native Navigation v5 Example Tutorial
Create React Native Firebase CRUD App with Firestore
React Native Firebase – Firebase Integration in React Native
React Native Alert Example – Show Alert in React Native App
React Native Image Component Tutorial with Examples
React Native Table Component Tutorial with Example
Build React Native Custom Checkbox Component
https://www.positronx.io/create-radio-button-component-in-react-native/ 12/14
6/27/23, 2:23 PM Create Radio Button Component in React Native
Join Our Newsletter
Email Address *
Subscribe
Explore
About
Affiliate Disclosure
Privacy Policy
Disclaimer
Contact
Categories
Angular
Vue
React
Ionic
https://www.positronx.io/create-radio-button-component-in-react-native/ 13/14
6/27/23, 2:23 PM Create Radio Button Component in React Native
Laravel
Codeigniter
PHP
HTML 5, CSS 3, JavaScript, PHP, React, Angular, Laravel — Aimed to offer
custom coding solutions on almost every modern programming language.
© 2016-2023 All Rights Reserved - www.positronx.io
https://www.positronx.io/create-radio-button-component-in-react-native/ 14/14
