DEV Community

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

Posted on • Updated on <time datetime="2020-10-01T15:35:46Z" class="date">Oct 1, 2020</time>

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>
Enter fullscreen mode Exit fullscreen mode

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
  }
Enter fullscreen mode Exit fullscreen mode

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 }
  ]);
Enter fullscreen mode Exit fullscreen mode

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>
  ))}
Enter fullscreen mode Exit fullscreen mode

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);
  };
Enter fullscreen mode Exit fullscreen mode

pass this function to onPress of both TouchableOpacity like this

<TouchableOpacity onPress={() => onRadioBtnClick(item)}>
Enter fullscreen mode Exit fullscreen mode

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}
Enter fullscreen mode Exit fullscreen mode

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>
  );
};
Enter fullscreen mode Exit fullscreen mode

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>
  ))}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)