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