React Native Custom Radio Button Group Component for Android iOS

Radio Buttons are graphical round shape elements that allows the application user to select only one single item from given multiple items. Radio Button groups is group of multiple radio buttons works in a singular way. When application user select radio button then all the other radio buttons will automatically de-selected, so app user can select one item at a time. In react native there is yet not a specific Custom Radio Button Group is available but using the custom NPM GitHub libraries we can easily make our own radio button groups. We are using the react-native-btr NPM library in our project. This library is awesome guys.

Contents in this project Create Custom Radio Button Group in React Native Example:

1. Open your react native project folder in Command Prompt or Terminal & execute below command to install the react-native-btr library in your project.

<br />
npm i react-native-btr –save

1	npm i react–native–btr —save

Screenshot of terminal:

2. Import StyleSheet, View, Platform and Text component in your project.

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, View, Platform, Text } from ‘react-native’;

import React, { Component } from ‘react’;

import { StyleSheet, View, Platform, Text } from ‘react-native’;

3. Import RadioGroup component from react-native-btr library.

<br />
import { RadioGroup } from ‘react-native-btr’;

1	import { RadioGroup } from ‘react-native-btr’;

4. Create constructor() method in your project and in the constructor make a State array named as radioButtons with 3 objects. Each object will make an individual radio button.

label : Define the radio button name which shows on screen.

value : Define which value app user wants to access on selection of radio button.

checked : Supports true and false Boolean type values. If you set true then it will by default active the current radio button.

color : Color of radio button label text.

disabled : To disable the current radio button, User won’t be able to select.

flexDirection : Supports all default flex direction values.

size : Size of Radio button.

<br />
constructor() {</p>
<p>    super();</p>
<p>    this.state = {</p>
<p>      radioButtons: [<br />
        {<br />
          label: ‘Apple’,<br />
          value: ‘Apple’,<br />
          checked: true,<br />
          color: ‘#F44336’,<br />
          disabled: false,<br />
          flexDirection: ‘row’,<br />
          size: 11</p>
<p>        },</p>
<p>        {<br />
          label: ‘Mango’,<br />
          value: ‘Mango’,<br />
          checked: false,<br />
          color: ‘#FF8F00’,<br />
          disabled: false,<br />
          flexDirection: ‘row’,<br />
          size: 11</p>
<p>        },</p>
<p>        {<br />
          label: ‘Banana’,<br />
          value: ‘Banana’,<br />
          checked: false,<br />
          color: ‘#1B5E20’,<br />
          disabled: false,<br />
          flexDirection: ‘row’,<br />
          size: 11</p>
<p>        }</p>
<p>      ]</p>
<p>    }</p>
<p>  }

constructor() {

super();

this.state = {

radioButtons: [

{

label: ‘Apple’,

value: ‘Apple’,

checked: true,

color: ‘#F44336’,

disabled: false,

flexDirection: ‘row’,

size: 11

{

label: ‘Mango’,

value: ‘Mango’,

checked: false,

color: ‘#FF8F00’,

disabled: false,

flexDirection: ‘row’,

size: 11

{

label: ‘Banana’,

value: ‘Banana’,

checked: false,

color: ‘#1B5E20’,

disabled: false,

flexDirection: ‘row’,

size: 11

}

]

}

5. Creating a selectedItem variable in render’s block. We would use the JavaScript’s .find() method to find the true value of checked and after finding the true value object it will store the selected radio button value in variable.

<br />
 let selectedItem = this.state.radioButtons.find(e => e.checked == true);<br />
 selectedItem = selectedItem ? selectedItem.value : this.state.radioButtons[0].value;

1 2	let selectedItem = this.state.radioButtons.find(e => e.checked == true); selectedItem = selectedItem ? selectedItem.value : this.state.radioButtons[0].value;

6. Create the RadioGroup component in render’s return block with 1 Text component.

color : Used to set the color of Radio button.

labelStyle : Supports all text styles.

onPress : Updating the complete state value.

<br />
render() {</p>
<p>    let selectedItem = this.state.radioButtons.find(e => e.checked == true);<br />
    selectedItem = selectedItem ? selectedItem.value : this.state.radioButtons[0].value;</p>
<p>    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>        <RadioGroup<br />
          color=’#0277BD’<br />
          labelStyle={{ fontSize: 14, }}<br />
          radioButtons={this.state.radioButtons}<br />
          onPress={radioButtons => this.setState({ radioButtons })}<br />
          style={{ paddingTop: 20 }}<br />
        /></p>
<p>        <View style={styles.selectedItemView}></p>
<p>          <Text style={styles.selectedText}>Selected Item: {selectedItem}</Text></p>
<p>        </View></p>
<p>      </View><br />
    );<br />
  }

render() {

let selectedItem = this.state.radioButtons.find(e => e.checked == true);

selectedItem = selectedItem ? selectedItem.value : this.state.radioButtons[0].value;

return (

<RadioGroup

color=‘#0277BD’

labelStyle={{ fontSize: 14, }}

radioButtons={this.state.radioButtons}

onPress={radioButtons => this.setState({ radioButtons })}

style={{ paddingTop: 20 }}

<Text style={styles.selectedText}>Selected Item: {selectedItem}</Text>

</View>

);

}

7. Create style.

<br />
const styles = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    backgroundColor: ‘#FFF8E1’,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
    paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,</p>
<p>  },</p>
<p>  selectedItemView:<br />
    {<br />
        position: ‘absolute’,<br />
        left: 0,<br />
        right: 0,<br />
        bottom: 0,<br />
        padding: 14,<br />
        backgroundColor: ‘#263238’,<br />
        justifyContent: ‘center’,<br />
        alignItems: ‘center’<br />
    },</p>
<p>    selectedText:<br />
    {<br />
        fontSize: 17,<br />
        color: ‘#fff’<br />
    }<br />
});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

backgroundColor: ‘#FFF8E1’,

justifyContent: ‘center’,

alignItems: ‘center’,

paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,

selectedItemView:

{

position: ‘absolute’,

left: 0,

right: 0,

bottom: 0,

padding: 14,

backgroundColor: ‘#263238’,

justifyContent: ‘center’,

alignItems: ‘center’

selectedText:

{

fontSize: 17,

color: ‘#fff’

}

});

8. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, View, Platform, Text } from ‘react-native’;</p>
<p>import { RadioGroup } from ‘react-native-btr’;</p>
<p>export default class App extends Component<{}> {</p>
<p>  constructor() {</p>
<p>    super();</p>
<p>    this.state = {</p>
<p>      radioButtons: [<br />
        {<br />
          label: ‘Apple’,<br />
          value: ‘Apple’,<br />
          checked: true,<br />
          color: ‘#F44336’,<br />
          disabled: false,<br />
          flexDirection: ‘row’,<br />
          size: 11</p>
<p>        },</p>
<p>        {<br />
          label: ‘Mango’,<br />
          value: ‘Mango’,<br />
          checked: false,<br />
          color: ‘#FF8F00’,<br />
          disabled: false,<br />
          flexDirection: ‘row’,<br />
          size: 11</p>
<p>        },</p>
<p>        {<br />
          label: ‘Banana’,<br />
          value: ‘Banana’,<br />
          checked: false,<br />
          color: ‘#1B5E20’,<br />
          disabled: false,<br />
          flexDirection: ‘row’,<br />
          size: 11</p>
<p>        }</p>
<p>      ]</p>
<p>    }</p>
<p>  }</p>
<p>  render() {</p>
<p>    let selectedItem = this.state.radioButtons.find(e => e.checked == true);<br />
    selectedItem = selectedItem ? selectedItem.value : this.state.radioButtons[0].value;</p>
<p>    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>        <RadioGroup<br />
          color=’#0277BD’<br />
          labelStyle={{ fontSize: 14, }}<br />
          radioButtons={this.state.radioButtons}<br />
          onPress={radioButtons => this.setState({ radioButtons })}<br />
          style={{ paddingTop: 20 }}<br />
        /></p>
<p>        <View style={styles.selectedItemView}></p>
<p>          <Text style={styles.selectedText}>Selected Item: {selectedItem}</Text></p>
<p>        </View></p>
<p>      </View><br />
    );<br />
  }<br />
}</p>
<p>const styles = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    backgroundColor: ‘#FFF8E1’,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
    paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,</p>
<p>  },</p>
<p>  selectedItemView:<br />
    {<br />
        position: ‘absolute’,<br />
        left: 0,<br />
        right: 0,<br />
        bottom: 0,<br />
        padding: 14,<br />
        backgroundColor: ‘#263238’,<br />
        justifyContent: ‘center’,<br />
        alignItems: ‘center’<br />
    },</p>
<p>    selectedText:<br />
    {<br />
        fontSize: 17,<br />
        color: ‘#fff’<br />
    }<br />
});

100

101

102

103

104

105

106

107

108

109

110

111

import React, { Component } from ‘react’;

import { StyleSheet, View, Platform, Text } from ‘react-native’;

import { RadioGroup } from ‘react-native-btr’;

export default class App extends Component<{}> {

constructor() {

super();

this.state = {

radioButtons: [

{

label: ‘Apple’,

value: ‘Apple’,

checked: true,

color: ‘#F44336’,

disabled: false,

flexDirection: ‘row’,

size: 11

{

label: ‘Mango’,

value: ‘Mango’,

checked: false,

color: ‘#FF8F00’,

disabled: false,

flexDirection: ‘row’,

size: 11

{

label: ‘Banana’,

value: ‘Banana’,

checked: false,

color: ‘#1B5E20’,

disabled: false,

flexDirection: ‘row’,

size: 11

}

]

}

render() {

let selectedItem = this.state.radioButtons.find(e => e.checked == true);

selectedItem = selectedItem ? selectedItem.value : this.state.radioButtons[0].value;

return (

<RadioGroup

color=‘#0277BD’

labelStyle={{ fontSize: 14, }}

radioButtons={this.state.radioButtons}

onPress={radioButtons => this.setState({ radioButtons })}

style={{ paddingTop: 20 }}

<Text style={styles.selectedText}>Selected Item: {selectedItem}</Text>

</View>

);

}

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

backgroundColor: ‘#FFF8E1’,

justifyContent: ‘center’,

alignItems: ‘center’,

paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,

selectedItemView:

{

position: ‘absolute’,

left: 0,

right: 0,

bottom: 0,

padding: 14,

backgroundColor: ‘#263238’,

justifyContent: ‘center’,

alignItems: ‘center’

selectedText:

{

fontSize: 17,

color: ‘#fff’

}

});

Screenshots :

React Native Custom Radio Button Group Component for Android iOS

Contents in this project Create Custom Radio Button Group in React Native Example:

Also Read :

Recent Posts

Search Here