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.
Overview
Jelly Tabs renders four distinct visual layers: the track surface, the selected pill surface, and the active and inactive content (icons and labels). Each layer has an independent color and opacity you can override — no rebuild required.
The TabBarColors interface
interface TabBarColors {
surface: string; // track background
selectedSurface: string; // selected pill background
activeContent: string; // icon / label shown inside the pill
inactiveContent: string; // icon / label shown outside the pill
}
Default palette
| Key | Default |
|---|
surface | #22211f |
selectedSurface | #f2eee7 |
activeContent | #11100f |
inactiveContent | #b8b4ad |
How the colors prop works
Pass a partial TabBarColors object. Only the keys you supply are overridden; the rest fall back to the defaults above. The merge happens shallowly at the top level of the object.
// Only override two of the four colors:
<JellyTabBarHeadless
items={items}
colors={{
surface: "#1a1a2e",
selectedSurface: "#e94560",
}}
/>
The TabBarOpacity interface
interface TabBarOpacity {
surface: number;
selectedSurface: number;
activeContent: number;
inactiveContent: number;
}
1. Values are clamped to the range 0–1 before use.
Important: Opacity is applied to the rendered content of each layer, not to the pill mask itself. The animated pill clipping shape remains fully opaque, so reducing selectedSurface opacity will reveal the track beneath the pill without distorting the mask animation.
How the opacity prop works
Like colors, pass a partial object — only include keys you want to change.
<JellyTabBarHeadless
items={items}
opacity={{ inactiveContent: 0.5 }}
/>
Expo Router / React Navigation mapping
When using <JellyTabBar /> with Expo Router or React Navigation, the standard screen options map onto Jelly’s color keys:
| Screen option | Maps to |
|---|
tabBarActiveTintColor | colors.activeContent |
tabBarInactiveTintColor | colors.inactiveContent |
tabBarActiveBackgroundColor | colors.selectedSurface |
tabBarInactiveBackgroundColor | colors.surface |
<Screen options={…} /> or screenOptions as usual. A color supplied directly via the colors prop on <JellyTabBar /> takes precedence over the matching screen option.
Code examples
Custom dark theme
import { JellyTabBarHeadless } from "react-native-jelly-tabs";
export default function MyTabBar() {
return (
<JellyTabBarHeadless
items={items}
colors={{
surface: "#0d0d0d",
selectedSurface: "#bb86fc",
activeContent: "#000000",
inactiveContent: "#666666",
}}
/>
);
}
Custom light theme
import { JellyTabBarHeadless } from "react-native-jelly-tabs";
export default function MyTabBar() {
return (
<JellyTabBarHeadless
items={items}
colors={{
surface: "#f0f0f0",
selectedSurface: "#1a73e8",
activeContent: "#ffffff",
inactiveContent: "#888888",
}}
/>
);
}
Dimming inactive icons with opacity
import { JellyTabBarHeadless } from "react-native-jelly-tabs";
export default function MyTabBar() {
return (
<JellyTabBarHeadless
items={items}
colors={{
surface: "#1c1c1e",
selectedSurface: "#ffd60a",
activeContent: "#1c1c1e",
inactiveContent: "#8e8e93",
}}
opacity={{
inactiveContent: 0.6,
selectedSurface: 0.95,
}}
/>
);
}
With Expo Router
// app/(tabs)/_layout.tsx
import { Tabs } from "expo-router";
import { JellyTabBar } from "react-native-jelly-tabs";
export default function TabLayout() {
return (
<Tabs
tabBar={(props) => (
<JellyTabBar
{...props}
colors={{
surface: "#18181b",
selectedSurface: "#f4f4f5",
}}
/>
)}
screenOptions={{
tabBarActiveTintColor: "#18181b",
tabBarInactiveTintColor: "#71717a",
}}
/>
);
}
