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
bash
npm install react-native-reanimated @expo/vector-iconsUsage
tsx
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
tsx
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
tsx
<AnimatedFab
isFabOpen={isOpen}
handleFabPress={() => setIsOpen(!isOpen)}
onClickOutside={() => setIsOpen(false)}
>
<YourCustomComponent />
</AnimatedFab>