How to implement radio button in React Native

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>  );}

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>        )      })    );  }

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