sfm-uikit-react-native/src/commonClass/RadioButton.js

It is a react native component for SmartFloMeet users.

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

export default class RadioButton extends Component {
  _renderCheckedView = () => {
    const { isChecked } = this.props;
    return isChecked ? (
      <View style={[styles.radioButtonIconInnerIcon]} />
    ) : null;
  };

  render() {
    const { isChecked, text, onRadioButtonPress } = this.props;
    return (
      <TouchableOpacity style={styles.mainContainer} onPress={onRadioButtonPress}>
        <View style={[styles.radioButtonIcon]}>{this._renderCheckedView()}</View>
        <View style={styles.radioButtonTextContainer}>
          <Text style={styles.radioButtonText}>{text}</Text>
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  mainContainer: {
    height: 50,
    marginTop: 5,
    marginBottom: 5,
    marginLeft: 10,
    marginRight: 10,
    justifyContent: "center",
    paddingLeft: 10,
    paddingRight: 10,
    flexDirection: "row",
    alignItems: "center",
  },
  radioButtonIcon: {
    backgroundColor: "white",
    borderWidth: 3,
    borderColor: "#e60073",
    height: 30,
    width: 30,
    borderRadius: 30 / 2,
    marginRight: 10,
    alignItems: "center",
    justifyContent: "center",
  },
  radioButtonIconInnerIcon: {
    height: 25,
    width: 25,
    backgroundColor: "#e60073",
    borderRadius: 25 / 2,
    borderWidth: 3,
    borderColor: "white",
  },
  radioButtonTextContainer: {
    flex: 1,
    justifyContent: "center",
    paddingLeft: 10,
  },
  radioButtonText: {
    fontSize: 18,
    color: "black",
  },
});