rslabdocs

FAB

A floating action button that expands into a staggered stack of labeled actions.

ReanimatedHapticsNativeWindSource

Prerequisites

FAB needs an icon set for the main button and each action, plus haptics and Reanimated for the fan-out animation.


npx expo install @hugeicons/core-free-icons @hugeicons/react-native expo-haptics react-native-reanimated

Install


npx @rslab/cli add fab

Usage

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

import { Note01Icon, Folder01Icon, ScanIcon } from '@hugeicons/core-free-icons';

<Fab
  actions={[
    { label: 'New note', icon: Note01Icon, onPress: () => {} },

    { label: 'New folder', icon: Folder01Icon, onPress: () => {} },

    { label: 'Scan', icon: ScanIcon, onPress: () => {} },
  ]}
/>;

Fab positions itself absolute inset-0, so it reaches for a backdrop that fills its nearest positioned ancestor. Wrap it in a relative container sized to whatever area it should float over, usually the whole screen. Give one action a color to make it stand out from the rest of the stack:

<Fab
  actions={[
    { label: 'New note', icon: Note01Icon, onPress: () => {} },

    {
      label: 'Delete all',
      icon: Delete02Icon,
      onPress: confirmDelete,
      color: '#ef4444',
    },
  ]}
/>

Props

PropTypeDefault
actions
{ label: string; icon: HugeIcon; onPress: () => void; color?: string }[]
-

Rendered closest-to-FAB first. A per-action color gives that bubble a solid background and switches its icon to white.

icon?
HugeIcon
Add01Icon

The closed-state main icon. Rotates 45° into an "X" on open, works best with something roughly symmetric.

disabled?
boolean
false

Blocks and dims the main button. Does nothing to actions already open.

haptic?
boolean
true

Mutes every tap (open, close, and each action) when false.

className?
string
-

Extend or override the root absolute inset-0 wrapper.

See exactly how this works with an RSLAB subscription.

Get Pro

On this page