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
All dimensional values in Jelly Tabs live under config.layout. Because config accepts a DeepPartial, you only supply the keys you want to change — everything else stays at its default. Additional props at the component level (maxWidth, displayScale) control the outer sizing of the bar.
The TabBarLayoutConfig interface
interface TabBarLayoutConfig {
iconSize: number;
itemHeight: number;
trackHeight: number;
trackInset: number;
maskOverscanX: number;
maskOverscanY: number;
}
Defaults
| Key | Default | Description |
|---|
iconSize | 28 | Base icon size (px) passed to each activeIcon / inactiveIcon render function. |
itemHeight | 56 | Height of a single tab and the animated selected pill. |
trackHeight | 64 | Height of the full track / pill container. |
trackInset | 4 | Padding between the track edge and the tab items. |
maskOverscanX | 48 | Extra horizontal bleed of the pill mask beyond the track edges. |
maskOverscanY | 16 | Extra vertical bleed of the pill mask beyond the track edges. |
Tip: trackHeight should always be ≥ itemHeight + 2 × trackInset. The default values already satisfy this (64 ≥ 56 + 8).
Passing layout overrides via config
config is a DeepPartial<TabBarConfig>, so nest your values under config.layout:
<JellyTabBarHeadless
items={items}
config={{
layout: {
trackHeight: 72,
iconSize: 32,
},
}}
/>
maxWidth prop
Type: DimensionValue — Default: 400
Constrains the track to a maximum width. The bar always centers itself within its parent. Pass a number for pixels, or any React Native DimensionValue string such as "80%".
<JellyTabBarHeadless
items={items}
maxWidth={480}
/>
displayScale prop
Type: number — Default: 1
Multiplies every resolved layout dimension uniformly. Useful for producing high-quality screenshots or video recordings where you want the bar rendered at 2× or 3× size without changing any individual config values.
// Render the tab bar at double size for a recording
<JellyTabBarHeadless
items={items}
displayScale={2}
recording
/>
Sizing the wrapper for JellyTabBarHeadless
JellyTabBarHeadless does not add its own wrapper height. Your container must be sized to exactly:
height = config.layout.trackHeight × displayScale
import { View } from "react-native";
import { JellyTabBarHeadless } from "react-native-jelly-tabs";
const TRACK_HEIGHT = 72;
const SCALE = 1;
export default function TabBarWrapper() {
return (
<View style={{ height: TRACK_HEIGHT * SCALE }}>
<JellyTabBarHeadless
items={items}
config={{ layout: { trackHeight: TRACK_HEIGHT } }}
displayScale={SCALE}
/>
</View>
);
}
Code examples
Taller track with larger icons
import { JellyTabBarHeadless } from "react-native-jelly-tabs";
const TRACK_HEIGHT = 76;
export default function MyTabBar() {
return (
<View style={{ height: TRACK_HEIGHT }}>
<JellyTabBarHeadless
items={items}
config={{
layout: {
iconSize: 32,
itemHeight: 62,
trackHeight: TRACK_HEIGHT,
trackInset: 7,
},
}}
/>
</View>
);
}
Compact bar with tighter insets
import { JellyTabBarHeadless } from "react-native-jelly-tabs";
const TRACK_HEIGHT = 52;
export default function CompactTabBar() {
return (
<View style={{ height: TRACK_HEIGHT }}>
<JellyTabBarHeadless
items={items}
config={{
layout: {
iconSize: 22,
itemHeight: 44,
trackHeight: TRACK_HEIGHT,
trackInset: 4,
},
}}
/>
</View>
);
}
Fluid width bar
import { JellyTabBarHeadless } from "react-native-jelly-tabs";
export default function FluidTabBar() {
return (
<View style={{ height: 64 }}>
<JellyTabBarHeadless
items={items}
maxWidth="90%"
/>
</View>
);
}
