managarten/apps/picture/packages/mobile-ui/components/ui/FAB

FAB (Floating Action Button)

Floating action button with spring animation and shadow.

Features

• ✅ Spring press animation
• ✅ Customizable position (bottom/right/left)
• ✅ Custom colors and icon
• ✅ Shadow effect
• ✅ Built with Reanimated

Installation

npx @memoro/ui add fab

Dependencies: icon, react-native-reanimated

Usage

Basic FAB

import { FAB } from '@/components/ui/FAB';

<FAB
  icon="add"
  onPress={() => console.log('Pressed')}
/>

Custom Colors

<FAB
  icon="camera"
  backgroundColor="#10B981"
  iconColor="#FFFFFF"
  onPress={() => {}}
/>

Custom Position

// Bottom right (default)
<FAB icon="add" bottom={20} right={20} onPress={() => {}} />

// Bottom left
<FAB icon="menu" bottom={20} left={20} onPress={() => {}} />

// Higher position
<FAB icon="add" bottom={150} onPress={() => {}} />

Larger Icon

<FAB
  icon="heart"
  iconSize={28}
  onPress={() => {}}
/>

Props

Prop	Type	Default	Description
icon	string	-	Required - Icon name
onPress	() => void	-	Required - Press handler
bottom	number	100	Distance from bottom (px)
right	number	16	Distance from right (px)
left	number	-	Distance from left (overrides right)
backgroundColor	string	'#3B82F6'	Button background color
iconColor	string	'#FFFFFF'	Icon color
iconSize	number	24	Icon size
style	ViewStyle	-	Additional container styles

Default Styling

• Size: 56x56px
• Border Radius: 28px (perfect circle)
• Background: Blue (#3B82F6)
• Icon: White, 24px
• Shadow: Colored shadow matching background

Animation

• Press scales down to 0.9
• Releases back to 1.0
• Spring animation with damping

Examples

Create/Add FAB

<FAB
  icon="add"
  backgroundColor="#3B82F6"
  onPress={handleCreate}
/>

Camera FAB

<FAB
  icon="camera"
  backgroundColor="#10B981"
  bottom={100}
  onPress={handleCamera}
/>

Edit FAB

<FAB
  icon="pencil"
  backgroundColor="#F59E0B"
  bottom={80}
  right={20}
  onPress={handleEdit}
/>

Multiple FABs (Stacked)

<>
  <FAB
    icon="add"
    bottom={100}
    right={20}
    onPress={handlePrimary}
  />
  <FAB
    icon="filter"
    bottom={170}
    right={20}
    backgroundColor="#6B7280"
    onPress={handleSecondary}
  />
</>

Position Tips

• Default: bottom={100}, right={16}
• Above Tab Bar: bottom={80-100}
• Below Tab Bar: bottom={20}
• Multiple FABs: Stack with 70px spacing

Dependencies

• Icon component
• react-native-reanimated (v3+)

Notes

• Uses absolute positioning - ensure parent has appropriate layout
• Z-index of 10 (appears above most content)
• Shadow color matches background for glowing effect
• Press animation is hardware accelerated (Reanimated)
• Icon uses Icon component (SF Symbols on iOS, Ionicons elsewhere)