How to Custom Radio Buttons Component in React Native

In this blog, I will try to help you better understand the most common topic on how to create a custom radio buttons component in React Native application. This react native radio button example will focus on building and adding radio buttons in react native through the component approach.

React Native is a solid JavaScript framework that let you create a native application through the profound React library. Ideally, react native is the best choice for building apps for iOS and Android. You can easily create user interface components in React Native.

Today, In this guide, we will show you how to create radio buttons component in React native from scratch.

React Native Custom Radio Buttons Example

  • Step 1: Install React Native CLI
  • Step 2: Create React Native Project
  • Step 3: Create Radio Button Component
  • Step 4: Register New Component in App.js
  • Step 5: View Application in Device

Install React Native CLI

The Node 12 LTS or higher must be installed on your development machine.

You can use any of the given below command to install the Expo CLI command-line tool:

# npm
npm install -g expo-cli

# yarn
yarn global add expo-cli

Create React Native Project

Once the expo cli is added, then immediately move on to the next task, which is to install the new react native application.

expo init RnBlogProject

Furthermore, head over to the new project directory.

cd RnBlogProject

Create Radio Button Component

Now, this is the primary step of this guide. Here, you have to create the two files; one file will contain the radio button values and helps to display the radio button.

Whereas another file will have the logical structure of the radio buttons. Also, include the custom style of the radio button.

Create customRadioButton.js file and then update the code in customRadioButton.js file.

import React, { Component } from 'react';
import { TouchableOpacity, View, StyleSheet, Text  } from 'react-native';

export default class CustomRadioButton 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.rbWrapper}>
							<Text style={styles.textStyle}>{res.text}</Text>
							<TouchableOpacity
								style={styles.rbStyle}
								onPress={() => {
									this.setState({
										value: res.key,
									});
								}}>
                                  {value === res.key && <View style={styles.selected} />}
							</TouchableOpacity>
						</View>
					);
				})}

                <Text> Selected values: {this.state.value}</Text>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	rbWrapper: {
        marginBottom: 36,
        alignItems: 'center',
        flexDirection: 'row',
		justifyContent: 'space-between',
	},
    textStyle: {
        marginRight: 36,
        fontSize: 22,
        color: '#444',
        fontWeight: '700'
    },
	rbStyle: {
		height: 32,
		width: 32,
		borderRadius: 110,
		borderWidth: 2,
		borderColor: '#2750aa',
		alignItems: 'center',
		justifyContent: 'center',
	},
	selected: {
		width: 16,
		height: 16,
		borderRadius: 55,
		backgroundColor: 'red',
    },
    result: {
        marginTop: 22,
        color: 'white',
        fontWeight: '600',
        backgroundColor: 'blue',
    },
});

Eventually, create radio_component.js file and next add the code in radio_component.js file.

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import CustomRadioButton from './customRadioButton';


const val = [
	{
		key: 'fruit',
		text: 'Fruit',
	},
	{
		key: 'eggs',
		text: 'Eggs',
	},
	{
		key: 'veggies',
		text: 'Veggies',
	},
	{
		key: 'seafood',
		text: 'Seafood',
  },
  {
		key: 'bread',
		text: 'Bread',
  },  
];


export default class RadioButtonComponenet extends Component {

  render() {
    return (
      <View style={styles.rbWrapper}>
        <CustomRadioButton PROP={val} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  rbWrapper: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

Register New Component in App.js

After completing the set-up of the new component, it is mandatory to register the new component in the main App.js file.

Hence, import the RadioButtonComponenet from ‘./radio_component.js and pass the component name inside the return method.


import React from 'react';

import RadioButtonComponenet from './radio_component.js'


export default function App() {
  return (
    <RadioButtonComponenet/>
  );
}

View Application in Device

You have to preview our react native app; install the Expo Client on your smartphone. You may download the expo client either from Google Play Store or from App Store.

As soon as you have installed the Expo app, immediately scan the visible QR code but before that make sure to run the either of the given command.

# npm
npm start

# yarn
yarn start

Wait for few minutes while your project is being compiled. Make sure to stay on the same network; if everything goes well, you will see your project on your smartphone.

How to Custom Radio Buttons Component in React Native

Summary

React Native drastically reduces the development time due to its flexibility. In this intuitive tutorial, we have explored how to make radio buttons component in react native app and also how to use the radio button component to display the radio buttons in react native app.