Knowledge Base (Radio Button Component)

Please review knowledge base, if you cannot find the answer you are looking for? Reach out to our support team by opening forum thread.

1. 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}>
        label="Option 1"
      {/* Add more CustomRadioButton components with different configurations as needed */}

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 = ({
  enabled = true,
  buttonColor = '#3498db',
  selectedButtonColor = '#2ecc71',
  labelColor = '#000',
}) => {
  const [isSelected, setSelected] = useState(false);

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

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

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;