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

Customizable React Native Radio Button

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


class RadioItem extends Component {

    constructor(props) {
        super(props)

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

    __optionClicked(promoReport: string, nomor: number) {

        this.setState({ clicked: true })
        this.props.onTextClicked(promoReport, nomor)
    }

    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 }]}
                        onChangeText={(text) => [this.setState({ text }), this.props.changeRadioState(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 (
            <TouchableWithoutFeedback
                onPress={() => this.__optionClicked(this.state.text, this.props.nomor)}
            >
                <View style={[(this.props.nomor == this.props.radioState) ? [styles.addTextTouch, { height: vw(15) + this.state.height + vw(4.125) }] : styles.addText]}>
                    <View style={{ flexDirection: 'row', flex: ((this.props.nomor == this.props.radioState) ? 0 : 1), height: vw(15) }}>

                        <View style={styles.containerIcon}>
                            <Image
                                source={this.props.option.iconUrl}
                                style={[{ width: vh(4), height: vh(4) }]}
                                resizeMode="contain"
                            />
                        </View>

                        <View style={styles.containerText}>
                            <Text
                                style={styles.text}
                            >
                                {this.props.option.text}

                            </Text>

                        </View>

                    </View>
                    {showText}

                </View>

            </TouchableWithoutFeedback>
        )
    }
}
export { RadioItem };