How to implement radio button in React Native

Question

I am converting React code to React Native. So I need to implement radio buttons.

Answer 1

Maybe you could style into a circle button such as a radio button or something:

const period = [
      {
        key: 1,
        name : '1 Month',
        value : 1,

      },
      {
        key : 2,
        name : '12 Month',
        value : 12,

      }
    ];

    constructor(props) {
        super(props);
        this.state = {
          value: 0,
        };
      }

    onChangeTabs = (tabs) => {

        this.setState({
          value : tabs,

        })

      }

    renderTabs = () => {
        return period.map(item => (
          <TouchableWithoutFeedback
            key={item.key}
            value={item.value}
            onPress={this.onChangeTabs.bind(this, item.value)}
          >
            <View style={this.state.value == item.value ? styles.periodActive : styles.period}>
              <Text style={styles.periodText}>{item.name}</Text>
            </View>
          </TouchableWithoutFeedback>
        ));
      };


    const styles = StyleSheet.create({
    period: {
        borderRadius: 5,
        borderColor: '#fff',
        borderWidth: 1,

        marginHorizontal: 5,
      },
      periodActive: {
        backgroundColor: '#333',
      },
    });

Answer 2

This is another way of creating radioButtons (Source, thanks to php step by step channel)

Method 1

constructor(props) {
    super(props);
    this.state = {
        radioBtnsData: ['Item1', 'Item2', 'Item3'],
        checked: 0
    }
}

---

import { View, TextInput, TouchableOpacity } from 'react-native';

{this.state.radioBtnsData.map((data, key) => {
    return (
        <View key={key}>
            {this.state.checked == key ?
                <TouchableOpacity style={styles.btn}>
                    <Image style={styles.img} source={require("./img/rb_selected.png")}/>
                    <Text>{data}</Text>
                </TouchableOpacity>
                :
                <TouchableOpacity onPress={()=>{this.setState({checked: key})}} style={styles.btn}>
                    <Image style={styles.img} source={require("./img/rb_unselected.png")} />
                    <Text>{data}</Text>
                </TouchableOpacity>
            }
        </View>
    )
})}

---

const styles = StyleSheet.create({
    img:{
        height:20,
        width: 20
    },
    btn:{
        flexDirection: 'row'
    }
});

Place below images in img folder

Method 2

Elaborated LaneRettig ex for new developers

Thanks to Lane Rettig

constructor(props){
    super(props);
    this.state = {
      radioSelected: 1
    }
  }


  radioClick(id) {
    this.setState({
      radioSelected: id
    })
  }

  render() {

    const products = [{
      id: 1
    },
    {
      id: 2
    },
    {
      id: 3
    }];

    return (
      products.map((val) => {
        return (
          <TouchableOpacity key={val.id} onPress={this.radioClick.bind(this, val.id)}>
            <View style={{
              height: 24,
              width: 24,
              borderRadius: 12,
              borderWidth: 2,
              borderColor: '#000',
              alignItems: 'center',
              justifyContent: 'center',
            }}>
              {
                val.id == this.state.radioSelected ?
                  <View style={{
                    height: 12,
                    width: 12,
                    borderRadius: 6,
                    backgroundColor: '#000',
                  }} />
                  : null
              }
            </View>
          </TouchableOpacity>
        )
      })
    );
  }

Answer 3

import RadioForm, { RadioButton, RadioButtonInput, RadioButtonLabel } from 'react-native-simple-radio-button';
const radioProps = [
  { label: 'Male', value: false },
  { label: 'Female, value: true }
];



<View style={{ marginTop: 30 }}>
                <RadioForm
                  buttonColor={gray}
                  buttonSize={12}
                  radioStyle={{paddingTop:25}}
                  selectedButtonColor="#000000"
                  radio_props={radioProps}
                  initial={0}
                  animation={false}
                  onPress={(value) => setGender(value)}
                />
              </View>

Answer 4

There is a react-native component called react-native-radio-buttons that may do some of what you need:

Answer 5

I use Checkbox in react-native for creating the radio button. Please refer below code.

constructor(props){
    super(props);
    this.state = {radioButton:'value1'};
}
render(){
    return(
        <View>
            <CheckBox 
                title='value1'
                checkedIcon='dot-circle-o'
                uncheckedIcon='circle-o'
                checked={this.state.radioButton === 'value1'}
                onPress={() => this.setState({radioButton: 'value1'})}
                ></CheckBox>
            <CheckBox 
                title='value2'
                checkedIcon='dot-circle-o'
                uncheckedIcon='circle-o'
                checked={this.state.radioButton === 'value2'}
                onPress={() => this.setState({radioButton: 'value2'})}
                ></CheckBox> 
            <CheckBox 
                title='value3'
                checkedIcon='dot-circle-o'
                uncheckedIcon='circle-o'
                checked={this.state.radioButton === 'value3'}
                onPress={() => this.setState({radioButton: 'value3'})}
                ></CheckBox> 
            <CheckBox 
                title='value4'
                checkedIcon='dot-circle-o'
                uncheckedIcon='circle-o'
                checked={this.state.radioButton === 'value4'}
                onPress={() => this.setState({radioButton: 'value4'})}
                ></CheckBox> 
            <CheckBox 
                title='value5'
                checkedIcon='dot-circle-o'
                uncheckedIcon='circle-o'
                checked={this.state.radioButton === 'value5'}
                onPress={() => this.setState({radioButton: 'value5'})}
                ></CheckBox>  

        </View>
    );
}

Answer 6

You can mimic a radio button really easily using just barebones RN. Here's one simple implementation which I use. Tweak size, colors etc. as you like. It looks like this (with a different tint, and some text). Add TouchableOpacity on top to turn it into a button that does something.

function RadioButton(props) {
  return (
      <View style={[{
        height: 24,
        width: 24,
        borderRadius: 12,
        borderWidth: 2,
        borderColor: '#000',
        alignItems: 'center',
        justifyContent: 'center',
      }, props.style]}>
        {
          props.selected ?
            <View style={{
              height: 12,
              width: 12,
              borderRadius: 6,
              backgroundColor: '#000',
            }}/>
            : null
        }
      </View>
  );
}