Create Radio Button Group in React-Native

Hello folks,

Today we're going to create a radio button example from react-native without using any third-party library.

First, create a new react native project using the following command. Please select the default template, if you are prompted to select a template.

create-react-native-app radio-button-demo

Then navigate to the project directory and start the app.

npm run ios

Your newly created app will look similar to the following.

Now Let's start working on the app to add radio buttons.

First, create two files as RadioButton.js and RadioButtonContainer.js in the root of the project directory. Your project structure will be as follows.

Our radio buttons will look like this.

Now let's create the react component for a single radio button.

export default function RadioButton() {

  return (
    <TouchableOpacity style={styles.mainContainer}>
      <View style={[styles.radioButtonIcon]}>
        <View style={[styles.radioButtonIconInnerIcon]} />
      </View>
      <View style={[styles.radioButtonTextContainer]}>
        <Text style={styles.radioButtonText}>Option A</Text>
      </View>
    </TouchableOpacity>
  );
}

Also, add the following styles to make it looks better.

const styles = StyleSheet.create({
  mainContainer: {
    height: 50,
    marginTop: 5,
    marginBottom: 5,
    marginLeft: 10,
    marginRight: 10,
    justifyContent: "center",
    paddingLeft: 10,
    paddingRight: 10,
    borderWidth: 0.5,
    borderColor: "red",
    flexDirection: "row",
    alignItems: "center",
  },
  radioButtonIcon: {
    backgroundColor: "white",
    borderWidth: 3,
    borderColor: "red",
    height: 30,
    width: 30,
    borderRadius: 30 / 2,
    marginRight: 10,
    alignItems: "center",
    justifyContent: "center",
  },
  radioButtonIconInnerIcon: {
    height: 25,
    width: 25,
    backgroundColor: "red",
    borderRadius: 25 / 2,
    borderWidth: 3,
    borderColor: "white",
  },
  radioButtonTextContainer: {
    flex: 5,
    height: 50,
    justifyContent: "center",
    paddingLeft: 10,
  },
  radioButtonText: {
    fontSize: 18,
  },
});

Now we have a better UI for our radio button. But we need to have multiple radio buttons.

Now let's create multiple radio buttons with some dynamic data which should look exactly as follows.

For this, we need to change the code in our RadioButtonContainer.js, App.js, RadioButton.js files. Let's make those changes.

Inside your RadioButtonContainer.js file, paste the following code. I will go for a detailed explanation later on.

import React, { useState, useEffect } from "react";
import { View, Text } from "react-native";
import RadioButton from "./RadioButton";

export default function RadioButtonContainer({ values, onPress }) {
  const [currentSelectedItem, setCurrentSelectedItem] = useState(0);

  const _onPress = (idx) => {
    onPress(idx);
    setCurrentSelectedItem(idx);
  };

  const _renderRadioButtons = () => {
    return (values || []).map((listItem, idx) => {
      let isChecked = currentSelectedItem === idx ? true : false;
      return (
        <RadioButton
          key={idx}
          onRadioButtonPress={() => _onPress(idx)}
          isChecked={isChecked}
          text={listItem.text}
        />
      );
    });
  };
  return <View>{_renderRadioButtons()}</View>;
}

Now you will wonder what this {values, onPress } refers to. These will be the props passed from the parent component to this RadiobuttonContainer component. values will contain a data list for radio buttons and onPress will have a function to be called on click of each the radio button.

const [currentSelectedItem, setCurrentSelectedItem] = useState(0);

by using the above line we make sure that 1st value in the data list is checked by default.

Then we use the JS array map function to render multiple components of RadioButton.

  const _renderRadioButtons = () => {
    return (values || []).map((listItem, idx) => {
      let isChecked = currentSelectedItem === idx ? true : false;
      return (
        <RadioButton
          key={idx}
          onRadioButtonPress={() => _onPress(idx)}
          isChecked={isChecked}
          text={listItem.text}
        />
      );
    });
  };

Now you can see there are multiple props passed into the RadioButton component. Let's have a look at it.

• onRadioButtonPress will be called on the press of the relevant radio button and gives the index in the data list.
• isChecked will determine whether each radio button is checked or not.
• text will be responsible for the text shown in the body of the radio button.

const _onPress = (idx) => {
    onPress(idx);
    setCurrentSelectedItem(idx);
  };

The above function is responsible for changing the UI in the selected radio button.onPress is the function passed from the parent component. setCurrentSelectedItem will update what is the currently checked radio button.

Now we need to pass props into our RadioButtonContainer. Let's find out how it is done.

Remove all the content in the App.js file and paste the following code.

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, SafeAreaView } from "react-native";
import RadioButtonContainer from "./RadioButtonContainer";

export default function App() {
  const data = [
    {
      text: "Option A",
    },
    {
      text: "Option B",
    },
    {
      text: "Option C",
    },
    {
      text: "Option E",
    },
    {
      text: "Option F",
    },
    {
      text: "Option G",
    },
  ];

  const onRadioButtonPress = (itemIdx) => {
    console.log("Clicked", itemIdx);
  };

  return (
    <SafeAreaView>
      <View style={styles.textContainer}>
        <Text style={styles.text}>Radio Button Demo</Text>
      </View>

      <RadioButtonContainer values={data} onPress={onRadioButtonPress} />
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  textContainer: {
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 10,
  },
  text: {
    fontSize: 20,
    fontWeight: "bold",
  },
});

• data is an object array, which is used to pass options for radio buttons. but you can use any array here which includes the text property in each object.
• onRadioButtonPress will be called on each click of the radio button with the selected index as a parameter.

Next, We need to make some changes in our RadioButton.js file in order to align with the latest changes.
First of all, we need to catch all the props from the parent component.

export default function RadioButton()

change the above line to

export default function RadioButton({ isChecked, text, onRadioButtonPress })

in order to catch props from the parent component. Also, change the return code in the RadioButton from

  return (
    <TouchableOpacity style={styles.mainContainer}>
      <View style={[styles.radioButtonIcon]}>
        <View style={[styles.radioButtonIconInnerIcon]} />
      </View>
      <View style={[styles.radioButtonTextContainer]}>
        <Text style={styles.radioButtonText}>Option A</Text>
      </View>
    </TouchableOpacity>
  );

to this

  const _renderCheckedView = () => {
    return isChecked ? (
      <View style={[styles.radioButtonIconInnerIcon]} />
    ) : null;
  };

  return (
    <TouchableOpacity style={styles.mainContainer} onPress={onRadioButtonPress}>
      <View style={[styles.radioButtonIcon]}>{_renderCheckedView()}</View>
      <View style={[styles.radioButtonTextContainer]}>
        <Text style={styles.radioButtonText}>{text}</Text>
      </View>
    </TouchableOpacity>
  );

After doing all those changes, Your RadioButton.js file looks like this.

import React, { useState } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";

export default function RadioButton({ isChecked, text, onRadioButtonPress }) {
  const _renderCheckedView = () => {
    return isChecked ? (
      <View style={[styles.radioButtonIconInnerIcon]} />
    ) : null;
  };

  return (
    <TouchableOpacity style={styles.mainContainer} onPress={onRadioButtonPress}>
      <View style={[styles.radioButtonIcon]}>{_renderCheckedView()}</View>
      <View style={[styles.radioButtonTextContainer]}>
        <Text style={styles.radioButtonText}>{text}</Text>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  mainContainer: {
    height: 50,
    marginTop: 5,
    marginBottom: 5,
    marginLeft: 10,
    marginRight: 10,
    justifyContent: "center",
    paddingLeft: 10,
    paddingRight: 10,
    borderWidth: 0.5,
    borderColor: "red",
    flexDirection: "row",
    alignItems: "center",
  },
  radioButtonIcon: {
    backgroundColor: "white",
    borderWidth: 3,
    borderColor: "red",
    height: 30,
    width: 30,
    borderRadius: 30 / 2,
    marginRight: 10,
    alignItems: "center",
    justifyContent: "center",
  },
  radioButtonIconInnerIcon: {
    height: 25,
    width: 25,
    backgroundColor: "red",
    borderRadius: 25 / 2,
    borderWidth: 3,
    borderColor: "white",
  },
  radioButtonTextContainer: {
    flex: 5,
    height: 50,
    justifyContent: "center",
    paddingLeft: 10,
  },
  radioButtonText: {
    fontSize: 18,
  },
});

After following all the above steps, you should have a nice looking radio button group.

Comments

[Bundot]

This was very much helpful , Thanks