react-native-ossd-radio-button/src/RadioButton/TouchableOption.js

Customizable React Native Radio Button

import React, { Component } from "react";
import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native";
import { vw, vh } from "../../helpers/viewport-units";
import PropTypes from 'prop-types';

// interface TouchableOptionProps {
//     /* 
//     option
//      */
//     option : any,
//     /* 
//     radio state 
//     */
//     radioState : number,
//     /* 
//     My key
//     */
//     myKey : number,
//     /* 
//     on text clicked
//      */
//     onTextClicked : (text : string, myKey : number) => any
// }



export class TouchableOption extends Component {

    constructor(props) {
        super(props)

        this.state = {
            clicked: false
        }
    }

    __optionClicked(text, myKey) {

        this.setState({ clicked: true })
        this.props.onTextClicked(text, myKey)
    }

    render() {
        return (
            <TouchableOpacity
                onPress={() => this.__optionClicked(this.props.option.text, this.props.myKey)}
                activeOpacity={1}
            >
                <View style={[
                    styles.containerOptions,
                    (this.props.myKey == this.props.radioState) ?
                        [{ backgroundColor: this.props.activeColor }]
                        :
                        [{ backgroundColor: this.props.defaultColor }],
                    {
                        width: this.props.width,
                        height: this.props.height,
                        flex: this.props.flex
                    }
                ]}>
                    {
                        this.props.imageShow ?
                            <View style={styles.containerIcon}>
                                <Image
                                    source={this.props.option.iconUrl}
                                    style={[{ width: vh(4), height: vh(4) }]}
                                    resizeMode="contain"
                                    tintColor={this.props.imageColor}
                                />
                            </View>
                            :
                            null
                    }

                    <View style={styles.containerText}>
                        <Text style={[
                            styles.text,
                            {
                                fontSize: vw(3.7) * ((this.props.height / vh(10))),
                                color: this.props.textColor
                            }
                        ]}>
                            {this.props.option.text}
                        </Text>

                    </View>
                </View>

            </TouchableOpacity>
        )
    }
}

TouchableOption.propTypes = {
    imageShow: PropTypes.bool,
    height: PropTypes.number,
    width: PropTypes.number,
    flex: PropTypes.number,
    activeColor: PropTypes.string,
    defaultColor: PropTypes.string,
    textColor: PropTypes.string,
    imageColor : PropTypes.string

}

TouchableOption.defaultProps = {
    imageShow: true,
    height: vh(10),
    width: vw(100),
    flex: 0,
    activeColor: '#FFEDEB',
    defaultColor: 'white',
    textColor: "black",
    imageColor : "black"

}


const styles = StyleSheet.create({
    containerIcon: {
        flex: 2,
        alignItems: 'center',
        justifyContent: 'center'
    },
    containerText: {
        flex: 10,
        color: "#292929",
        justifyContent: "center",
    },
    containerOptions: {
        height: vh(10),
        paddingHorizontal: vw(5),
        flexDirection: 'row'
    },
    text: {
        color: "#262626",
        fontSize: vw(3.7)
    },
    containerTextInput: {
        alignItems: 'center'
    },
    textInput: {
        width: '90%',
        fontSize: vw(3.7),
        backgroundColor: "white",
        paddingHorizontal: vw(3.5),
        paddingTop: vw(3.5),
        paddingBottom: vw(3.5),
        justifyContent: "center",
        borderColor: '#C7C7CC',
        borderWidth: 1,
        borderRadius: vw(1)
    }

})