react-native-ossd-radio-button/src/RadioList/RadioList.js

Customizable React Native Radio Button

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

export class RadioList extends Component {

    constructor(props) {
        super(props)

        this.state = {
            ...this.state
        }
    }

    render() {
        return (
            <View style={{ flex: 1, justifyContent: this.props.justifyContent }}>

                {this.props.radioDatas.map((radioData, index) => (
                    <View key={index}>
                        <TouchableOption
                            option={radioData}
                            onTextClicked={this.props.onChangeState.bind(this)}
                            myKey={index}
                            radioState={this.props.radioState}
                            imageShow={this.props.imageShow}
                            width={this.props.width}
                            height={this.props.height}
                            activeColor={this.props.activeColor}
                            defaultColor={this.props.defaultColor}
                            textColor={this.props.textColor}
                            imageColor={this.props.imageColor}
                        />
                        <View
                            style={[
                                styles.promoReportDivider,
                                {
                                    width: this.props.width - vw(10),
                                    borderBottomColor: this.props.borderColor,
                                    width: this.props.borderWidth,
                                    marginHorizontal: (vw(100) - this.props.borderWidth) / 2
                                }
                            ]}
                        />
                    </View>

                ))}

                {(this.props.other) ?
                    <View>
                        <TouchableText
                            onTextClicked={this.props.onChangeState.bind(this)}
                            option={
                                {
                                    iconUrl : this.props.iconUrlText,
                                    text : this.props.otherText 
                                }
                            }
                            radioState={this.props.radioState}
                            nomor={this.props.radioDatas.length}
                            changeRadioState={this.props.changeRadioState.bind(this)}
                            imageShow={this.props.imageShow}
                            width={this.props.width}
                            height={this.props.height}
                            activeColor={this.props.activeColor}
                            defaultColor={this.props.defaultColor}
                            textColor={this.props.textColor}
                            imageColor={this.props.imageColor}
                        />
                        <View
                            style={[
                                styles.promoReportDivider,
                                {
                                    width: this.props.width - vw(10),
                                    borderBottomColor: this.props.borderColor,
                                    width: this.props.borderWidth,
                                    marginHorizontal: (vw(100) - this.props.borderWidth) / 2
                                }
                            ]}
                        />
                    </View>
                    :
                    null

                }

            </View>

        )
    }
}


RadioList.propTypes = {
    imageShow: PropTypes.bool,
    width: PropTypes.number,
    height: PropTypes.number,
    justifyContent: PropTypes.string,
    activeColor: PropTypes.string,
    defaultColor: PropTypes.string,
    textColor: PropTypes.string,
    borderColor: PropTypes.string,
    borderWidth: PropTypes.number,
    imageColor: PropTypes.string,
    other: PropTypes.bool,
    otherText : PropTypes.string,
    iconUrlText : PropTypes.number
}

RadioList.defaultProps = {
    imageShow: true,
    width: vw(100),
    height: vh(10),
    justifyContent: 'center',
    activeColor: '#FFEDEB',
    defaultColor: 'white',
    textColor: "black",
    borderColor: "#F0EFEF",
    borderWidth: vw(90),
    imageColor: "black",
    other: false,
    otherText : "Other",
    iconUrlText : require("../../assets/icons/wrong_terms_condition.png")
}

const styles = StyleSheet.create({

    modalContainer: {
        justifyContent: 'space-between',
    },

    headerModal: {
        flexDirection: 'row',
        height: vh(8),
        width: vw(100),
        borderColor: 'rgba(0,0,0,0.2)',
        borderBottomWidth: vw(0.1),
        alignItems: 'center',
    },

    headerText: {
        fontSize: vw(4.5),
        textAlign: 'center'
    },

    scrollHeader: {
        padding: vw(6),
        fontSize: vw(5.6),
        fontWeight: 'bold'
    },

    promoReportDivider: {
        borderBottomWidth: vw(0.3),
        marginHorizontal: "5%",
        width: "90%",
        borderBottomColor: "#F0EFEF"
    },

    buttonContainer: {
        height: vh(11.5),
        width: vw(100),
        justifyContent: 'flex-end',
        alignItems: 'center',
    },

    buttonTextGrey: {
        color: "#A1A1A1",
        fontSize: vw(4.3),
        fontWeight: 'bold'

    },
    buttonTextWhite: {
        color: "#FFFFFF",
        fontSize: vw(4.3),
        fontWeight: 'bold'
    },

    button: {
        width: vw(90),
        borderRadius: vw(2),
        marginBottom: vw(6.2),
        overflow: "hidden",
        justifyContent: 'center',
        alignItems: 'center',
        height: vw(11.5),
    }
})