A JavaScript library is used for displaying draggable floating action button in React Native.
Using Yarn
yarn add react-native-animated-fab
Or using NPM
npm install react-native-animated-fab
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,
},
});
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 |
- 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