react-native-animated-fab

React Native Animated FAB

A JavaScript library is used for displaying draggable floating action button in React Native.

Installation

Using Yarn

yarn add react-native-animated-fab

Or using NPM

npm install react-native-animated-fab

Basic Usage

React Native CLI:

import React from 'react';
import { Alert, StyleSheet, View } from 'react-native';
import FAB from 'react-native-animated-fab';

export default function App() {
  return (
    <View style={styles.container}>
      <FAB
        renderSize={60}
        borderRadius={30}
        onPress={() => Alert.alert('FAB pressed !')}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Props

Prop	Description	Required	Type	Default
renderSize	Specifies the size of the FAB.	✅	number
draggable	Indicates whether the FAB is draggable.	⬜	boolean	true
reversible	Specifies if the FAN can be reverted to the original position.	⬜	boolean	false
icon	Determines if the FAB displays an icon.	⬜	number
iconSize	Specifies the size of the icon.	⬜	number	24
iconStyle	Defines the style for the icon.	⬜	ImageStyle
tintColor	Specifies the tint color for the icon.	⬜	string
borderRadius	Defines the border radius for the FAB.	⬜	number	0
backgroundColor	Specifies the background color for the FAB.	⬜	string	'#00000090'
topOffset	Defines the top offset of the FAB.	⬜	number	60
rightOffset	Defines the right offset of the FAB.	⬜	number	16
bottomOffset	Defines the bottom offset of the FAB.	⬜	number	60
leftOffset	Defines the left offset of the FAB.	⬜	number	16
idleOpacity	Specifies the opacity of the FAB when it is idle. (value from 0 to 1)	⬜	number	0.5
idleDelayTime	Specifies the delay time before the FAB becomes idle. (value in ms)	⬜	number	3000
children	Specifies additional JSX elements to be rendered inside the FAB.	⬜	React component
onPress	Callback function triggered when the FAB is pressed.	⬜	function
onLongPress	Callback function triggered when the FAB is long-pressed.	⬜	function
onDragStart	Callback function triggered when the FAB drag operation starts.	⬜	function
onDragEnd	Callback function triggered when the FAB drag operation ends.	⬜	function

Troubleshooting

• Using PanResponder inside of a ScrollView or FlatList may cause the animation to get stuck. The solution that worked for me is to set the property "scrollEnabled" to "false". Take a look at this Example

License

MIT