Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/paraboly/react-native-switch-fab

Animated & Fully Customizable Switch Floating Action Button for React Native by Paraboly
https://github.com/paraboly/react-native-switch-fab

animated animation apple button fab floating-action-button ios react react-native reactjs switch switch-fab transition

Last synced: 3 months ago
JSON representation

Animated & Fully Customizable Switch Floating Action Button for React Native by Paraboly

Host: GitHub
URL: https://github.com/paraboly/react-native-switch-fab
Owner: Paraboly
License: mit
Created: 2020-01-03T14:39:30.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2023-01-27T04:34:57.000Z (almost 2 years ago)
Last Synced: 2024-10-10T16:05:09.212Z (3 months ago)
Topics: animated, animation, apple, button, fab, floating-action-button, ios, react, react-native, reactjs, switch, switch-fab, transition
Language: JavaScript
Homepage: https:/paraboly.com
Size: 1.87 MB
Stars: 7
Watchers: 2
Forks: 0
Open Issues: 8
Metadata Files:
- Readme: README.md
- License: LICENSE

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/@paraboly/react-native-switch-fab)

[![Animated & Fully Customizable Switch Floating Action Button for React Native by Paraboly](https://img.shields.io/badge/-Animated%20%26%20Fully%20Customizable%20Switch%20Floating%20Action%20Button%20for%20React%20Native%20by%20Paraboly-lightgrey?style=for-the-badge)](https://github.com/WrathChaos/@paraboly/react-native-switch-fab)

[![npm version](https://img.shields.io/npm/v/@paraboly/react-native-switch-fab.svg?style=for-the-badge)](https://www.npmjs.com/package/@paraboly/react-native-switch-fab)

[![npm](https://img.shields.io/npm/dt/@paraboly/react-native-switch-fab.svg?style=for-the-badge)](https://www.npmjs.com/package/@paraboly/react-native-switch-fab)

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

```ruby

npm i @paraboly/react-native-switch-fab

```

## Peer Dependencies

###### IMPORTANT! You need install them

```js

"react": ">= 16.x.x",

"react-native": ">= 0.55.x",

"react-native-androw": ">= 0.0.34",

"react-native-dynamic-vector-icons": ">= 0.2.1",

"react-native-material-ripple": ">= 0.9.1",

"react-native-vector-icons": ">= 6.6.0"

```

# Usage

## Import

```js

import SwitchFab from "@paraboly/react-native-switch-fab";

```

## Usage

### Basic Usage

```jsx

```

### Advanced Usage

Check the example for the multiple & advanced usage

```jsx

```

# Configuration - Props

| Property          |      Type      |                    Default                    | Description                                                                                              |

| ----------------- | :------------: | :-------------------------------------------: | -------------------------------------------------------------------------------------------------------- |

| width             | string/number  |                      50                       | change the width of the button                                                                           |

| height            | string/number  |                      50                       | change the height of the button                                                                          |

| borderRadius      |     number     |                      25                       | change the border radius of the button                                                                   |

| IconComponent     | Icon Component | Icon (from react-native-dynamic-vector-icons) | set your own Icon component it can be your own MyIcon component or react-native-vector-icons or anything |

| isActive          |    boolean     |                     false                     | set the default active button                                                                            |

| onPress           |    function    |                   undefined                   | set your own logic for onPress it has callback for (isActive)                                            |

| animationDuration |     number     |                      750                      | change the animation duration for background color transition                                            |

| shadowColor       |     color      |                    #757575                    | change the button's shadow color                                                                         |

| activeBGColor     |     color      |                    #757575                    | change the button's active background color                                                              |

| inactiveBGColor   |     color      |                    #fdfdfd                    | change the button's inactive background color                                                            |

| activeIconColor   |     color      |                    #757575                    | change the button's active icon color                                                                    |

| inactiveIconColor |     color      |                    #fdfdfd                    | change the button's inactive icon color                                                                  |

| animationDuration |     number     |                      750                      | change the animation duration for background color transition                                            |

| animationDuration |     number     |                      750                      | change the animation duration for background color transition                                            |

## Future Plans

- [x] ~~LICENSE~~

- [x] ~~New Screenshots~~

- [ ] Write an article about the lib on Medium

## Author

FreakyCoder, [email protected]

## License

React Native SwitchFab by Paraboly is available under the MIT license. See the LICENSE file for more info.