Video 1

Screen.Recording.2022-02-19.at.06.20.36.mov

Video 2

Screen.Recording.2022-02-19.at.06.18.57.mov

Examples from videos

Install

yarn add react-native-multiswitch-selector

peer dependency:

yarn add react-native-linear-gradient

Usage

import { MultiSwitch } from 'react-native-multiswitch-selector';

export const App = () => {
  const [allStates] = useState(['Father', 'Mother', 'Brother'])
  const [switchState, setSwitchState] = useState(allStates[0])
  return (
    <MultiSwitch
      allStates={allStates}
      currentState={switchState}
      changeState={setSwitchState}
    />
  )
}

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