⚓️ Installation
yarn add react-native-reanimated-switch# or npm i react-native-reanimated-switch
👪 Dependencies
React Native Reanimated
npm install react-native-reanimated
For iOS
cd ios && pod install && cd ..
For detailed instructions check it out here
Rebuild the project after adding the dependencies
🔍 Usage
;;; const App = { const switchState setSwitchState = ; const handleOnPressSwitch = { ; }; return <> <StatusBar barStyle="dark-content" translucent=true backgroundColor="white" /> <SafeAreaView style=stylescontainer> <Text style=stylesheader>React Native Reanimated Switch</Text> <Text style=stylesheader>Default </Text> <RNSwitch handleOnPress=handleOnPressSwitch value=switchState /> <Text style=stylesheader>Color Customisable </Text> <View style=stylesswitchContainer> <RNSwitch handleOnPress=handleOnPressSwitch activeTrackColor="#FE5F8F" value=switchState /> <RNSwitch handleOnPress=handleOnPressSwitch activeTrackColor="#667eea" value=switchState /> <RNSwitch handleOnPress=handleOnPressSwitch activeTrackColor="#ed8936" value=switchState /> <RNSwitch handleOnPress=handleOnPressSwitch activeTrackColor="#feb2b2" value=switchState /> </View> </SafeAreaView> </> ;}; const styles = StyleSheet; ;
🔧 Props
Name | Description | Required | Type | Default |
---|---|---|---|---|
value | State of switch component | YES | Boolean | - |
handleOnPress | A callback with the current switch state | YES | Function | - |
activeTrackColor | The track color when switch is active | NO | Color | #007AFF |
inActiveTrackColor | The track color when switch is inactive | NO | Color | #F2F5F7 |
thumbColor | The color of switch thumb | NO | Color | #FFFFFF |
🎉 Example
Checkout the example here.
📓 Blog
Will Update Soon.
⛄️ Built with ❤️ and
✌️ Contributing
Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.
👨 Author
📋 License
MIT