Install
yarn add react-native-multiswitch-selectorpeer dependency:
yarn add react-native-linear-gradientUsage
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 |
