How to use Radio Button Group in React Native?

Hello dev’s today now in this post i will show you How to use Radio Button Group in React Native? Here I am going to show you an example of how to use radio button group in react native application. Here you will learn about react native radio button group example. Now in this example i will help you about radio button group example in react native. So in this post i will give you a very simple example of how to create an radio button group in react native. Just need to Follow the bellow tutorial step of how to implement radio button group in react native.

Let’s start and following the example:

Step 1: Download Project

At first In the first step need run the following command for create a project.

expo init ExampleApp

Step 2: App.js

In this step, we have open the App.js file and then put the code.

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

const App = () => {
    const [value, setValue] = React.useState('');

    return (
        <View style={styles.container}>
            <RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value}>
                <View style={styles.innerContainer}>
                    <Text style={styles.categoryTitle}>Select Category:</Text>
                    <View style={styles.radioContainer}>
                        <RadioButton value="React Native" />
                        <Text style={styles.title}>React Native</Text>
                    </View>
                    <View style={styles.radioContainer}>
                        <RadioButton value="Javascript" />
                        <Text style={styles.title}>Javascript</Text>
                    </View>
                    <View style={styles.radioContainer}>
                        <RadioButton value="Laravel" />
                        <Text style={styles.title}>Laravel</Text>
                    </View>
                    <View style={styles.radioContainer}>
                        <RadioButton value="PHP" />
                        <Text style={styles.title}>PHP</Text>
                    </View>
                    <View style={styles.radioContainer}>
                        <RadioButton value="jQuery" />
                        <Text style={styles.title}>jQuery</Text>
                    </View>
                </View>
            </RadioButton.Group>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor:'#76f6f4',
    },
    innerContainer: {
        backgroundColor: 'white',
        padding: 80,
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.8,
        shadowRadius: 2,
        elevation: 5,
    },
    radioContainer: {
        flexDirection: 'row',
    },
    title: {
        marginTop: 7,
    },
    categoryTitle: {
        marginBottom:10,
        fontSize:20,
    },
});

export default App;

Run Project

Now in the last step run our project by using the below command.

expo start

Read Also: How to use SetTimeout in React Native?

Thanks for read. I hope it help you. For more you can follow us on facebook