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.