React Native Radio Buttons

A highly customizable and elegant radio button library for React Native applications. This library provides both single radio buttons and radio groups with extensive customization options.

Table of Contents

• Installation
• Features
• Components
  • RadioButton
  • RadioGroup
• Examples
  • Basic Usage
  • Advanced Customization
  • Real-world Examples
• API Reference
• Contributing
• License

Installation

1# Using npm
2npm install rn-radio-buttons
3
4# Using yarn
5yarn add rn-radio-buttons

Features

• 🎨 Highly customizable appearance
• 📱 Native performance
• 🔄 Controlled and uncontrolled components
• ↕️ Vertical and horizontal layouts
• 🎯 Flexible shape options (circle/square)
• 💫 Custom styling support
• ♿ Accessibility support
• 📦 Lightweight package
• 📱 Cross-platform support (iOS & Android)

Components

RadioButton

A single radio button component that can be used independently or as part of a RadioGroup.

Basic Usage

1import { RadioButton } from "rn-radio-buttons";
2
3const MyComponent = () => (
4  <RadioButton
5    selected={true}
6    onSelect={() => console.log("Selected!")}
7    size={24}
8    borderColor="#007AFF"
9  />
10);

Props

Prop	Type	Default	Description
selected	boolean	false	Whether the radio button is selected
size	number	24	Size of the radio button
borderWidth	number	2	Width of the border
borderColor	string	'#000'	Color of the border when unselected
selectedColor	string	'#000'	Color of the border when selected
backgroundColor	string	'transparent'	Background color when unselected
selectedBackgroundColor	string	'#000'	Background color when selected
shape	'circle' | 'square'	'circle'	Shape of the radio button
onSelect	function	-	Callback when radio button is pressed
disabled	boolean	false	Whether the radio button is disabled
style	ViewStyle	-	Additional styles for the container
innerStyle	ViewStyle	-	Additional styles for the inner circle/square

RadioGroup

A container component for multiple radio buttons with built-in state management.

Basic Usage

1import { RadioGroup } from "rn-radio-buttons";
2import { Text } from "react-native";
3
4const options = [
5  { label: <Text>Option 1</Text>, value: "1" },
6  { label: <Text>Option 2</Text>, value: "2" },
7  { label: <Text>Option 3</Text>, value: "3" },
8];
9
10const MyComponent = () => {
11  const [selected, setSelected] = useState("1");
12
13  return (
14    <RadioGroup
15      options={options}
16      value={selected}
17      onChange={setSelected}
18      vertical={true}
19    />
20  );
21};

Props

Prop	Type	Default	Description
options	Array	[]	Array of options to display
value	string	-	Currently selected value
onChange	function	-	Callback when selection changes
radioProps	RadioButtonProps	{}	Props to pass to all RadioButtons
containerStyle	ViewStyle	-	Additional styles for the container
vertical	boolean	false	Whether to display options vertically

Option Type

1interface Option {
2  label: React.ReactNode;
3  value: string;
4  radioProps?: RadioButtonProps; // Optional props for individual radio buttons
5}

Examples

Basic Usage

1import React, { useState } from "react";
2import { View, Text } from "react-native";
3import { RadioButton, RadioGroup } from "rn-radio-buttons";
4
5const BasicExample = () => {
6  // Single Radio Button
7  const [isSelected, setIsSelected] = useState(false);
8
9  return (
10    <RadioButton
11      selected={isSelected}
12      onSelect={() => setIsSelected(!isSelected)}
13      size={24}
14      borderColor="#007AFF"
15      selectedColor="#007AFF"
16    />
17  );
18};

Advanced Customization

1const CustomizedExample = () => {
2  const [selected, setSelected] = useState("1");
3
4  const options = [
5    {
6      label: <Text style={{ color: "#007AFF" }}>Premium</Text>,
7      value: "1",
8      radioProps: {
9        size: 28,
10        borderColor: "#007AFF",
11        selectedColor: "#007AFF",
12        shape: "square",
13      },
14    },
15    {
16      label: <Text style={{ color: "#34C759" }}>Standard</Text>,
17      value: "2",
18      radioProps: {
19        size: 28,
20        borderColor: "#34C759",
21        selectedColor: "#34C759",
22        shape: "square",
23      },
24    },
25  ];
26
27  return (
28    <RadioGroup
29      options={options}
30      value={selected}
31      onChange={setSelected}
32      vertical={true}
33      containerStyle={{ gap: 16 }}
34    />
35  );
36};

Real-world Examples

Form Input

1const FormExample = () => {
2  const [gender, setGender] = useState("");
3
4  const options = [
5    { label: <Text>Male</Text>, value: "male" },
6    { label: <Text>Female</Text>, value: "female" },
7    { label: <Text>Other</Text>, value: "other" },
8  ];
9
10  return (
11    <View style={styles.form}>
12      <Text style={styles.label}>Gender</Text>
13      <RadioGroup
14        options={options}
15        value={gender}
16        onChange={setGender}
17        radioProps={{
18          size: 20,
19          borderColor: "#666",
20          selectedColor: "#007AFF",
21          selectedBackgroundColor: "#E5F1FF",
22        }}
23        containerStyle={styles.radioGroup}
24      />
25    </View>
26  );
27};
28
29const styles = StyleSheet.create({
30  form: {
31    padding: 16,
32  },
33  label: {
34    fontSize: 16,
35    fontWeight: "600",
36    marginBottom: 8,
37  },
38  radioGroup: {
39    gap: 12,
40  },
41});

Custom Styling

1const StyledExample = () => (
2  <RadioButton
3    selected={true}
4    size={32}
5    borderWidth={3}
6    borderColor="#E5E5EA"
7    selectedColor="#007AFF"
8    backgroundColor="#F2F2F7"
9    selectedBackgroundColor="#E5F1FF"
10    shape="square"
11    style={{
12      marginHorizontal: 8,
13      shadowColor: "#000",
14      shadowOffset: { width: 0, height: 2 },
15      shadowOpacity: 0.1,
16      shadowRadius: 4,
17      elevation: 2,
18    }}
19    innerStyle={{
20      margin: 4,
21    }}
22  />
23);

Styling Guide

Theme Customization

1// Example of themed radio buttons
2const ThemedRadioExample = () => {
3  const theme = {
4    primary: "#007AFF",
5    background: "#FFFFFF",
6    border: "#E5E5EA",
7    text: "#000000",
8  };
9
10  const options = [
11    { label: <Text style={{ color: theme.text }}>Option 1</Text>, value: "1" },
12    { label: <Text style={{ color: theme.text }}>Option 2</Text>, value: "2" },
13  ];
14
15  return (
16    <RadioGroup
17      options={options}
18      value={selected}
19      onChange={setSelected}
20      radioProps={{
21        size: 24,
22        borderColor: theme.border,
23        selectedColor: theme.primary,
24        backgroundColor: theme.background,
25        selectedBackgroundColor: `${theme.primary}20`, // 20% opacity
26      }}
27    />
28  );
29};

Dark Mode Support

1const DarkModeExample = ({ isDarkMode }) => {
2  const theme = {
3    primary: isDarkMode ? "#0A84FF" : "#007AFF",
4    background: isDarkMode ? "#000000" : "#FFFFFF",
5    border: isDarkMode ? "#636366" : "#E5E5EA",
6    text: isDarkMode ? "#FFFFFF" : "#000000",
7  };
8
9  return (
10    <RadioButton
11      selected={true}
12      size={24}
13      borderColor={theme.border}
14      selectedColor={theme.primary}
15      backgroundColor={theme.background}
16      selectedBackgroundColor={`${theme.primary}20`}
17    />
18  );
19};

Best Practices

1. Accessibility

   • Always provide meaningful labels
   • Maintain minimum touch target size (44x44)
   • Use sufficient color contrast
   • Support screen readers

2. Performance

   • Memoize callbacks and options
   • Use React.memo for static radio buttons
   • Avoid unnecessary re-renders

3. UX Guidelines

   • Consistent sizing throughout your app
   • Clear visual feedback on interaction
   • Adequate spacing between options
   • Clear labeling and grouping

Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT License - see the LICENSE file for details

Support

Need help?

1. Check the documentation
2. Open an issue on GitHub
3. Contact via our support channels

---

Built with ❤️ for the React Native community.