React Native Jelly Tabs is a physics-driven animated tab bar for React Native. Tabs snap, drag, and bounce with a fluid jelly effect — all rendered natively via Reanimated and Gesture Handler, with no JavaScript-thread animation bottlenecks.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/felipe-software/react-native-jelly-tabs/llms.txt
Use this file to discover all available pages before exploring further.
Live demo: jelly.felipe.software
Supported platforms
React Native Jelly Tabs runs on all three major React Native targets out of the box:| Platform | Supported |
|---|---|
| Android | ✅ |
| iOS | ✅ |
| React Native Web | ✅ |
Framework integrations
- Expo Router — drop
JellyTabBarstraight into thetabBarprop of<Tabs>. Hidden routes (href: null), deep links, and hardware back are all handled automatically. - React Navigation — works identically as a
tabBarprop replacement for React Navigation’s bottom tabs navigator. - Headless mode — use
JellyTabBarHeadlesswhen you manage your own navigation state and just want the animated component.
Version compatibility
Match Jelly Tabs against whatever native dependencies your app already uses:| Package | Supported range |
|---|---|
| React Native | >=0.76 |
| Gesture Handler | >=2.25 <4 (v3 requires React Native >=0.82) |
| Reanimated | >=3.16 <5 |
Key features
- Physics-driven animation — smooth jelly snapping, dragging, and press interactions powered entirely by Reanimated worklets and Gesture Handler.
- Navigation-aware selection — follows deep links, hardware back, and programmatic navigation without extra glue code.
- Expo Router hidden tabs — respects
href: nullcorrectly, including hidden focused routes with no false selection state. - Accessibility — per-tab VoiceOver and TalkBack semantics, including selected state and activation actions.
- Rich tab options — badges, test IDs, accessibility labels, label styles, and
tabLongPressevents. - Headless component —
JellyTabBarHeadlessintegrates with any custom router or fully controlled tab state. - Deeply customizable — configure colors, opacity, sizing, spring physics, distortion, backdrops, and touch feedback.
- TypeScript — ships with bundled type declarations, no
@types/package needed.
Get started
Installation
Install the package and its peer dependencies in Expo managed, Expo bare, or plain React Native.
Quickstart
Add a jelly-animated tab bar to your Expo Router app in minutes with a minimal working example.
Expo Router guide
Full walkthrough of JellyTabBar inside an Expo Router project, including floating mode and hidden tabs.
API Reference
Every prop and config value for JellyTabBar, JellyTabBarHeadless, and the supporting exports.