Mastering UX: Building Dynamic Radio Buttons React Native

1. Component Structure:

   • The component is created using the React and useState from 'react' and basic UI elements like View, Text, and TouchableOpacity from 'react-native'.
   • It maintains the state of the radio button using the useState hook.

2. Properties:

   • The component accepts several properties for customization:
     • label: The text label displayed next to the radio button.
     • enabled: A boolean indicating whether the radio button is enabled or disabled. Defaults to true.
     • buttonColor: The color of the radio button.
     • selectedButtonColor: The color of the radio button when it's selected.
     • labelColor: The color of the label text.
     • onValueChange: A callback function triggered when the radio button value changes.

3. Event Handling:

   • The handlePress function is invoked when the TouchableOpacity is pressed.
   • It checks if the radio button is enabled before updating its state and triggering the onValueChange callback.

4. Styling:

   • The component is styled using the StyleSheet.create method.
   • The radio button container has a row layout and margin at the bottom.
   • The actual radio button is a circle with rounded corners, and its background color changes based on its state.

5. Usage:

   • The component is then used in a parent component, where you can customize its appearance and behavior by passing the desired properties.
   • An example usage is provided in a hypothetical app where the component is used to select options, and a callback logs the radio button value.

6. Customization:

   • Developers can easily customize the component by adjusting the styles or extending the properties based on their specific requirements.

7. Benefits:

   • The component provides a simple and intuitive way to integrate customizable radio buttons into React Native applications.
   • It enhances user interaction by allowing developers to control the radio button's appearance and behavior.

8. Flexibility:

   • Developers can integrate multiple instances of the Custom RadioButton component with different configurations based on their application's needs.

// App.js

import React from 'react';
import { View, StyleSheet } from 'react-native';
import CustomRadioButton from './CustomRadioButton'; // Adjust the import path based on your project structure

const App = () => {
  const handleRadioButtonChange = (value) => {
    console.log('RadioButton value:', value);
  };

  return (
    <View style={styles.container}>
      <CustomRadioButton
        label="Option 1"
        enabled={true}
        buttonColor="#3498db"
        selectedButtonColor="#2ecc71"
        labelColor="#000"
        onValueChange={handleRadioButtonChange}
      />
      {/* Add more CustomRadioButton components with different configurations as needed */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
});

export default App;

This component allows you to create customizable RadioButtons in your React Native application. You can use it by passing properties such as label, enabled, buttonColor, selectedButtonColor, labelColor, and onValueChange.

// CustomRadioButton.js

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

const CustomRadioButton = ({
  label,
  enabled = true,
  buttonColor = '#3498db',
  selectedButtonColor = '#2ecc71',
  labelColor = '#000',
  onValueChange,
}) => {
  const [isSelected, setSelected] = useState(false);

  const handlePress = () => {
    if (enabled) {
      const newValue = !isSelected;
      setSelected(newValue);
      onValueChange && onValueChange(newValue);
    }
  };

  return (
    <TouchableOpacity onPress={handlePress} activeOpacity={0.8} disabled={!enabled}>
      <View style={styles.radioButtonContainer}>
        <View
          style={[
            styles.radioButton,
            { backgroundColor: isSelected ? selectedButtonColor : buttonColor },
          ]}
        />
        <Text style={[styles.label, { color: labelColor }]}>{label}</Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  radioButtonContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  radioButton: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 2,
    marginRight: 5,
  },
  label: {
    fontSize: 16,
  },
});

export default CustomRadioButton;