Create a radio button from the scratch in React Native

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>
   <TouchableOpacity onPress={() => {}}>
     <Text style={styles.radioButtonText}>Yes</Text>
   </TouchableOpacity>
 </View>

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

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>
       <TouchableOpacity onPress={() => {}}>
         <Text style={styles.radioButtonText}>{item.name}</Text>
       </TouchableOpacity>
     </View>
  ))}

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 }
    );
    setIsLiked(updatedState);
  };

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>
      <TouchableOpacity onPress={onPress}>
        <Text style={styles.radioButtonText}>{children}</Text>
      </TouchableOpacity>
    </View>
  );
};

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

  {isLiked.map((item) => (
     <RadioButton
       onPress={() => onRadioBtnClick(item)}
       selected={item.selected}
       key={item.id}
     >
       {item.name}
     </RadioButton>
  ))}

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