React-native-ossd-radio-button NPM

react-native-ossd-radio-button

Customizable React Native Radio Button

Here you can implement radio button without radio. This library give you customizable radio button. We hope the library can improve user experience and developer experience in developing application with React Native.

alt text

How to install

Use the package manager npm to install react-native-ossd-radio-button.

npm i react-native-ossd-radio-button

Usage

Import RadioList from 'react-native-ossd-radio-button'

import { RadioList } from 'react-native-ossd-radio-button'

create the data for the application to render in a list with this kind of format, the icon format is optional.

const radioDatas = [
    {
        text: "Liverpool",
        iconUrl: require("./assets/icons/unactive_promo.png")
    },
    {
        text: "Manchester United",
        iconUrl: require("./assets/icons/wrong_location.png")
    }
]

Define the state that will save the choosen radio and add this callback function to the radio button

onChangeState(text, radioState) {
    this.setState({ text: text, radioState: radioState })
}

Optional If the option of other is true

changeRadioState(item) {
    this.setState({ item: item })
}

<RadioList
    onChangeState={this.onChangeState.bind(this)}
    radioState={this.state.radioState}
    changeRadioState={this.changeRadioState.bind(this)}
/>

Props for Radio List

Props	Type	Function
radioState	string	state that can be retrieved outside the component
radioDatas	List	List of text data and image (optional) to be shown when component rendered
imageShow	boolean	show/hide the image
width	number	width of radio button item
height	number	height of radio button item
activeColor	string	Color of the radio button when clicked
defaultColor	string	Default color when radio button not clicked
textColor	string	Color of the text of radio button
borderColor	string	Radio button border color
borderWidth	number	border width
justifyContent	string	Radio button alignment
imageColor	string	Tint color of image
other	boolean	show text option
otherText	string	text that show in other option
iconUrlText	number	require() image for other option