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