How to Implement Radio Button in React Native

Here’s how you can implement a radio button component in react native.

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

// RadioButton component
const RadioButton = (props) => {
  // Destructure the props
  const { label, isSelected, onSelectionChange } = props;

  return (
    // TouchableOpacity is used to handle the press event
    <TouchableOpacity style={styles.radioButtonContainer} onPress={onSelectionChange}>
      <View style={styles.radioButton}>
        {/* Render a smaller circle inside the outer circle when isSelected is true */}
        {isSelected ? <View style={styles.radioButtonSelected} /> : null}
      </View>
      <Text style={styles.radioButtonLabel}>{label}</Text>
    </TouchableOpacity>
  );
};

// Styles for the RadioButton component
const styles = StyleSheet.create({
  radioButtonContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 5,
  },
  radioButton: {
    height: 20,
    width: 20,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#ACACAC',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 5,
  },
  radioButtonSelected: {
    width: 14,
    height: 14,
    borderRadius: 7,
    backgroundColor: '#794F9B',
  },
  radioButtonLabel: {
    fontSize: 14,
    color: '#000',
  },
});

// App component
const App = () => {
  // useState hook to manage the selected option
  const [selectedOption, setSelectedOption] = useState(null);

  // Function to handle selection change
  const handleSelectionChange = (option) => {
    setSelectedOption(option);
  };
  return (
    <View>
      {/* Render the RadioButton component with different labels, and isSelected based on the selectedOption state */}
      <RadioButton
        label="Option 1"
        isSelected={selectedOption === 'option1'}
        onSelectionChange={() => handleSelectionChange('option1')}
      />
      <RadioButton
        label="Option 2"
        isSelected={selectedOption === 'option2'}
        onSelectionChange={() => handleSelectionChange('option2')}
      />
    </View>
  );
};
export default App;

Alternatively, you can use UI libraries such as react-native-paper, restyle (by Shopify), etc.