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: 12 days 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 (about 2 years ago)
• Default Branch: master
• Last Pushed: 2023-09-24T10:42:46.000Z (about 1 year ago)
• Last Synced: 2024-10-07T05:15:50.319Z (about 1 month ago)
• Topics: animation, react-native, react-native-switch, switch
• Language: Java
• Homepage:
• Size: 455 KB
• Stars: 1
• Watchers: 2
• 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

![bundlephobia](https://badgen.net/bundlephobia/minzip/@meksiabdou/react-native-switch)

![downloads](https://badgen.net/npm/dt/@meksiabdou/react-native-switch)

![npm](https://badgen.net/npm/v/@meksiabdou/react-native-switch)

![license](https://badgen.net/github/license/meksiabdou/react-native-switch)

[![Known Vulnerabilities](https://snyk.io/test/github/meksiabdou/react-native-switch/badge.svg?targetFile=package.json)](https://snyk.io/test/github/meksiabdou/react-native-switch?targetFile=package.json)

[![Watch the video](https://imgur.com/TNLNDgt.jpg)](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)