React native Create Custom Radio Button Component

This tutorial explains how to create custom radio button component in react native application. A radio button or option button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options.Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time.

Create Radio Button In React Native : 

In this example we have created two component. First component is responsible to create design for custom radio button and other component is responsible to manage custom radio buttons selected / unselected state and show and update selected item’s value in Text  component. Lets see the below example to build more understanding on this.

Project Structure : 

Lets see the below source code for RadioButton component in react native.

RadioButton.js

import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';


export default class RadioButton extends Component {
    constructor() {
        super();
    }

    render() {
        return (
            <TouchableOpacity onPress={this.props.onClick} activeOpacity={0.8} style={styles.radioButton}>
                <View style={[styles.radioButtonHolder, { height: this.props.button.size, width: this.props.button.size, borderColor: this.props.button.color }]}>
                    {
                        (this.props.button.selected)
                            ?
                            (<View style={[styles.radioIcon, { height: this.props.button.size / 2, width: this.props.button.size / 2, backgroundColor: this.props.button.color }]}></View>)
                            :
                            null
                    }
                </View>
                <Text style={[styles.label, { color: this.props.button.color }]}>{this.props.button.label}</Text>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    radioButton: {
        flexDirection: 'row',
        margin: 10,
        alignItems: 'center',
        justifyContent: 'center'
    },
    radioButtonHolder: {
        borderRadius: 50,
        borderWidth: 2,
        justifyContent: 'center',
        alignItems: 'center'
    },
    radioIcon: {
        borderRadius: 50,
        justifyContent: 'center',
        alignItems: 'center'
    },
    label: {
        marginLeft: 10,
        fontSize: 20
    },

});

Lets see the complete source code for App component.

App.js

import React, { Component } from 'react';
import { AppRegistry, Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import RadioButton  from "./src/components/RadioButton.js"

export default class App extends Component {

  constructor() {
    super();

    this.state = {
      radioItems:
        [
          {
            label: 'Radio Button #1',
            size: 30,
            color: '#636c72',
            selected: false
          },

          {
            label: 'Radio Button #2',
            color: '#0275d8',
            size: 35,
            selected: true,
          },

          {
            label: 'Radio Button #3',
            size: 40,
            color: '#5cb85c',
            selected: false
          },

          {
            label: 'Radio Button #4',
            size: 45,
            color: '#d9534f',
            selected: false
          }
        ], selectedItem: ''
    }
  }

  componentDidMount() {
    this.state.radioItems.map((item) => {
      if (item.selected == true) {
        this.setState({ selectedItem: item.label });
      }
    });
  }

  changeActiveRadioButton(index) {
    this.state.radioItems.map((item) => {
      item.selected = false;
    });

    this.state.radioItems[index].selected = true;

    this.setState({ radioItems: this.state.radioItems }, () => {
      this.setState({ selectedItem: this.state.radioItems[index].label });
    });
  }

  render() {
    return (
      <View style={[styles.container, { backgroundColor: this.state.ColorHolder }]} >

        {
          this.state.radioItems.map((item, key) =>
            (
              <RadioButton key={key} button={item} onClick={this.changeActiveRadioButton.bind(this, key)} />
            ))
        }
        <View style={styles.selectedTextHolder}>
          <Text style={styles.selectedText}>Selected Item: {this.state.selectedItem}</Text>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: "center",

    },
    selectedTextHolder: {
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0,
      padding: 15,
      backgroundColor: 'rgba(0,0,0,0.6)',
      justifyContent: 'center',
      alignItems: 'center'
    },
    selectedText: {
      fontSize: 18,
      color: 'white'
    }
  });

Screenshot :

This is all about React native Create Custom Radio Button Component. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.