react-native-option-switch

react-native-option-switch

The React Native component to provide UI with option selection like radio button or yes/no choice.

Demo:

Install

npm i --save react-native-option-switch

Params

Param	Description
options (required)	An array of options, each option is an object with particular fields: key(don't use with isBool={true}), title, value, isDefault (optional).
onChange	A handler of the value change event. A function that accepts a new value as the first param.
styles	Object with custom styles for the component. You can use these fields to customize whole component (container field), items (item and selectedItem) and item labels (label).
isNullable	Default is false. Set true in case of nothing to select.

Usage

<View style={{ flex: 1, justifyContent: 'center' }}>
	<Text style={{
		fontWeight: '600',
		fontSize: 18,
		margin: 16,
		marginBottom: 8,
		textAlign: 'center'
	}}>One option selection, with nullable option</Text>
	<OptionSwitch
		isNullable={true}
		styles={{
			item: {
				width: 100,
				height: 24,
				borderRadius: 12,
				marginHorizontal: 8,
				alignItems: 'center',
			},
			selectedItem: {
				width: 100,
				height: 24,
				borderRadius: 12,
				marginHorizontal: 8,
				backgroundColor: '#FDE08C',
				alignItems: 'center',
			},
		}}
		options={[
			{
				label: 'First',
				value: 'first'
			}, {
				label: 'Second',
				value: 'second',
				isDefault: true,
			}, {
				label: 'Third',
				value: 'third',
			}
		]}
	/>
	<Text style={{
		fontWeight: '600',
		fontSize: 18,
		margin: 24,
		marginBottom: 8,
		textAlign: 'center'
	}}>Boolean choice</Text>
	<OptionSwitch
		onChange={(value) => {

		}}
		options={[
			{
				label: 'Yes',
				value: false
			}, {
				label: 'No',
				value: true,
				isDefault: true,
			}
		]}
	/>
  </View>