React Native Radio Button Group

Radio Button Group in React Native

Radio Buttons are graphical round shape elements which allow to select items

Radio Button group enables to select one item from a group of multiple radio buttons

react-native-btr package can be used for adding radio button group to an application

Creating new React Native App

Check React Native Installation for installation related info

Use react-native init command to create a new React Native project (here named RadioBtnApp)

react-native init RadioBtnApp

This creates a directory named RadioBtnApp and initializes it as a react native application directory

This can be skipped in case an existing react native project is being integrated into

Dependency

Go to project directory (here RadioBtnApp)

cd RadioBtnApp

Add react-native-btr package to current project using yarn

yarn add react-native-btr

or using npm

npm install react-native-btr --save

iOS

After adding dependency, cd into ios folder inside project directory

cd ios

Use pod command to install any required CocoaPods dependencies:

pod install

Usage

react-native-btr module provides a RadioGroup component

<RadioGroup
  color='#1437B5'
  labelStyle={{ fontSize: 14, }}
  radioButtons={this.state.radioButtons}
  onPress={radioButtons => this.setState({ radioButtons })}
  style={{ paddingTop: 90 }}
/>

It has radioButtons prop which requires an array of RadioButtons to be passed in Json format

Each radio button has a checked prop which indicates whether it is selected

onPress callback of RadioGroup returns the array where value of checked for the selected radio button is true

Props of a RadioButton

label : Label or name associated with radio button to be shown

value : some value associated with a radio button

checked : boolean, indicates the selected radio button for a particular state

color : Color of radio button label text

disabled : if set to true, a button is disabled for selection

flexDirection : decides whether group is displayed as row or column

size : Size of button

App Code

Following code declares a radio button group with corresponding radio buttons array declared as state in constructor

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: 'One',
          value: 'One',
          checked: true,
          color: '#D44336',
          disabled: false,
          flexDirection: 'row',
          size: 11
        },
        {
          label: 'Two',
          value: 'Two',
          checked: false,
          color: '#1D65F0',
          disabled: false,
          flexDirection: 'row',
          size: 11
        },
        {
          label: 'Three',
          value: 'Three',
          checked: false,
          color: '#1DC545',
          disabled: false,
          flexDirection: 'row',
          size: 11
        }
      ]
    }
  }

  render() {
    let selected = this.state.radioButtons.find(r => r.checked == true);
    selected = selected ? selected.value : this.state.radioButtons[0].value;

    return (
      <View style={styles.MainContainer}>
        <RadioGroup
          color='#1437B5'
          labelStyle={{ fontSize: 14, }}
          radioButtons={this.state.radioButtons}
          onPress={radioButtons => this.setState({ radioButtons })}
          style={{ paddingTop: 90 }}
        />
        <View style={styles.selectedItemView}>
          <Text style={styles.selectedText}>Selected Item: {selected}</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    backgroundColor: '#EEE4F5',
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
  },
  selectedItemView: {
      position: 'absolute',
      left: 0,
      right: 0,
      top: 0,
      padding: 12,
      backgroundColor: '#FF3264',
      justifyContent: 'center',
      alignItems: 'center'
  },
  selectedText: {
      fontSize: 16,
      color: '#fff'
  }
});

Run instructions

Running in Android

cd into project directory (here RadioBtnApp)

cd RadioBtnApp

Run metro server to serve js

react-native start

Go to project directory in another terminal tab

Enter following run command for Android:

react-native run-android

Running in ios

cd into project directory (here RadioBtnApp)

cd RadioBtnApp

Enter following command :

react-native run-ios

This might take some time

If the app shows error about metro server not configured (check Running an App in iOS), then run metro server in another tab:

react-native start

Reload the app

Re-run react-native run-ios command if reloading doesn't work