Cover image for Create a radio button from  the scratch in React Native

Create a radio button from the scratch in React Native

aneeqakhan profile image Aneeqa Khan ✨ Updated on ・2 min read

Creating a radio button from scratch is quite easy. You only need a few steps to achieve radio button functionality.

  • Create UI and design of the radio button.
  • Initialize the radio button state.
  • Write down the handle function on click.
  • Make your radio button reusable.

Creating UI of radio button

You need both radio button and radio button text clickable, so here I am wrapping both in TouchableOpacity

 <View style={styles.radioButtonContainer}>
   <TouchableOpacity onPress={() => {}} style={styles.radioButton}>
     <View style={styles.radioButtonIcon} />
   <TouchableOpacity onPress={() => {}}>
     <Text style={styles.radioButtonText}>Yes</Text>

Styles would be like this

  radioButtonContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginRight: 45
  radioButton: {
    height: 20,
    width: 20,
    backgroundColor: "#F8F8F8",
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "#E6E6E6",
    alignItems: "center",
    justifyContent: "center"
  radioButtonIcon: {
    height: 14,
    width: 14,
    borderRadius: 7,
    backgroundColor: "#98CFB6"
  radioButtonText: {
    fontSize: 16,
    marginLeft: 16

Hereafter giving it styles
radio button initial

Initializing state for radio button

I am creating a radio button state in an array and giving it props id, value, name and selected.

  const [isLiked, setIsLiked] = useState([
    { id: 1, value: true, name: "Yes", selected: false },
    { id: 2, value: false, name: "No", selected: false }

Now loop over the radio button element

  <Text style={styles.text}>Do you like react native?</Text>
  {isLiked.map((item) => (
     <View style={styles.radioButtonContainer}>
       <TouchableOpacity onPress={() => {}} style={styles.radioButton}>
         <View style={styles.radioButtonIcon} />
       <TouchableOpacity onPress={() => {}}>
         <Text style={styles.radioButtonText}>{item.name}</Text>

Creating handle click function

Now I am creating a handle click function for the radio button, it will take the clicked item and update its selected value to true.

  const onRadioBtnClick = (item) => {
    let updatedState = isLiked.map((isLikedItem) =>
      isLikedItem.id === item.id
        ? { ...isLikedItem, selected: true }
        : { ...isLikedItem, selected: false }

pass this function to onPress of both TouchableOpacity like this

<TouchableOpacity onPress={() => onRadioBtnClick(item)}>

now here we need to do conditional rendering on basis of selected prop. Pass it to the radio button component to hide and show the inner <View /> of the radio button which gives it the look if its selected or not

 {item.selected ? <View style={styles.radioButtonIcon} /> : null}

Refactoring and making reusable component

Here all the functionality is completed, now I am creating a separate component of the radio button and pass it required props like this

const RadioButton = ({ onPress, selected, children }) => {
  return (
    <View style={styles.radioButtonContainer}>
      <TouchableOpacity onPress={onPress} style={styles.radioButton}>
        {selected ? <View style={styles.radioButtonIcon} /> : null}
      <TouchableOpacity onPress={onPress}>
        <Text style={styles.radioButtonText}>{children}</Text>

and simply write RadioButton component inside loop like this and you are done 🎉 🎉

  {isLiked.map((item) => (
       onPress={() => onRadioBtnClick(item)}

Now you can reuse it multiple times in multiple components 🎊
You can check the code and functionality below

Posted on by:

aneeqakhan profile

Aneeqa Khan ✨


Software Developer by profession, Artist by heart


Editor guide