# Fluid Tab Bar — Animated Liquid Bottom Navigation for React Native & Expo

> A floating bottom tab bar for React Native whose highlight stretches from tab to tab like liquid. Two styles (a pill behind the icon, or a tab that expands to show its label), badges that pop, icons that light up as the pill passes. Reanimated 4, light and dark, touch and mouse.

- Kind: Mobile component (Navigation & Tab Bars)
- Price: Free
- License: MIT License. Do anything with it, keeping the copyright notice.
- Developer: UpFork
- Tags: tab-bar, react-native, expo, reanimated, bottom-navigation, navigation, animation
- npm packages: expo-haptics, react-native-reanimated, react-native-svg, react-native-worklets
- Published: 2026-10-14
- Updated: 2026-10-14
- Page: https://upfork.dev/products/fluid-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 expo-haptics react-native-reanimated 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, so it should feel good. Fluid Tab Bar's highlight moves like a drop of liquid: the edge facing the new tab darts ahead, the other follows, and the pill stretches, thins a little, and settles round on arrival.

- **Two styles.** `pill` keeps the tabs equal with the highlight hugging the icon; `expand` opens the focused tab to show its label beside its icon.
- **Alive, not busy.** Icons light up as the pill sweeps past them, the focused icon lifts a touch, and badges pop when their count grows.
- **Badges that read.** Counts (99+ past 99) or plain dots, which turn the pill's colors when the pill is under them.
- **Your icons, or ours.** Any `{ color, size, focused }` component works; nine outlined-and-filled icons come with it.
- **Touch and mouse, light and dark.** Pressable everywhere, haptic ticks on phones, a tab list for screen readers, and a calm glide with reduced motion.
- **Drops into React Navigation** as a custom `tabBar`.