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.

enter image description here

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

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)