Animated FAB Menu with Glassy Blur Effects for React Native

Description:

Animated FAB Menu is a React Native component that creates a floating action button with expandable menu functionality.

It provides smooth animations when expanding into a full menu overlay with a blurred backdrop effect.

The component uses Reanimated 3 for physics-based animations and expo-blur for the glassmorphism effect

Features

• 🔘 Smooth expand and collapse animations using spring physics
• 🌫️ Blurred backdrop with adjustable opacity and material tint
• 🌀 Staggered entry animations for menu items with spring timing
• 📱 Responsive layout that adapts to different screen sizes
• 🎨 Customizable menu items with icons, titles, and subtitles

Live Demo

Use Cases

• Finance apps need quick access to actions like adding money or viewing transactions.
• Social media apps implement posting options through expandable FAB menus.
• Productivity tools use this pattern for task creation and filtering functions.
• E-commerce applications handle quick actions like wishlist or share features.

How to Use It

1. Install the required dependencies using your preferred package manager.

npm install react-native-reanimated expo-blur @expo/vector-icons

2. Configure Reanimated properly in your project. Update your babel.config.js file to include the Reanimated plugin:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'react-native-reanimated/plugin',
  ],
};

3. Import the component into your project:

import FloatingActionButton from './components/Fab';
export default function HomeScreen() {
  return (
    <View style={styles.container}>
      {/* Your main content */}
      <FloatingActionButton />
    </View>
  );
}

4. Customize the menu items by editing the menuItems array inside the FloatingActionButton component. Replace the default entries with your own actions:

const menuItems = [
  {
    icon: "your-icon-name",
    title: "Your Action",
    subtitle: "Brief description of the action",
  },
  // Add more items as needed
];

5. Adjust the animation parameters by modifying the spring values in the component. Change damping and stiffness values in the withSpring calls to alter the animation feel. Modify the expandedWidth and expandedHeight variables to control the menu size.

Related Resources

• Reanimated 3 Documentation – Official guide for React Native animations
• expo-blur Package – Documentation for blur effects in Expo
• React Native Vector Icons – Icon library used in the component
• React Native StyleSheet Guide – Styling reference for mobile UIs

FAQs

Q: Does this component work with bare React Native projects?
A: Yes but you must install expo-blur separately and configure the native modules. Expo projects work out of the box.

Q: How do I change the blur intensity?
A: Modify the intensity prop in the AnimatedBlurView component. Higher values create stronger blur effects.

Q: Can I use custom icons instead of Ionicons?
A: Yes replace the Ionicons component with your preferred icon library. Ensure the icon names match your chosen set.

Q: Why does the animation feel sluggish on older devices?
A: Reduce the damping value in spring animations or decrease the number of menu items for better performance.