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.

JellyTabBar integrates directly with @react-navigation/bottom-tabs via the standard tabBar prop. Drop it in as a one-line replacement for the default tab bar; your existing screen options for icons, labels, badges, and colors all continue to work.

​
Basic Setup

Install React Navigation and its dependencies if you haven’t already, then pass JellyTabBar to the tabBar prop of your bottom tab navigator: 
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { JellyTabBar } from "react-native-jelly-tabs";

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator tabBar={(props) => <JellyTabBar {...props} />}>
        {/* your Tab.Screen definitions */}
      </Tab.Navigator>
    </NavigationContainer>
  );
}
The navigator injects state, descriptors, navigation, and insets through the callback. Do not pass these props manually — they are provided automatically.

​
Floating Mode

Pass the floating prop to overlay the bar on top of the screen instead of pushing it below: 
<Tab.Navigator tabBar={(props) => <JellyTabBar {...props} floating />}>
With floating active, the bar is absolutely positioned (bottom: 0, left: 0, right: 0, zIndex: 1) and the screen content fills the full height behind it.
Scrollable screens need extra padding. When floating is enabled, the bar overlays the bottom of the screen. Ensure scrollable content has enough paddingBottom so the last item is reachable above the bar. A value equal to the bar height (64 by default) plus insets.bottom + 12 works well in most cases.

​
Supported Navigation Options

JellyTabBar reads these standard React Navigation options from each screen’s options object.

​
Icons

<Tab.Screen
  name="Feed"
  component={FeedScreen}
  options={{
    tabBarIcon: ({ color, size }) => (
      <MaterialIcons color={color} name="home" size={size} />
    ),
  }}
/>
tabBarIcon receives { color, focused, size }. The component calls it twice internally — once with focused: true (rendered through the animated pill mask) and once with focused: false (rendered in the track background).

​
Labels

OptionEffect
titleDefault tab label when tabBarLabel is absent.
tabBarLabelString label override.
tabBarLabelStyleStyleProp<TextStyle> applied to the label.
tabBarShowLabelSet false to hide labels for all tabs.
Function-valued tabBarLabel and custom tab buttons (tabBarButton) are not currently rendered by the Jelly layout. Use a string value for tabBarLabel instead.

​
Badges

options={{
  tabBarBadge: 5,
  tabBarBadgeStyle: { backgroundColor: "#ff3b30" },
}}
tabBarBadge accepts a number or string. Apply custom styles with tabBarBadgeStyle (StyleProp<TextStyle>).

​
Colors

These options are resolved from the focused screen’s descriptor and apply to the entire bar:
OptionMaps to
tabBarActiveTintColorActive icon and label color (colors.activeContent)
tabBarInactiveTintColorInactive icon and label color (colors.inactiveContent)
tabBarActiveBackgroundColorSelected pill color (colors.selectedSurface)
tabBarInactiveBackgroundColorTrack background color (colors.surface)
You can also pass a colors prop directly to JellyTabBar for static overrides that take priority over navigation options: 
<Tab.Navigator
  tabBar={(props) => (
    <JellyTabBar
      {...props}
      colors={{
        surface: "#1a1a2e",
        selectedSurface: "#e94560",
        activeContent: "#ffffff",
        inactiveContent: "#888888",
      }}
    />
  )}
>

​
Style Overrides

Prop / OptionTypeDescription
tabBarStyleStyleProp<ViewStyle> (screen option)Extra styles applied to the bar’s outer container.
containerStyleStyleProp<ViewStyle> (prop)Wrapper override applied after tabBarStyle.
maxWidthDimensionValueMaximum track width (default 400). The bar centers itself in wider containers.

​
Accessibility & Testing

OptionEffect
tabBarAccessibilityLabelSets accessibilityLabel on the tab’s accessible view. Falls back to the tab label.
tabBarButtonTestIDSets testID on the tab’s accessible view for use in automated tests.

​
Full Working Example

A two-tab React Navigation setup with floating mode and icons: 
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { MaterialIcons } from "@react-native-vector-icons/material-icons";
import { JellyTabBar } from "react-native-jelly-tabs";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { View, Text } from "react-native";

const Tab = createBottomTabNavigator();

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Home</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Profile</Text>
    </View>
  );
}

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <NavigationContainer>
          <Tab.Navigator
            screenOptions={{ headerShown: false }}
            tabBar={(props) => <JellyTabBar {...props} floating />}
          >
            <Tab.Screen
              name="Home"
              component={HomeScreen}
              options={{
                tabBarIcon: ({ color, size }) => (
                  <MaterialIcons color={color} name="home" size={size} />
                ),
                tabBarAccessibilityLabel: "Home tab",
              }}
            />
            <Tab.Screen
              name="Profile"
              component={ProfileScreen}
              options={{
                tabBarIcon: ({ color, size }) => (
                  <MaterialIcons color={color} name="person" size={size} />
                ),
                tabBarBadge: 2,
                tabBarAccessibilityLabel: "Profile tab",
              }}
            />
          </Tab.Navigator>
        </NavigationContainer>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}
GestureHandlerRootView is required by React Native Gesture Handler v2+ and must wrap your entire application. SafeAreaProvider ensures the tab bar respects device safe-area insets on notched and dynamic-island devices.

Build docs developers (and LLMs) love

Get started for freeTalk to us