
<summary>Video 1</summary>
<summary>Video 2</summary>
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 |