Sunday, June 9, 2019

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.

React native Create Custom Radio Button Component


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 :
React native Create Custom Radio Button Component

React native Create Custom Radio Button Component

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.

2 comments:

  1. How can i add some with different items? Thanks.

    ReplyDelete
    Replies
    1. You need to add items in state variable and then you can see the change.

      Delete