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

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

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 |

Examples from videos