react-native-radio-buttonx

Create radio buttons with a range of styles and customize the radio button selector using your own custom component. This package is perfect for developers who need to create visually appealing and interactive radio buttons in their mobile applications

Installation

1npm install react-native-radio-buttonx

Usage

1import { StyleSheet, Text, View, Image } from 'react-native';
2import { useState } from 'react';
3import { RadioButtons } from 'react-native-radio-buttonx';
4
5
6const foo = () => {
7  return (
8    <Image source={require('./assets/favicon.png')}  style={{width: 12, height: 12}}/>
9    //<Text>✅</Text>
10  )
11}
12
13export default function App() {
14
15  const [selectedOption, setSelectedOption] = useState('Apple');
16  
17  const handleSelect = (option: string) => {
18    setSelectedOption(option);
19  };
20
21  return (
22    <View style={styles.container}>
23      <Text style={{marginBottom: 40}}>Selected: {selectedOption}</Text>
24      
25      <RadioButtons
26          gap={19}
27          options={['Apple','Orange','Banana']}
28          selectedOption={selectedOption}
29          onSelect={handleSelect}
30          styleOptions={styleOptions}
31          //SelectorComponent={foo}
32
33          />
34
35    </View>
36  );
37}
38
39const styles = StyleSheet.create({
40  container: {
41    flex: 1,
42    backgroundColor: '#fff',
43    alignItems: 'center',
44    justifyContent: 'center',
45  },
46});
47
48
49const styleOptions = {
50  rounded: true,
51  radio: 20,
52  display: 'column',
53  //defaultColor: 'gray',
54  //selectedColor: 'brown',
55  //fontWeight: 'bold',
56  //fontSize: 20,
57  //fontStyle: 'italic',
58  //color: 'brown'
59}
60// ...

Props

The RadioButtons component accepts the following props:

Property	Type	Required	Description
options	Array<string>	Yes	An array of options to be displayed as radio buttons
selectedOption	string	Yes	The currently selected option
onSelect	(option: string) => void	Yes	A function to be called when an option is selected
gap	number	No	The gap between the radio buttons
styleOptions	StyleOptions	No	An object containing style options for the radio buttons
SelectorComponent	React.ComponentType	No	A custom component to be used as the selector for the radio buttons

The StyleOptions type is defined as follows:

1type StyleOptions = {
2  rounded?: boolean;
3  radio?: number;
4  display?: 'row' | 'column';
5  defaultColor?: string;
6  selectedColor?: string;
7  fontWeight?: string;
8  fontSize?: number;
9  fontStyle?: 'normal' | 'italic' | 'oblique';
10  color?: string;
11};

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

If you find this project helpful, please consider buying me a coffee.

License

MIT

---

Made with :heart: by Énio Carlos