Video 1

https://user-images.githubusercontent.com/33498670/154785463-2a7fd8f5-a7aa-473c-892e-6fe86ec7ca95.mov

Video 2

https://user-images.githubusercontent.com/33498670/154785433-86e5e46d-b69c-4239-976e-d9c53ae5ebc2.mov

Install

1yarn add react-native-multiswitch-selector

peer dependency:

1yarn add react-native-linear-gradient

Usage

1import { MultiSwitch } from 'react-native-multiswitch-selector';
2
3export const App = () => {
4  const [allStates] = useState(['Father', 'Mother', 'Brother'])
5  const [switchState, setSwitchState] = useState(allStates[0])
6  return (
7    <MultiSwitch
8      allStates={allStates}
9      currentState={switchState}
10      changeState={setSwitchState}
11    />
12  )
13}

Prop	Explanation	Type	Default	Required
allStates		string[]		true
currentState		string		true
changeState		(s: string) => void		true
mode		'default' or 'white'	'default'	false
disabled		boolean	false	false
activePositionManual		number	undefined	false
animationConfig		Animated.TimingAnimationConfig		false
renderStateText		(s: string) => string	(s: string) => s	false
styleRoot		ViewStyle	{}	false
styleAllStatesContainer		ViewStyle	{}	false
styleActiveState		ViewStyle	{}	false
styleActiveStateText		TextStyle	{}	false
styleActiveStateGradient		[string, string]	['#81cf34', '#619c27']	false
styleInactiveState		ViewStyle	{}	false
styleInactiveStateText		TextStyle	{}	false

Examples from videos