How to Implement Radio Button In React Native ?

Last Updated : 10 May, 2025

In this article, we will learn to implement a Radio Button in React Native. A radio button signifies a graphical user interface element enabling individuals to make an exclusive selection among multiple alternatives.

React Native is a popular platform for creating native mobile apps for iOS and Android using a single codebase. To use it, configure the development setup, install Node.js, and use Expo CLI. This versatile framework accelerates app development, allowing developers to create immersive, high-performing applications.

Prerequisites:

Introduction to React Native
React Native Components
React useState
Expo CLI
Node.js and npm (Node Package Manager)

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

For the Android users,
- For the Android Emulator, press "a" as mentioned in the image below.
- For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
For iOS users, simply scan the QR code using the Camera app.
If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Start Coding

Example 1: In this example, we are going to use the React Native Paper library to create the radio button in react native.

- Import libraries: Import required libraries at the top of the file.

JavaScript

// Importing necessary libraries
import React, { useState } from 'react';
// Importing necessary components from React and React Native
import { View, Text, StyleSheet } from 'react-native';
// Importing RadioButton from react-native-paper
import { RadioButton } from 'react-native-paper';

- StyleSheet: Create a StyleSheet to style components like container, radioGroup, radioButton, and radioLabel.

JavaScript

// Define styles for the components
const styles = StyleSheet.create({
  container: {
    flex: 1, // Take up the full screen
    backgroundColor: '#F5F5F5', // Light gray background
    justifyContent: 'center', // Center content vertically
    alignItems: 'center', // Center content horizontally
  },
  radioGroup: {
    flexDirection: 'row', // Arrange radio buttons in a row
    alignItems: 'center', // Align items vertically in the center
    justifyContent: 'space-around', // Space out radio buttons evenly
    marginTop: 20, // Add margin at the top
    borderRadius: 8, // Rounded corners
    backgroundColor: 'white', // White background for the group
    padding: 16, // Padding inside the group
    elevation: 4, // Shadow for Android
    shadowColor: '#000', // Shadow color for iOS
    shadowOffset: {
      width: 0,
      height: 2, // Shadow offset for iOS
    },
    shadowOpacity: 0.25, // Shadow opacity for iOS
    shadowRadius: 3.84, // Shadow radius for iOS
  },
  radioButton: {
    flexDirection: 'row', // Arrange radio button and label in a row
    alignItems: 'center', // Align items vertically in the center
  },
  radioLabel: {
    marginLeft: 8, // Space between radio button and label
    fontSize: 16, // Font size for the label
    color: '#333', // Dark gray color for the label
  },
});

- RadioButton.Android and Text: RadioButton.Android is used to create a radio button in android and Text is to display the text beside it, i.e View component like a row.

JavaScript

<View style={styles.radioGroup}>
{/* First radio button for ReactJS */}
<View style={styles.radioButton}>
  <RadioButton.Android
    value="option1"
    status={selectedValue === 'option1' ? 'checked' : 'unchecked'}
    onPress={() => setSelectedValue('option1')}
    color="#007BFF" // Custom color for the radio button
  />
  <Text style={styles.radioLabel}>
    ReactJS
  </Text>
</View>

{/* Second radio button for NextJs */}
<View style={styles.radioButton}>
  <RadioButton.Android
    value="option2"
    status={selectedValue === 'option2' ? 'checked' : 'unchecked'}
    onPress={() => setSelectedValue('option2')}
    color="#007BFF" // Custom color for the radio button
  />
  <Text style={styles.radioLabel}>
    NextJs
  </Text>
</View>

{/* Third radio button for React Native */}
<View style={styles.radioButton}>
  <RadioButton.Android
    value="option3"
    status={selectedValue === 'option3' ? 'checked' : 'unchecked'}
    onPress={() => setSelectedValue('option3')}
    color="#007BFF" // Custom color for the radio button
  />
  <Text style={styles.radioLabel}>
    React Native
  </Text>
</View>
</View>

- useState: Used to maintain the state, i.e, selectedValue and set the default value to 'option1'.

JavaScript

const [selectedValue, setSelectedValue] = useState('option1');

- App Component: Wrap the all RadioButton.Android and Text with a View and return that inside the App function to render and place the useState inside the App function, also make sure to export the App.

JavaScript

// Define the main App component
export default function App() {
  // Used to maintain the state i.e, selectedValue and set the default value to 'option1'
  const [selectedValue, setSelectedValue] = useState('option1');

  return (
    <View style={styles.container}>
      {/* Radio button group container */}
      <View style={styles.radioGroup}>
        {/* First radio button for ReactJS */}
        <View style={styles.radioButton}>
          <RadioButton.Android
            value="option1"
            status={selectedValue === 'option1' ? 'checked' : 'unchecked'}
            onPress={() => setSelectedValue('option1')}
            color="#007BFF" // Custom color for the radio button
          />
          <Text style={styles.radioLabel}>
            ReactJS
          </Text>
        </View>

        {/* Second radio button for NextJs */}
        <View style={styles.radioButton}>
          <RadioButton.Android
            value="option2"
            status={selectedValue === 'option2' ? 'checked' : 'unchecked'}
            onPress={() => setSelectedValue('option2')}
            color="#007BFF" // Custom color for the radio button
          />
          <Text style={styles.radioLabel}>
            NextJs
          </Text>
        </View>

        {/* Third radio button for React Native */}
        <View style={styles.radioButton}>
          <RadioButton.Android
            value="option3"
            status={selectedValue === 'option3' ? 'checked' : 'unchecked'}
            onPress={() => setSelectedValue('option3')}
            color="#007BFF" // Custom color for the radio button
          />
          <Text style={styles.radioLabel}>
            React Native
          </Text>
        </View>
      </View>
    </View>
  );
}

Complete Source Code

App.js:

JavaScript

// App.js

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { RadioButton } from 'react-native-paper';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5F5F5',
        justifyContent: 'center',
        alignItems: 'center',
    },
    radioGroup: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around',
        marginTop: 20,
        borderRadius: 8,
        backgroundColor: 'white',
        padding: 16,
        elevation: 4,
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
    },
    radioButton: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    radioLabel: {
        marginLeft: 8,
        fontSize: 16,
        color: '#333',
    },
});

const App = () => {
    const [selectedValue, setSelectedValue] = useState('option1');

    return (
        <View style={styles.container}>
            <View style={styles.radioGroup}>
                <View style={styles.radioButton}>
                    <RadioButton.Android
                        value="option1"
                        status={selectedValue === 'option1' ? 
                                'checked' : 'unchecked'}
                        onPress={() => setSelectedValue('option1')}
                        color="#007BFF"
                    />
                    <Text style={styles.radioLabel}>
                        ReactJS
                    </Text>
                </View>

                <View style={styles.radioButton}>
                    <RadioButton.Android
                        value="option2"
                        status={selectedValue === 'option2' ? 
                                 'checked' : 'unchecked'}
                        onPress={() => setSelectedValue('option2')}
                        color="#007BFF"
                    />
                    <Text style={styles.radioLabel}>
                        NextJs
                    </Text>
                </View>

                <View style={styles.radioButton}>
                    <RadioButton.Android
                        value="option3"
                        status={selectedValue === 'option3' ? 
                                'checked' : 'unchecked'}
                        onPress={() => setSelectedValue('option3')}
                        color="#007BFF"
                    />
                    <Text style={styles.radioLabel}>
                        React Native
                    </Text>
                </View>
            </View>
        </View>
    );
};

export default App;

Output

Example 2: Upon selection of an option, the background color changes to a vibrant blue while ensuring optimal text contrast for improved visibility.

- Import libraries: Import required libraries at the top of the file.

JavaScript

// Import necessary libraries and components
import React, { useState } from 'react';
import {
  View,             // Main container for the app
  Text,             // Text component for displaying text
  TouchableOpacity, // Touchable component for handling touch events
  StyleSheet        // Stylesheet for styling components
} from 'react-native';

- StyleSheet: Create a StyleSheet to style components like a container, a radioButton, and radioButtonText.

JavaScript

// Styles for the components
const styles = StyleSheet.create({
  container: {
    flex: 1, // Take up the full screen
    justifyContent: 'center', // Center content vertically
    alignItems: 'center', // Center content horizontally
    backgroundColor: '#F5F5F5', // Light gray background
  },
  radioButton: {
    paddingVertical: 12, // Vertical padding
    paddingHorizontal: 16, // Horizontal padding
    borderRadius: 8, // Rounded corners
    marginVertical: 8, // Vertical margin between buttons
    borderWidth: 1, // Border width
    borderColor: '#007BFF', // Border color
    flexDirection: 'row', // Arrange children in a row
    alignItems: 'center', // Align items vertically in the center
    justifyContent: 'space-between', // Space out children evenly
    width: 280, // Fixed width for the button
  },
  radioButtonText: {
    fontSize: 16, // Font size for the text
  },
});

- CustomRadioButton: Create a "CustomRadioButton" to display a button with a label and change its style based on selection.

JavaScript

// CustomRadioButton component: A reusable radio button component
const CustomRadioButton = ({ label, selected, onSelect }) => (
  <TouchableOpacity
    style={[
      styles.radioButton,
      { backgroundColor: selected ? '#007BFF' : '#FFF' } // Change background color based on selection
    ]}
    onPress={onSelect} // Trigger onSelect callback when pressed
  >
    <Text
      style={[
        styles.radioButtonText,
        { color: selected ? '#FFF' : '#000' } // Change text color based on selection
      ]}
    >
      {label} {/* Display the label text */}
    </Text>
  </TouchableOpacity>
);

- useState: It is used to manage the state i.e, selectedValue value and set the default value of selectedValue to null.

JavaScript

const [selectedValue, setSelectedValue] = useState(null);

- App Component: Wrap the CustomRadioButton with a View and return that inside the App function to render and place the useState inside the App function, also make sure to export the App.

JavaScript

// Main App component
const App = () => {
  // used to manage the state i.e, selectedValue value and set the default value of selectedValue to null
  const [selectedValue, setSelectedValue] = useState(null); 

  return (
    <View style={styles.container}>
      {/* Render three CustomRadioButton components with different labels */}
      <CustomRadioButton
        label="ReactJS" // Label for the first option
        selected={selectedValue === 'option1'} // Check if this option is selected
        onSelect={() => setSelectedValue('option1')} // Update state when selected
      />
      <CustomRadioButton
        label="NextJS" // Label for the second option
        selected={selectedValue === 'option2'} // Check if this option is selected
        onSelect={() => setSelectedValue('option2')} // Update state when selected
      />
      <CustomRadioButton
        label="React Native" // Label for the third option
        selected={selectedValue === 'option3'} // Check if this option is selected
        onSelect={() => setSelectedValue('option3')} // Update state when selected
      />
    </View>
  );
};

// Export the App component as default
export default App;

Complete Source Code

App.js:

App.js

// Import necessary libraries and components
import React, { useState } from 'react';
import {
  View,             // Main container for the app
  Text,             // Text component for displaying text
  TouchableOpacity, // Touchable component for handling touch events
  StyleSheet        // Stylesheet for styling components
} from 'react-native';

// CustomRadioButton component: A reusable radio button component
const CustomRadioButton = ({ label, selected, onSelect }) => (
  <TouchableOpacity
    style={[
      styles.radioButton,
      { backgroundColor: selected ? '#007BFF' : '#FFF' } // Change background color based on selection
    ]}
    onPress={onSelect} // Trigger onSelect callback when pressed
  >
    <Text
      style={[
        styles.radioButtonText,
        { color: selected ? '#FFF' : '#000' } // Change text color based on selection
      ]}
    >
      {label} {/* Display the label text */}
    </Text>
  </TouchableOpacity>
);


// Main App component
const App = () => {
  // used to manage the state i.e, selectedValue value and set the default value of selectedValue to null
  const [selectedValue, setSelectedValue] = useState(null); 

  return (
    <View style={styles.container}>
      {/* Render three CustomRadioButton components with different labels */}
      <CustomRadioButton
        label="ReactJS" // Label for the first option
        selected={selectedValue === 'option1'} // Check if this option is selected
        onSelect={() => setSelectedValue('option1')} // Update state when selected
      />
      <CustomRadioButton
        label="NextJS" // Label for the second option
        selected={selectedValue === 'option2'} // Check if this option is selected
        onSelect={() => setSelectedValue('option2')} // Update state when selected
      />
      <CustomRadioButton
        label="React Native" // Label for the third option
        selected={selectedValue === 'option3'} // Check if this option is selected
        onSelect={() => setSelectedValue('option3')} // Update state when selected
      />
    </View>
  );
};


// Styles for the components
const styles = StyleSheet.create({
  container: {
    flex: 1, // Take up the full screen
    justifyContent: 'center', // Center content vertically
    alignItems: 'center', // Center content horizontally
    backgroundColor: '#F5F5F5', // Light gray background
  },
  radioButton: {
    paddingVertical: 12, // Vertical padding
    paddingHorizontal: 16, // Horizontal padding
    borderRadius: 8, // Rounded corners
    marginVertical: 8, // Vertical margin between buttons
    borderWidth: 1, // Border width
    borderColor: '#007BFF', // Border color
    flexDirection: 'row', // Arrange children in a row
    alignItems: 'center', // Align items vertically in the center
    justifyContent: 'space-between', // Space out children evenly
    width: 280, // Fixed width for the button
  },
  radioButtonText: {
    fontSize: 16, // Font size for the text
  },
});
// Export the App component as default
export default App;

Output:

How to create a table in react-native ?

saurabhkumarsharma05

Improve

Article Tags :

How to Implement Radio Button In React Native ?

Prerequisites:

Step-by-Step Implementation

Step 1: Create a React Native Project

Project Structure:

Step 2: Run Application

Step 3: Start Coding

Complete Source Code

Complete Source Code

Similar Reads

React Native Basics

React Native Components

React Native UI Elements

React Native API

React Native Questions

React Native Projects

Thank You!

What kind of Experience do you want to share?