react-native-multiple-switch

Device Information for React Native.

Install

Using npm:

1npm i react-native-multiple-switch

or using yarn:

1yarn add react-native-multiple-switch

Usage

1import MultiSwitch from 'react-native-multiple-switch'
2
3export const App = () => {
4  const items = [
5    {
6      displayName: 'Option 1'
7      uniqueId: '1',
8      value: {...complexObject},
9    },
10    {
11      displayName: 'Option 2'
12      uniqueId: '2',
13      value: {...complexObject},
14    },
15  ]
16  const [value, setValue] = useState(items[0])
17
18  return (
19    <MultiSwitch<boolean>
20      items={items}
21      value={value}
22      onChange={(val) => setValue(val)}
23    />
24  )
25}

Types

Some custom types are defined and exported which are used in the props.

MultipleSwitchItem

D is a generic type which will allow the items to have a more complex type as their value.

Name	Type	Default	Required
displayName	string		true
uniqueId	string		true
value	D (generic)		true

Colors

Name	Type	Default	Required
containerBackgroundColor	string	#BBBBBB	true
containerBackgroundDisabledColor	string	#636363	true
sliderColor	string	#EEEEEE	true
sliderDisabledColor	string	#787878	true
textColor	string	#333333	true
activeTextColor	string	#333333	true

SliderAnimationConfig

Name	Type	Default	Required
slidingDurationMs	number	200	false
opacityDurationMs	number	100	false
opacityStartingValue	number	0.45	false

Props

D is a generic type which will allow the items to have a more complex type as their value.

Prop	Type	Default	Required
items	MultipleSwitchItem[]		true
value	string		true
onChange	(value: MultipleSwitchItem) => void		true
disabled	boolean	false	false
mediumHeight	boolean	false	false
bigHeight	boolean	false	false
containerStyle	ViewStyle	{}	false
sliderStyle	ViewStyle	{}	false
textStyle	TextStyle	{}	false
activeTextStyle	TextStyle	{}	false
colorOverrides	Colors	{}	false
sliderAnimationConfig	SliderAnimationConfig	{}	false

Examples

1  const items = [
2    { displayName: 'On', option: 'on', value: 'on', uniqueId: 'on' },
3    { displayName: 'Off', option: 'off', value: 'off', uniqueId: 'off' },
4  ]
5
6<MultipleSwitch
7  items={items}
8  value={value}
9  onChange={(val) => setValue(val.value)}
10/>
11
12// Medium height
13<MultipleSwitch
14  items={items}
15  value={value}
16  onChange={(val) => setValue(val)}
17  mediumHeight
18/>
19
20// Big height and disabled
21<MultipleSwitch
22  items={items}
23  value={value}
24  onChange={(val) => setValue(val)}
25  bigHeight
26  disabled
27/>
28
29// Custom styles
30<MultipleSwitch
31  items={items}
32  value={value}
33  onChange={(val) => setValue(val)}
34  containerStyle={{
35    backgroundColor: '#f7ede2',
36    height: 100
37  }}
38  sliderStyle={{
39    backgroundColor: '#f6bd60'
40  }}
41  textStyle={{
42    color: '#84a59d',
43    textTransform: 'uppercase',
44    fontSize: 40,
45  }}
46/>
47
48// Custom colors
49<MultipleSwitch
50  items={items}
51  value={value}
52  onChange={(val) => setValue(val)}
53  colorOverrides={{
54    containerBackgroundColor: '#FFFFFF',
55    containerBackgroundDisabledColor: '#575757',
56    sliderColor: '#00FF00',
57    sliderDisabledColor: '#CDF1CD',
58    textColor: '#000000',
59    activeTextColor: '#0000FF',
60  }}
61/>
62
63// Custom animation settings
64<MultipleSwitch
65  items={items}
66  value={value}
67  onChange={(val) => setValue(val)}
68  sliderAnimationConfig={{
69    slidingDurationMs: 1000,
70    opacityDurationMs: 200,
71    opacityStartingValue: 0.65,
72  }}
73/>

Contribute

If you would like to contribute to react-native-multiple-switch:

1. Add a GitHub Star to the project (that help a lot!).
2. Determine whether you're raising a bug, feature request or question.
3. Raise your issue or PR.

Compiling TS to JS

Prerequisites

Install Typescript

Install typescript globally by running below command in a terminal:

npm install -g typescript

Install Depenndencies

To install all dependencies, run the following command in a terminal:

npm install

Compiling

To compile the TypeScript code to JavaScript, either run the script compile_ts_to_js or run the following command in a terminal:

tsc --project .\\tsconfig.json

Then move the compiled JavaScript file to the /dist folder.

License

The code is available under the MIT license.