Skip to content
Native Animation
Radial FAB Menu animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add radial-fab-menu
Skia

Radial FAB Menu

A floating action menu that opens along an arc and collapses into its button, with configurable label fonts and accent color.

$9 for this animation

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

About this animation

Related guides

A floating action menu that opens along an arc and collapses into its button, with configurable label fonts and accent color.

How it works

  1. The component measures its own container and places a Nimbus workspace scene, glass tab bar, and 60 pt gradient FAB from that layout.
  2. One continuous progress shared value drives the veil, plus-to-close rotation, gooey Skia metaballs, and every action's spring path.
  3. Static icons are batched by visual group, while the five action icons, gooey trails, and rotating plus share one Skia canvas. The screen stays under six WebGL contexts on web.
  4. Gesture Handler tracks a touch from the FAB through the 150-degree arc, selecting the nearest action without React state on every frame.
  5. Release over an action calls onAction, shows a compact confirmation toast, and reverses the same arc in reverse order.
  6. Reduced motion replaces the arc and gooey transition with a calm fade while preserving tap access to every action.

Install

npx expo install expo-blur expo-linear-gradient @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-worklets

Usage

import RadialFabMenu from './RadialFabMenu';

export function WorkspaceScreen() {
  return <RadialFabMenu onAction={(label) => trackAction(label)} />;
}

The forwarded ref exposes open(), close(), and playUploadMoment() for product tours and demos.

Props

PropTypeDefaultDescription
actionstypeof ACTIONSACTIONSAction labels and colors are fixed to the built-in Lucide action set.
onAction(label: string) => voidundefinedCalled after an action is selected.
fontFamilystringundefinedTypeface used by the menu labels.
selectedFontFamilystringundefinedTypeface used by the selected action label.
styleStyleProp<ViewStyle>undefinedOptional container style.
accessibilityLabelstring'Radial action menu'Accessible label for the menu.
testIDstringundefinedTest identifier applied to the outer container.
accentColorstring'#7C5CFF'Accent used by the primary action and navigation.

Compatibility

  • Expo SDK 58, React Native 0.88, Reanimated 4.7, Worklets 0.13, Skia 2.14.
  • iOS, Android, and web are supported by the implementation.
  • expo-blur is included in Expo Go. Skia and gesture interactions may require a development build in a client project.

Accessibility

The menu exposes a labeled menu role, a toggle action, and one accessibility action for every radial option. Every action remains reachable by a 44 pt-plus touch target. useReducedMotion() removes the arc and gooey movement and uses a short fade instead, and confirmations are announced as live alerts.

Why this one

The familiar radial FAB pattern becomes a believable Nimbus workspace rather than a floating demo control. A single interruptible progress value keeps the liquid departure, stagger, veil, and plus-to-close rotation coherent, while tinted action materials, a spacious 150-degree fan, grouped web-safe icon rendering, and the guided upload tour create a useful product moment instead of decorative motion.

Customization notes

Movement follows gestures, scroll position, or interruptible spring physics. A global duration is not exposed; reduced-motion fades retain their short fixed timing.

More animations