https://github.com/meksiabdou/react-native-switch
react-native switch
https://github.com/meksiabdou/react-native-switch
animation react-native react-native-switch switch
Last synced: 4 months ago
JSON representation
react-native switch
- Host: GitHub
- URL: https://github.com/meksiabdou/react-native-switch
- Owner: meksiabdou
- License: mit
- Created: 2022-09-09T22:51:13.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-12-05T15:23:27.000Z (6 months ago)
- Last Synced: 2025-12-09T01:49:04.765Z (6 months ago)
- Topics: animation, react-native, react-native-switch, switch
- Language: Java
- Homepage:
- Size: 464 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# @meksiabdou/react-native-switch
Customisable switch component for React Native
[](https://snyk.io/test/github/meksiabdou/react-native-switch?targetFile=package.json)
[](https://i.imgur.com/TNLNDgt.mp4)
## Requirements
- [react-native-reanimated v2.2.0 or higher](https://github.com/software-mansion/react-native-reanimated)
## Installation
```sh
npm install @meksiabdou/react-native-switch
```
```sh
yarn add @meksiabdou/react-native-switch
```
## Usage
```tsx
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import Switch from '@meksiabdou/react-native-switch';
export default function App() {
const [value, setValue] = React.useState(false);
return (
setValue(!value)}
activeText="ON"
inActiveText="OFF"
circleSize={24}
textStyle={{ fontSize: 13 }}
disabled={false}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ccc',
},
});
```
### Switch Props
| name | type | default |
| ------------------- | --------- | --------- |
| width | number | 100 |
| value | boolean | false |
| onValueChange | function | undefined |
| onAnimationEnd | function | undefined |
| disabled | boolean | false |
| activeText | string | ON |
| inActiveText | string | OFF |
| circleSize | number | 30 |
| switchBorderRadius | number | 30 |
| switchPaddingRight | number | 2 |
| switchPaddingLeft | number | 2 |
| backgroundActive | string | #249c00 |
| backgroundInActive | string | #333 |
| circleActiveColor | string | #fff |
| circleInActiveColor | string | #fff |
| textStyle | TextStyle | undefined |
| switchStyle | ViewStyle | undefined |
| circleChildrenActive| ReactElement | undefined |
| circleChildrenInActive| ReactElement | undefined |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)