AnimatedFab Component

A customizable animated floating action button (FAB) for React Native with smooth animations and flexible item rendering.

Features

• ✨ Smooth animations with react-native-reanimated
• 🎯 Click outside to close
• 🔧 Custom components or automatic icon/label rendering
• 🏷️ Badge support for disabled items
• 📱 Responsive design

Installation

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

Usage

import React, { useState } from 'react';
import AnimatedFab, { AnimatedFabItemProps } from '../common/AnimatedFab';

const WalletMenu = () => {
    const [isMenuOpen, setIsMenuOpen] = useState(false);

    const menuOptions: AnimatedFabItemProps[] = [
        {
            id: 'send',
            icon: 'paper-plane',
            label: 'Send',
            description: 'Send tokens or collectibles to any address or ENS username.',
            onPress: () => {
                console.log('Send');
                setIsMenuOpen(false);
            },
        },
        {
            id: 'purchase',
            icon: 'cart',
            label: 'Purchase',
            description: 'Purchase crypto using your preferred bank account or card.',
            onPress: () => console.log('Purchase'),
            disabled: true,
            badge: 'US & EU Only',
        },
    ];

    return (
        <AnimatedFab
            isFabOpen={isMenuOpen}
            handleFabPress={() => setIsMenuOpen(!isMenuOpen)}
            onClickOutside={() => setIsMenuOpen(false)}
            fabIcon="add"
            backgroundColor="#000000"
            items={menuOptions}
        />
    );
};

Props

Prop	Type	Required	Description
isFabOpen	boolean	✅	Controls FAB state
handleFabPress	() => void	✅	FAB press callback
onClickOutside	() => void		Close on outside click
items	AnimatedFabItemProps[]		Menu items
children	React.ReactNode		Custom content
fabIcon	keyof typeof Ionicons.glyphMap		FAB icon (default: "add")
backgroundColor	string		FAB color (default: "#1D9BF0")
style	ViewStyle		Custom styles
minContentHeight	number		Min content height (default: 300)

AnimatedFabItemProps

type AnimatedFabItemProps = {
  id: string;
  icon?: keyof typeof Ionicons.glyphMap;
  label?: string;
  description?: string;
  onPress: () => void;
  disabled?: boolean;
  badge?: string; // Shows only on disabled items
}

Custom Content

<AnimatedFab
  isFabOpen={isOpen}
  handleFabPress={() => setIsOpen(!isOpen)}
  onClickOutside={() => setIsOpen(false)}
>
  <YourCustomComponent />
</AnimatedFab>