Create a radio button from the scratch in React Native
Tags: reactnative, react, javascript, tutorial
Published: 2020-09-26 16:32:28

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`
```javascript
 <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
```javascript
  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](https://dev-to-uploads.s3.amazonaws.com/i/b5vqoiaxz642r5np0zdy.png)

##Initializing state for radio button
I am creating a radio button state in an array and giving it props id, value, name and selected.
```javascript
  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
```javascript
  <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. 
```javascript
  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
```javascript
<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  
```javascript
 {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
```javascript
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 :tada: :tada:
```javascript
  {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 :confetti_ball:
You can check the code and functionality below
{% codesandbox dawn-shadow-5q03w %}