https://github.com/wrathchaos/react-native-switch-button

Animated switch button with fully customizable React Native Component
https://github.com/wrathchaos/react-native-switch-button

android animation app app-development apple application button front-end google ios mobile react react-native reactjs switch switch-button toggle toggle-button ui ux

Last synced: 5 days ago
JSON representation

Animated switch button with fully customizable React Native Component

• Host: GitHub
• URL: https://github.com/wrathchaos/react-native-switch-button
• Owner: WrathChaos
• Created: 2021-08-11T14:07:46.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-08-16T11:21:48.000Z (almost 4 years ago)
• Last Synced: 2025-05-04T16:03:33.938Z (14 days ago)
• Topics: android, animation, app, app-development, apple, application, button, front-end, google, ios, mobile, react, react-native, reactjs, switch, switch-button, toggle, toggle-button, ui, ux
• Language: TypeScript
• Homepage: https://freakycoder.com
• Size: 9.59 MB
• Stars: 20
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


[![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)



  



# Installation

Add the dependency:

```bash

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

```

## Peer Dependencies

IMPORTANT! You need install them


```js

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

```

# Usage

## Import

```jsx

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

```

## Fundamental Usage

```jsx

 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, [email protected]

## License

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