https://github.com/timelessco/react-native-reanimated-switch
🎉 React Native Reanimated Switch 🚦 inspired by UISwitch working with both iOS and Android
https://github.com/timelessco/react-native-reanimated-switch
react-native reanimated switch
Last synced: 5 months ago
JSON representation
🎉 React Native Reanimated Switch 🚦 inspired by UISwitch working with both iOS and Android
- Host: GitHub
- URL: https://github.com/timelessco/react-native-reanimated-switch
- Owner: timelessco
- Created: 2020-08-29T14:20:56.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-12-16T05:21:33.000Z (over 2 years ago)
- Last Synced: 2025-10-19T18:10:48.832Z (8 months ago)
- Topics: react-native, reanimated, switch
- Language: JavaScript
- Homepage:
- Size: 1000 KB
- Stars: 17
- Watchers: 4
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/react-native-reanimated-switch)
[](https://www.npmjs.com/package/react-native-reanimated-switch)
React Native Reanimated Switch
## :anchor: Installation
```sh
yarn add react-native-reanimated-switch
# or
npm i react-native-reanimated-switch
```
## :family: Dependencies
##### React Native Reanimated
```sh
npm install react-native-reanimated
```
For iOS
```sh
cd ios && pod install && cd ..
```
> For detailed instructions check it out [here](https://docs.swmansion.com/react-native-reanimated/docs/next/installation)
> Rebuild the project after adding the dependencies
## :mag: Usage
```js
import React, { useState } from "react";
import { SafeAreaView, StatusBar, StyleSheet, Text, View } from "react-native";
import RNSwitch from "./src/Switch";
const App = () => {
const [switchState, setSwitchState] = useState(false);
const handleOnPressSwitch = (value) => {
setSwitchState(value);
};
return (
<>
React Native Reanimated Switch
Default
Color Customisable
>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
display: "flex",
alignContent: "center",
justifyContent: "center",
alignItems: "center",
backgroundColor: "white",
},
header: {
fontSize: 24,
paddingVertical: 30,
},
switchContainer: {
display: "flex",
justifyContent: "space-between",
flexDirection: "row",
width: "90%",
},
});
export default App;
```
## :wrench: 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 |
## :tada: Example
Checkout the example [here](https://github.com/timelessco/react-native-reanimated-switch/tree/master/example/RNSearch).
## :notebook: Blog
Read my blog [here](https://medium.com/timeless/react-native-reanimated-switch-83c331af7877?source=friends_link&sk=7155a8907037c741e717d081a4a29498)
## :snowman: Built with ❤️ and
- [react-native](https://www.npmjs.com/package/react-native)
- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/)
## :v: Contributing
Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.
## :man: Author
[Karthik B](https://twitter.com/_iam_karthik)
## :clipboard: License
MIT