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

Create a radio button from the scratch in React Native

Creating UI of radio button

Initializing state for radio button

Creating handle click function

Refactoring and making reusable component