# react-native-option-switch

> Options switch component for React Native. It can be used as radio button or boolean switch.

Latest version **1.2.2** (published 2020-06-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-option-switch
pnpm add react-native-option-switch
yarn add react-native-option-switch
bun add react-native-option-switch
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2020-06-09 |
| First published | 2020-06-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 88.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Kirill Zorin |
| Maintainers | zarincheg |
| Keywords | react-native, radio, switch, option, button |

## Links

- npm: https://www.npmjs.com/package/react-native-option-switch
- Repository: https://github.com/zarincheg/react-native-option-switch
- Homepage: https://github.com/zarincheg/react-native-option-switch#readme
- Issues: https://github.com/zarincheg/react-native-option-switch/issues
- npm.io page: https://npm.io/package/react-native-option-switch

## Recent versions

- 1.2.2 (latest) — 2020-06-09
- 1.2.1 — 2020-06-08
- 1.2.0 — 2020-06-08
- 1.0.0 — 2020-06-05

## README

# react-native-option-switch
The React Native component to provide UI with option selection like radio button or yes/no choice.

Demo:

![Demo](https://raw.githubusercontent.com/zarincheg/react-native-option-switch/master/img/demo.gif)

## 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
```jsx
<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>
  ```

---
_Source: https://npm.io/package/react-native-option-switch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._