Jelly Tabs Exported Constants: Colors, Layout, and Config

react-native-jelly-tabs exports all of its internal default values as named constants. You can import them to inspect defaults at runtime, spread them when building custom UIs, or use them as a baseline in tests.

import {
  DEFAULT_TAB_BAR_CONFIG,
  DEFAULT_TAB_BAR_COLORS,
  DEFAULT_TAB_BAR_OPACITY,
  DISTORTION,
  PILL_JELLY,
  TABBAR_LAYOUT,
  resolveTabBarConfig,
} from 'react-native-jelly-tabs';

`DEFAULT_TAB_BAR_COLORS`

The built-in color palette used when no colors prop is supplied. All values are solid hex strings.

const DEFAULT_TAB_BAR_COLORS: TabBarColors = {
  surface: '#22211f',
  selectedSurface: '#f2eee7',
  activeContent: '#11100f',
  inactiveContent: '#b8b4ad',
};

Key	Default	Layer
`surface`	`#22211f`	Track background fill (the dark pill container).
`selectedSurface`	`#f2eee7`	Selected pill fill (the light animated indicator).
`activeContent`	`#11100f`	Icon and label color for the active (selected) tab.
`inactiveContent`	`#b8b4ad`	Icon and label color for inactive (unselected) tabs.

Usage — override only what you need:

import { DEFAULT_TAB_BAR_COLORS } from 'react-native-jelly-tabs';

<JellyTabBarHeadless
  items={items}
  colors={{
    ...DEFAULT_TAB_BAR_COLORS,
    selectedSurface: '#6c47ff', // swap just the pill color
  }}
/>

`DEFAULT_TAB_BAR_OPACITY`

Per-layer opacity defaults. All four layers default to fully opaque (1). Override individual keys via the opacity prop without affecting the others.

const DEFAULT_TAB_BAR_OPACITY: TabBarOpacity = {
  activeContent: 1,
  inactiveContent: 1,
  selectedSurface: 1,
  surface: 1,
};

Key	Default	Description
`surface`	`1`	Opacity of the track background layer.
`selectedSurface`	`1`	Opacity of the selected pill layer.
`activeContent`	`1`	Opacity of active (selected) icons and labels.
`inactiveContent`	`1`	Opacity of inactive icons and labels.

Usage — dim the track to let a blur backdrop show through:

import { DEFAULT_TAB_BAR_OPACITY } from 'react-native-jelly-tabs';

<JellyTabBarHeadless
  items={items}
  backdrop={<BlurView intensity={60} />}
  opacity={{
    ...DEFAULT_TAB_BAR_OPACITY,
    surface: 0.6, // semi-transparent track so the blur shows
  }}
/>

`TABBAR_LAYOUT`

The default values for config.layout — the physical dimensions of the track and pill. Typed as TabBarLayoutConfig.

const TABBAR_LAYOUT = {
  iconSize: 28,
  itemHeight: 56,
  maskOverscanX: 48,
  maskOverscanY: 16,
  trackHeight: 64,
  trackInset: 4,
} as const;

Key	Default	Description
`iconSize`	`28`	Base icon size passed to each `TabsIcon` via the `size` prop.
`itemHeight`	`56`	Height of a single tab slot and the animated pill.
`trackHeight`	`64`	Total height of the tab bar track.
`trackInset`	`4`	Padding between the outer track edge and the top/bottom of each item.
`maskOverscanX`	`48`	Extra horizontal pixels around the pill mask to prevent clipping during scale.
`maskOverscanY`	`16`	Extra vertical pixels around the pill mask for the same reason.

Usage — build a custom layout on top of the defaults:

import { TABBAR_LAYOUT } from 'react-native-jelly-tabs';

const myLayout = {
  ...TABBAR_LAYOUT,
  iconSize: 24,
  trackHeight: 60,
};

`PILL_JELLY`

The default values for config.pillJelly — the physics of the animated selection pill. Typed as PillJellyConfig.

const PILL_JELLY = {
  pressedScale: 1.3,
  snapOnPointerDown: true,
  frameConfig: {
    releaseDistanceFraction: 0.025,
    springs: {
      panel:    { stiffness: 300,  dampingRatio: 1   },
      press:    { stiffness: 1000, dampingRatio: 1   },
      scaleX:   { stiffness: 250,  dampingRatio: 0.6 },
      scaleY:   { stiffness: 250,  dampingRatio: 0.7 },
      value:    { stiffness: 1000, dampingRatio: 1   },
      velocity: { stiffness: 300,  dampingRatio: 0.5 },
    },
  },
} as const;

Top-level fields

Key	Default	Description
`pressedScale`	`1.3`	Scale factor applied to the pill while a finger is pressing.
`snapOnPointerDown`	`true`	Snaps the indicator toward the pressed tab immediately on pointer-down.

`frameConfig`

Key	Default	Description
`releaseDistanceFraction`	`0.025`	Keeps the pill inflated until it is within 2.5% of its snap point.

Springs

Spring	`stiffness`	`dampingRatio`	What it drives
`panel`	`300`	`1.0`	Translation of the pill panel to the target position.
`press`	`1000`	`1.0`	Immediate snap on pointer-down.
`scaleX`	`250`	`0.6`	Horizontal stretch/squish of the pill.
`scaleY`	`250`	`0.7`	Vertical squish of the pill.
`value`	`1000`	`1.0`	Underlying value channel for derived animations.
`velocity`	`300`	`0.5`	Velocity-tracking channel producing the jelly wobble.

Usage — tune a single spring while keeping everything else:

import { PILL_JELLY } from 'react-native-jelly-tabs';

const myPillJelly = {
  ...PILL_JELLY,
  pressedScale: 1.5,
  frameConfig: {
    ...PILL_JELLY.frameConfig,
    springs: {
      ...PILL_JELLY.frameConfig.springs,
      scaleX: { stiffness: 200, dampingRatio: 0.45 },
    },
  },
};

`DISTORTION`

The default values for config.distortion — the whole-track press scale, touch feedback, distortion spring, and vertical drag behavior. Typed as DistortionConfig.

const DISTORTION = {
  pressedScale: 1.025,
  touchFeedback: {
    middleOpacityRatio: 0.43,
    opacity: 0.15,
    radius: 150,
    scale: 2,
  },
  spring: {
    damping: 18,
    mass: 0.9,
    stiffness: 240,
  },
  verticalDrag: {
    distortion: 0.08,
    distanceForMaxDistortion: 700,
    follow: 0.25,
    rubberBand: 0.14,
  },
} as const;

`pressedScale`

Key	Default	Description
`pressedScale`	`1.025`	Subtle scale of the entire track while a finger is pressing.

`touchFeedback`

Key	Default	Description
`opacity`	`0.15`	Base opacity of the radial glow at the touch point.
`middleOpacityRatio`	`0.43`	Relative opacity at the 45% gradient stop (multiplied by `opacity`).
`radius`	`150`	Base gradient radius in logical pixels.
`scale`	`2`	Multiplier applied to `radius`; final radius = `150 × 2 = 300px`.

`spring`

Key	Default	Description
`damping`	`18`	Damping coefficient of the distortion spring.
`mass`	`0.9`	Mass of the distortion spring.
`stiffness`	`240`	Stiffness of the distortion spring.

`verticalDrag`

Key	Default	Description
`distortion`	`0.08`	Width squish factor per unit of normalized vertical drag.
`distanceForMaxDistortion`	`700`	Drag distance (px) that saturates the distortion effect.
`follow`	`0.25`	Fraction of vertical drag that the bar physically follows.
`rubberBand`	`0.14`	Rubber-band resistance applied on top of the follow offset.

Usage — spread the distortion defaults and override one sub-object:

import { DISTORTION } from 'react-native-jelly-tabs';

const myDistortion = {
  ...DISTORTION,
  verticalDrag: {
    ...DISTORTION.verticalDrag,
    follow: 0.4,
    rubberBand: 0.2,
  },
};

`DEFAULT_TAB_BAR_CONFIG`

The top-level assembled config object. This is what the library uses when no config prop is passed.

const DEFAULT_TAB_BAR_CONFIG: TabBarConfig = {
  layout: TABBAR_LAYOUT,
  pillJelly: PILL_JELLY,
  distortion: DISTORTION,
};

Import it when you want a guaranteed-complete reference snapshot to inspect, clone, or diff against:

import { DEFAULT_TAB_BAR_CONFIG } from 'react-native-jelly-tabs';

// Inspect a deeply nested default
console.log(DEFAULT_TAB_BAR_CONFIG.pillJelly.frameConfig.springs.panel);
// → { stiffness: 300, dampingRatio: 1 }

// Shallow-clone the layout tier
const customLayout = {
  ...DEFAULT_TAB_BAR_CONFIG.layout,
  iconSize: 24,
};

`resolveTabBarConfig`

function resolveTabBarConfig(partial?: DeepPartial<TabBarConfig>): TabBarConfig

Merges a DeepPartial<TabBarConfig> override on top of all defaults and returns a complete TabBarConfig. Every nested sub-object is merged independently, so you can override a single spring without providing the other five.

import { resolveTabBarConfig } from 'react-native-jelly-tabs';

// No argument → identical to DEFAULT_TAB_BAR_CONFIG
const defaults = resolveTabBarConfig();

// Partial override → fully resolved object
const config = resolveTabBarConfig({
  layout: { iconSize: 24 },
  pillJelly: {
    pressedScale: 1.5,
    frameConfig: {
      springs: {
        scaleX: { stiffness: 200, dampingRatio: 0.45 },
      },
    },
  },
});

config.layout.trackHeight;   // 64   — default preserved
config.layout.iconSize;      // 24   — overridden
config.pillJelly.pressedScale; // 1.5  — overridden
config.pillJelly.frameConfig.springs.panel; // { stiffness: 300, dampingRatio: 1 } — default preserved

When to use `resolveTabBarConfig` vs. the `config` prop

Scenario	Recommendation
Customizing the component appearance	Pass a partial object directly to the `config` prop — no need to call `resolveTabBarConfig`.
Inspecting what the resolved value would be	Call `resolveTabBarConfig(myPartial)` to get the full object for debugging or logging.
Building a custom tab bar component with your own animation hooks	Call `resolveTabBarConfig()` to get a strongly-typed, mutable snapshot of all defaults.
Writing unit tests that assert on config values	Use `resolveTabBarConfig()` to produce a deterministic baseline.

When to use the raw constants

The individual constants (TABBAR_LAYOUT, PILL_JELLY, DISTORTION) are useful when you are building a completely custom tab bar UI and want to reference the library’s design values without re-deriving them:

import {
  TABBAR_LAYOUT,
  DEFAULT_TAB_BAR_COLORS,
  DEFAULT_TAB_BAR_OPACITY,
} from 'react-native-jelly-tabs';

// Style a custom wrapper to match the Jelly track height
const styles = StyleSheet.create({
  track: {
    height: TABBAR_LAYOUT.trackHeight,  // 64
    borderRadius: TABBAR_LAYOUT.trackHeight / 2,
    backgroundColor: DEFAULT_TAB_BAR_COLORS.surface, // '#22211f'
    opacity: DEFAULT_TAB_BAR_OPACITY.surface, // 1
  },
});

They are also useful for spreading over defaults when constructing a full config object imperatively rather than through the config prop:

import { PILL_JELLY, TABBAR_LAYOUT, DISTORTION } from 'react-native-jelly-tabs';
import type { TabBarConfig } from 'react-native-jelly-tabs';

const appConfig: TabBarConfig = {
  layout: {
    ...TABBAR_LAYOUT,
    iconSize: 24,
  },
  pillJelly: {
    ...PILL_JELLY,
    pressedScale: 1.4,
  },
  distortion: {
    ...DISTORTION,
    spring: {
      ...DISTORTION.spring,
      stiffness: 280,
    },
  },
};

Components

Types & Config

Jelly Tabs Exported Constants: Colors, Layout, and Config

`DEFAULT_TAB_BAR_COLORS`

`DEFAULT_TAB_BAR_OPACITY`

`TABBAR_LAYOUT`

`PILL_JELLY`

Top-level fields

`frameConfig`

Springs

`DISTORTION`

`pressedScale`

`touchFeedback`

`spring`

`verticalDrag`

`DEFAULT_TAB_BAR_CONFIG`

`resolveTabBarConfig`

When to use `resolveTabBarConfig` vs. the `config` prop

When to use the raw constants

Build docs developers (and LLMs) love

Components

Types & Config

Documentation Index

​DEFAULT_TAB_BAR_COLORS

​DEFAULT_TAB_BAR_OPACITY

​TABBAR_LAYOUT

​PILL_JELLY

​Top-level fields

​frameConfig

​Springs

​DISTORTION

​pressedScale

​touchFeedback

​spring

​verticalDrag

​DEFAULT_TAB_BAR_CONFIG

​resolveTabBarConfig

​When to use resolveTabBarConfig vs. the config prop

​When to use the raw constants

Build docs developers (and LLMs) love

`DEFAULT_TAB_BAR_COLORS`

`DEFAULT_TAB_BAR_OPACITY`

`TABBAR_LAYOUT`

`PILL_JELLY`

Top-level fields

`frameConfig`

Springs

`DISTORTION`

`pressedScale`

`touchFeedback`

`spring`

`verticalDrag`

`DEFAULT_TAB_BAR_CONFIG`

`resolveTabBarConfig`

When to use `resolveTabBarConfig` vs. the `config` prop

When to use the raw constants