rn-awesome-radio-button

A simple, customizable, and animated radio button component for React Native.

✨ Features

• Smooth animation using Reanimated
• Fully customizable size, color, label, and style
• Lightweight and accessible

📦 Installation

1npm install rn-awesome-radio-button
2# or
3yarn add rn-awesome-radio-button

Then install and setup the required peer dependencies:

1npm install react-native-reanimated

---

🚀 Usage

1import React, { useState } from "react";
2import { View } from "react-native";
3import RadioButton from "rn-awesome-radio-button";
4
5export default function App() {
6  const [value, setValue] = useState("male");
7
8  return (
9    <View style={{ padding: 20 }}>
10      <RadioButton
11        label="Male"
12        value="male"
13        activeValue={value}
14        onChange={() => {
15          setValue("male");
16        }}
17      />
18      <RadioButton
19        label="Female"
20        value="female"
21        activeValue={value}
22        onChange={() => {
23          setValue("female");
24        }}
25      />
26    </View>
27  );
28}

---

🔧 Props

Prop	Type	Default	Description
label	string	undefined	The label to display next to the radio button.
value	string	required	The value of this radio button.
activeValue	string	required	The currently selected radio value.
onChange	(newValue: string) => void	required	Callback when the radio button is selected.
labelStyle	StyleProp<TextStyle>	undefined	Custom style for the label text.
radioContainerStyle	StyleProp<ViewStyle>	undefined	Custom style for the outer radio circle.
containerStyle	StyleProp<ViewStyle>	undefined	Style for the wrapper container.
color	string	#555	Color for the border and the filled dot.
customDotSize	number	10	Diameter of the animated inner dot when active.

---

📚 Contributing

Issues and pull requests are welcome! Please open an issue first to discuss major changes.

Made with ❤️ by Dhia Ben Hamouda