# @freakycoder/react-native-switch-button

> Animated switch button with fully customizable React Native Component

Latest version **0.1.1** (published 2021-08-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @freakycoder/react-native-switch-button
pnpm add @freakycoder/react-native-switch-button
yarn add @freakycoder/react-native-switch-button
bun add @freakycoder/react-native-switch-button
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2021-08-16 |
| First published | 2021-08-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 37.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | FreakyCoder |
| Maintainers | freakycoder |
| Keywords | switch, toggle, button, switch-button, toggle-button, animated, animation, FreakyCoder, freakycoder, kuray, Kuray, react, react-native, javascript, ui-lib, rn |

## Links

- npm: https://www.npmjs.com/package/@freakycoder/react-native-switch-button
- Repository: https://github.com/WrathChaos/react-native-switch-button
- Homepage: https://www.freakycoder.com
- Issues: https://github.com/WrathChaos/react-native-switch-button/issues
- npm.io page: https://npm.io/package/@freakycoder/react-native-switch-button

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 0.1.1 (latest) — 2021-08-16
- 0.1.0 — 2021-08-12

## README

<img alt="React Native Switch Button" src="assets/logo.png" width="1050"/>

[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-switch-button)

[![React Native Switch Button](https://img.shields.io/badge/-Animated%20switch%20button%20with%20fully%20customizable%20React%20Native%20Component-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-switch-button)

[![npm version](https://img.shields.io/npm/v/@freakycoder/react-native-switch-button.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-switch-button)
[![npm](https://img.shields.io/npm/dt/@freakycoder/react-native-switch-button.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-switch-button)
![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)

<p align="center">
  <img alt="React Native Switch Button"
        src="assets/Screenshots/react-native-switch-button.gif" />
</p>

# Installation

Add the dependency:

```bash
npm i @freakycoder/react-native-switch-button
```

## Peer Dependencies

<h5><i>IMPORTANT! You need install them</i></h5>

```js
"@freakycoder/react-native-bounceable": ">= 0.2.5"
```

# Usage

## Import

```jsx
import SwitchButton from "@freakycoder/react-native-switch-button";
```

## Fundamental Usage

```jsx
<SwitchButton
  text="Notification"
  inactiveImageSource={require("./assets/notification.png")}
  activeImageSource={require("./assets/notification-3.png")}
  onPress={(isActive: boolean) => console.log(isActive)}
/>
```

## Example Project 😍

You can checkout the example project 🥰

Simply run

- `npm i`
- `react-native run-ios/android`

should work of the example project.

# Configuration - Props

| Property            |     Type     |  Default  | Description                                                        |
| ------------------- | :----------: | :-------: | ------------------------------------------------------------------ |
| text                |    string    | undefined | set the text of the button                                         |
| activeImageSource   | Image Source | undefined | set the active image source                                        |
| inactiveImageSource | Image Source | undefined | set the inactive image source                                      |
| isActive            |   boolean    |   false   | set the active state initially                                     |
| onPress             |   function   |  default  | set your own logic for onPress functionality                       |
| mainColor           |    string    |  #f1bb7b  | change the main animated color                                     |
| originalColor       |    string    |   #fff    | change the original/default animated color                         |
| tintColor           |    string    |  #f1bb7b  | change the tint color for the image                                |
| disableText         |   boolean    |   false   | disable the text part if you only want to use switch button itself |
| style               |  ViewStyle   |  default  | set or override the style object for the main container            |
| textStyle           |  TextStyle   |  default  | set or override the style object for the text                      |
| imageStyle          |  ImageStyle  |  default  | set or override the style object for the image                     |
| textContainerStyle  |  ViewStyle   |  default  | set or override the style object for text container                |

## Future Plans

- [x] ~~LICENSE~~
- [ ] Write an article about the lib on Medium

## Author

FreakyCoder, kurayogun@gmail.com

## License

React Native Switch Button is available under the MIT license. See the LICENSE file for more info.

---
_Source: https://npm.io/package/@freakycoder/react-native-switch-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._