Skip to content

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

License

Notifications You must be signed in to change notification settings

Paraboly/react-native-switch-fab

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Native SwitchFab by Paraboly

Battle Tested ✅

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

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native SwitchFab by Paraboly React Native SwitchFab by Paraboly

Installation

Add the dependency:

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

Peer Dependencies

IMPORTANT! You need install them
"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

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

Usage

Basic Usage

<SwitchFab />

Advanced Usage

Check the example for the multiple & advanced usage

<SwitchFab
  name="atom"
  type="Fontisto"
  rippleColor="transparent"
  activeBGColor="#00B1D2FF"
  inactiveBGColor="#FDDB27FF"
/>

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

  • LICENSE
  • 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.