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 the 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…