0.2.1 • Published 10 months ago

react-native-animated-fab v0.2.1

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

React Native Animated FAB

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

npm

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

PropDescriptionRequiredTypeDefault
renderSizeSpecifies the size of the FAB.:white_check_mark:number
draggableIndicates whether the FAB is draggable.:white_large_square:booleantrue
reversibleSpecifies if the FAN can be reverted to the original position.:white_large_square:booleanfalse
iconDetermines if the FAB displays an icon.:white_large_square:number
iconSizeSpecifies the size of the icon.:white_large_square:number24
iconStyleDefines the style for the icon.:white_large_square:ImageStyle
tintColorSpecifies the tint color for the icon.:white_large_square:string
borderRadiusDefines the border radius for the FAB.:white_large_square:number0
backgroundColorSpecifies the background color for the FAB.:white_large_square:string'#00000090'
topOffsetDefines the top offset of the FAB.:white_large_square:number60
rightOffsetDefines the right offset of the FAB.:white_large_square:number16
bottomOffsetDefines the bottom offset of the FAB.:white_large_square:number60
leftOffsetDefines the left offset of the FAB.:white_large_square:number16
idleOpacitySpecifies the opacity of the FAB when it is idle. (value from 0 to 1):white_large_square:number0.5
idleDelayTimeSpecifies the delay time before the FAB becomes idle. (value in ms):white_large_square:number3000
childrenSpecifies additional JSX elements to be rendered inside the FAB.:white_large_square:React component
onPressCallback function triggered when the FAB is pressed.:white_large_square:function
onLongPressCallback function triggered when the FAB is long-pressed.:white_large_square:function
onDragStartCallback function triggered when the FAB drag operation starts.:white_large_square:function
onDragEndCallback 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