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>