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.