react-native-switch
Custom Switch component for React Native that use Reanimated and Gesture Handler
Installation
First, you need to install and configure the Reanimated and Gesture Handler libraries
Then install library
npm install @splicer97/react-native-switch
or
yarn add @splicer97/react-native-switch
Usage
import Switch from '@splicer97/react-native-switch';
// ...
const [state, setState] = useState(false);
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<View style={styles.container}>
<Switch value={state} onValueChange={setState} />
</View>
</GestureHandlerRootView>
);
Props
Props | Type | Required | Description |
---|---|---|---|
value |
boolean |
true |
Current state of the component |
onValueChange |
(value: boolean) => void |
true |
Change of component state |
disabled |
boolean |
false |
Inactive state of the component |
activeColor |
string |
false |
Container color when component is active |
inactiveColor |
string |
false |
Container color when component is inactive |
disabledActiveColor |
string |
false |
Container color when component is active and disabled |
disabledInactiveColor |
string |
false |
Container color when component is inactive and disabled |
shouldCancelWhenOutside |
boolean |
false |
Should a swipe handler be end if your finger is outside the component. Default false |
containerStyle |
StyleProp<ViewStyle> |
false |
Switch container style |
circleStyle |
StyleProp<ViewStyle> |
false |
Switch circle style |
trackWidth |
number |
false |
The width that the circle will be able to move. Default formula is 'containerWidth - circleWidth - containerPaddingHorizontal * 2' |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library