@paraboly/react-native-switch-fab

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

Usage no npm install needed!

<script type="module">
  import parabolyReactNativeSwitchFab from 'https://cdn.skypack.dev/@paraboly/react-native-switch-fab';
</script>

README

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, kurayogun@gmail.com

License

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