react-native-multiple-switch

Device Information for React Native.

Install

Using npm:

npm i react-native-multiple-switch

or using yarn:

yarn add react-native-multiple-switch

Usage

import MultiSwitch from 'react-native-multiple-switch'

export const App = () => {
  const items = [
    {
      displayName: 'Option 1'
      uniqueId: '1',
      value: {...complexObject},
    },
    {
      displayName: 'Option 2'
      uniqueId: '2',
      value: {...complexObject},
    },
  ]
  const [value, setValue] = useState(items[0])

  return (
    <MultiSwitch<boolean>
      items={items}
      value={value}
      onChange={(val) => setValue(val)}
    />
  )
}

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

  const items = [
    { displayName: 'On', option: 'on', value: 'on', uniqueId: 'on' },
    { displayName: 'Off', option: 'off', value: 'off', uniqueId: 'off' },
  ]

<MultipleSwitch
  items={items}
  value={value}
  onChange={(val) => setValue(val.value)}
/>

// Medium height
<MultipleSwitch
  items={items}
  value={value}
  onChange={(val) => setValue(val)}
  mediumHeight
/>

// Big height and disabled
<MultipleSwitch
  items={items}
  value={value}
  onChange={(val) => setValue(val)}
  bigHeight
  disabled
/>

// Custom styles
<MultipleSwitch
  items={items}
  value={value}
  onChange={(val) => setValue(val)}
  containerStyle={{
    backgroundColor: '#f7ede2',
    height: 100
  }}
  sliderStyle={{
    backgroundColor: '#f6bd60'
  }}
  textStyle={{
    color: '#84a59d',
    textTransform: 'uppercase',
    fontSize: 40,
  }}
/>

// Custom colors
<MultipleSwitch
  items={items}
  value={value}
  onChange={(val) => setValue(val)}
  colorOverrides={{
    containerBackgroundColor: '#FFFFFF',
    containerBackgroundDisabledColor: '#575757',
    sliderColor: '#00FF00',
    sliderDisabledColor: '#CDF1CD',
    textColor: '#000000',
    activeTextColor: '#0000FF',
  }}
/>

// Custom animation settings
<MultipleSwitch
  items={items}
  value={value}
  onChange={(val) => setValue(val)}
  sliderAnimationConfig={{
    slidingDurationMs: 1000,
    opacityDurationMs: 200,
    opacityStartingValue: 0.65,
  }}
/>

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.