Skip to main content

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.

This guide walks you through installing react-native-jelly-tabs and the required peer dependencies. The steps are the same whether you use Expo managed workflow, Expo bare, or plain React Native — only the dependency install command differs.

​
Peer dependencies

Before Jelly Tabs can run, your project needs these libraries:
PackageMinimum version
react>=18.0.0
@react-native-masked-view/masked-view>=0.3.0
react-native-gesture-handler>=2.25.0 <4.0.0
react-native-reanimated>=3.16.0 <5.0.0
react-native-svg>=15.0.0

​
Installation steps

1

Install react-native-jelly-tabs

Add the package to your project with your package manager of choice:
npm install react-native-jelly-tabs
2

Install peer dependencies

Install all required peer dependencies. Use expo install if you are in an Expo project — it pins to Expo-compatible versions automatically.
npx expo install @react-native-masked-view/masked-view react-native-gesture-handler react-native-reanimated react-native-svg
npx expo install selects versions of each package that are verified to work with your installed Expo SDK version. Prefer it over plain npm install in Expo projects to avoid subtle incompatibilities.
3

Rebuild the native app

These packages include native modules that must be compiled into your app binary.
  • Expo managed / CNG workflow — regenerate native projects: 
    npx expo prebuild
  • Expo bare or plain React Native (iOS) — install CocoaPods and rebuild: 
    cd ios && pod install && cd ..
  • Plain React Native (Android) — a fresh build is enough; CocoaPods is not required on Android.
After the native rebuild, launch your app with the usual npx expo run:android, npx expo run:ios, or your IDE of choice.
Skipping the native rebuild after adding these packages will cause a runtime crash. JavaScript-only updates (Metro bundler refresh) are not sufficient — a full native build is required.
4

Finalize Gesture Handler and Reanimated setup

Both Gesture Handler and Reanimated require a small amount of extra configuration beyond the npm install step.Gesture Handler — wrap your root component with GestureHandlerRootView. Without this wrapper, gestures will not be recognized:
import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* rest of your app */}
    </GestureHandlerRootView>
  );
}
Reanimated — follow the official Reanimated installation guide to add the Babel plugin and any platform-specific steps.
If you are using Expo SDK 52 or later with the New Architecture enabled, Reanimated 4 is already integrated and you may not need an additional Babel plugin. Check the Reanimated docs for your exact SDK and Reanimated version.

​
Version compatibility

Jelly Tabs is compatible with several major versions of each native dependency so you can match what your app already uses:
PackageSupported rangeNotes
React Native>=0.76
Gesture Handler>=2.25 <4v3 requires React Native >=0.82
Reanimated>=3.16 <5
Gesture Handler v3 introduced API changes that require React Native >=0.82. If your app targets React Native 0.76–0.81, use Gesture Handler v2 (^2.25.0).

​
Next steps

Once installation is complete, head to the Quickstart to add your first animated tab bar.

Build docs developers (and LLMs) love

Get started for freeTalk to us