# Gooey Tab Bar — Liquid Metaball Bottom Navigation for React Native & Expo

> A bottom tab bar whose focused tab rides in a liquid bubble: it pinches off, flies and grows a new neck where it lands. A notched "cradle" style, a centre button that blooms actions, popping badges. Crisp Skia geometry with real shadows, light and dark, 60 fps.

- Kind: Mobile component (Navigation & Tab Bars)
- Price: Free
- License: MIT License. Do anything with it, keeping the copyright notice.
- Developer: UpFork
- Tags: tab-bar, effect, react-native, expo, skia, reanimated, bottom-navigation, metaball
- npm packages: @shopify/react-native-skia, expo-haptics, react-native-reanimated, react-native-safe-area-context, react-native-svg, react-native-worklets
- Published: 2026-10-14
- Updated: 2026-10-14
- Page: https://upfork.dev/products/gooey-tab-bar-react-native

## How to get it

It's a React Native component for Expo apps (Expo SDK 57), not a shadcn item: copy its folders into the app's root from its ZIP (Download source on its page) or through UpFork's MCP server (install_product), then install its packages with Expo:

```bash
npx expo install @shopify/react-native-skia expo-haptics react-native-reanimated react-native-safe-area-context react-native-svg react-native-worklets
```

It's free and in no plan: an AI assistant installs it through MCP with no account, and its ZIP downloads with a free UpFork account.

Step by step, with the App.tsx that shows it and Skia's web setup: https://upfork.dev/docs/mobile.

## About

The tab bar is the part of your app people touch most — Gooey Tab Bar makes every touch feel like liquid. The focused tab rides in a bubble held to the bar by a little neck. Tap another tab and the neck thins, pinches off, the bubble flies across stretching with its speed, and a new neck reaches up to catch it.

- **Real liquid, crisp edges.** The shapes are geometry computed every frame — not a blur filter — so they're sharp, with one soft shadow and a fine hairline over the whole surface.
- **Two styles.** `drop` floats the bubble on its neck; `cradle` sits it in a notch that flows along the bar.
- **A centre action that blooms.** Two to four quick actions bud off the centre button through stretching bridges, with labels and a scrim — and fold back in reverse.
- **Details that finish it.** Badges that pop when they grow, icons that hand over mid-flight, the focused label kept under the bubble, ten outlined-and-filled icons included.
- **Ready for your navigator.** Works standalone, or as React Navigation's or Expo Router's `tabBar`.
- **Touch and mouse, light and dark**, haptics on phones, a proper tab list for screen readers, and calm motion for reduced-motion users. 60 fps on integrated graphics in the browser.

Three complete demos: food delivery, fitness (cradle) and a messenger — each in light and dark.