RNBlocks - React Native Components
[BLOCKS]/Floating Docker
SYS.UNIT // FLOATING-DOCKER

Floating Docker

A macOS-inspired floating dock navigation with magnification and spring physics.

RUNTIME: 0.00 KB
STYLES: StyleSheet
PLATFORMS: iOS • Android • Web

// SYSTEM.STAGE

┌┐
SIM.ACTIVE
└┘

Installation

Install the component and its peer dependencies automatically via the CLI:

pnpm dlx @rnblocks/cli add floating-docker

// SYS.USAGE

Drop this code into your screen or view:

floating-docker-example.tsx
1import FloatingDocker from "@/components/floating-docker";
2 
3export default function AppNavigation() {
4  return (
5    <FloatingDocker
6      initialTab="home"
7      theme="dark"
8      onTabChange={(tabId) => {
9        console.log("Navigated to tab:", tabId);
10      }}
11    />
12  );
13}

// SPEC.PROPS_API

Configurable interfaces for <FloatingDocker />

initialTab
string

ID of the initially selected tab item.

DEFAULT:"team"
theme
"dark" | "light"

Color theme mode for dock backdrop blur, icons, and indicator pill.

DEFAULT:"dark"
onTabChange
(tabId: string) => void

Callback triggered when a tab item is pressed.

DEFAULT:undefined
tabs
TabItem[]

Custom array of tab items with id, label, and renderIcon function.

DEFAULT:DEFAULT_TABS

// PERFORMANCE_&_A11Y

Native touch gestures, screen reader attributes, and 60–120 FPS frame budgets:

Declares accessibilityRole='tab' on each dock item.
Clear accessibilityLabel reflecting the tab destination (e.g. 'Home', 'Team').
Dynamic accessibilityState={{ selected: isActive }} announcing selected tab.
Generous touch target sizing (>48pt) for effortless mobile navigation.
[PREV]Calendar
Comparison Chart[NEXT]