react-native-simple-radio-buttons

React Native simple radio buttons is small size but brief and easy to use package. You can use with default properties and even you can fully customise with your requirements.

Authors

• Arif Yousaf (Mauk)

Badges

Installation

Install react-native-simple-radio-buttons with npm or yarn

1npm i react-native-simple-radio-buttons

Or

1yarn add react-native-simple-radio-buttons

---

Props

Props	type	description
items	[{}]	this array of objects will contain details for radio buttons, e.g. [{label: 'Male', 'male'},{label: 'female', 'female'}]
value	string	this will be the selected radio button, if you want to show initially unselected all, then initialize will empty string etc
setValue	useState	used to update the value
withLabels	boolean	show labels with radio button, e.g. true, to show labels
buttonOuterColor	color	default color is black, pass your required color
buttonOuterSize	integer	size for radio button outer, e.g. 30,35
defaultButtonColor	color	unselected radio button color property, default color is black, if you described the buttonOuterColor, than this will be buttonOuterColor, else you can specify with your required color
buttonInnerColor	color	default color is black, pass your required color
buttonInnerSize	integer	size for radio button inner, e.g. 25,30
radioFormStyle	ViewStyleProps	you can fully customize using radioFormStyle, e.g. flexDirection: 'row' see examples
radioButtonItemStyle	ViewStyleProps	custom style for each radio buttom item, e.g. each row or each column.
radioButtonLabelStyle	TextStyleProps	custome style for radio button labels, e.g. fontSize, color etc.
onPress	function	if you want to perform some extra task on each radio button select, you can define the onPress

Usage/Examples

1import RadioForm from 'react-native-simple-radio-buttons';
2
3function App() {
4  const [value, setValue] = useState("")
5  const [items,setItems] = useState([
6    {label: 'test1', value: 'test1'},
7    ...,
8    {label: 'test8', value: 'test8'}
9  ])
10  return (
11    <RadioForm
12      items={items} 
13      value={value} 
14      setValue={setValue}
15      withLabels={true}
16   />
17   )
18}

Output

Usage/Examples

1import RadioForm from 'react-native-simple-radio-buttons';
2
3function App() {
4  const [value, setValue] = useState("")
5  const [items,setItems] = useState([
6    {label: 'test1', value: 'test1'},
7    ...,
8    {label: 'test8', value: 'test8'}
9  ])
10  return (
11    <RadioForm
12        items={items}
13        value={value}
14        setValue={setValue}
15        withLabels={true}
16        buttonOuterColor={'#008AD8'}
17        defaultButtonColor={'#00000050'}
18        buttonOuterSize={30}
19        buttonInnerColor={'#008AD8'}
20        buttonInnerSize={25}
21        radioFormStyle={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' }}
22        radioButtonItemStyle={{
23          backgroundColor: '#d3d3d3',
24          width: 80,
25          marginBottom: 10,
26        }}
27        radioButtonLabelStyle={{
28          fontSize: 16,
29          color: '#008AD8'
30        }}
31        onPress={() => {
32          console.log("clicked!")
33        }}
34   />
35   )
36}

1 <RadioForm
2        items={items}
3        value={value}
4        setValue={setValue}
5        withLabels={true}
6        buttonOuterColor={'#008AD8'}
7        defaultButtonColor={'#00000050'}
8        buttonOuterSize={30}
9        buttonInnerColor={'#008AD8'}
10        buttonInnerSize={25}
11        radioFormStyle={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' }}
12        radioButtonItemStyle={{
13          backgroundColor: '#d3d3d3',
14          width: 80,
15          marginBottom: 10,
16          flexDirection: 'column'
17        }}
18        radioButtonLabelStyle={{
19          fontSize: 16,
20          color: '#008AD8'
21        }}
22        onPress={() => {
23          console.log("clicked!")
24        }}
25
26      />

1  items={items}
2        value={value}
3        setValue={setValue}
4        withLabels={true}
5        buttonOuterColor={'#008AD8'}
6        defaultButtonColor={'#00000050'}
7        buttonOuterSize={30}
8        buttonInnerColor={'#008AD8'}
9        buttonInnerSize={25}
10        radioFormStyle={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' }}
11        radioButtonItemStyle={{
12          backgroundColor: '#d3d3d3',
13          width: 190,
14          marginBottom: 10,
15        }}
16        radioButtonLabelStyle={{
17          fontSize: 16,
18          color: '#008AD8'
19        }}
20        onPress={() => {
21          console.log("clicked!")
22        }}
23
24      />

License

MIT

Support

For support, follow me on LinkedIn [https://www.linkedin.com/in/arif-yousaf-mauk-19a548166/] or github.