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

Customizable React Native Radio Button

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


export class TouchableText extends Component {

    constructor(props) {
        super(props)

        this.state = {
            clicked: false,
            text: "",
            heightAdder: (Platform.OS == 'ios') ? vw(6.8) : 0,
            height: vw(10)
        }
    }

    onTextClicked(text, myKey) {
        object = {
            iconUrl: this.props.option.iconUrl,
            text: text,
        }

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

    render() {

        var showText = undefined

        if (this.props.nomor == this.props.radioState) {
            showText = (
                <View style={[styles.containerTextInput, { height: this.state.height + vw(4.125) }]}>
                    <TextInput
                        style={[
                            styles.textInput, 
                            { height: this.state.height },
                            (this.props.imageShow)? {width : (this.props.width - vw(20))}: {width : (this.props.width - vw(10))} 
                        ]}
                        onChangeText={(text) =>
                            [
                                this.setState({ text }),
                                this.props.changeRadioState({
                                    iconUrl: this.props.option.iconUrl,
                                    text: text,
                                })
                            ]
                        }
                        multiline={true}
                        textAlignVertical='center'
                        onContentSizeChange={(event) => {
                            this.setState({ height: ((this.state.heightAdder + event.nativeEvent.contentSize.height) < vw(20)) ? (this.state.heightAdder + event.nativeEvent.contentSize.height) : vw(20) })
                        }}
                        value={this.state.text}
                        placeholder="Share your thoughts here"
                    />
                </View>
            )
        }
        else {
            showText = null
        }

        return (
            <TouchableOpacity
                activeOpacity={1}
                onPress={() => this.onTextClicked(this.state.text, this.props.nomor)}
            >
                <View style={
                    [
                        {paddingHorizontal : vw(5)},
                        (this.props.nomor == this.props.radioState) ?
                            [{ backgroundColor: this.props.activeColor, flex: 0 }, { height: vw(15) + this.state.height + vw(4.125) }] :
                            { backgroundColor: this.props.defaultColor, flex: this.props.flex, height: this.props.height },
                        {
                            width: this.props.width,

                        }
                    ]
                }>
                    <View style={{ flexDirection: 'row', flex: ((this.props.nomor == this.props.radioState) ? 0 : 1), height: vw(15) }}>

                        {
                            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>
                    {showText}

                </View>

            </TouchableOpacity>
        )
    }
}

TouchableText.propTypes = {
    option: PropTypes.any,
    radioState: PropTypes.number,
    nomor: PropTypes.number,
    imageShow: PropTypes.bool,
    height: PropTypes.number,
    width: PropTypes.number,
    flex: PropTypes.number,
    activeColor: PropTypes.string,
    defaultColor: PropTypes.string,
    textColor: PropTypes.string,
    imageColor: PropTypes.string
}

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

}