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.

​
Overview

Jelly Tabs exposes two backdrop slots for injecting blur or decorative layers beneath the track and pill surfaces, plus four touch feedback props for controlling the radial glow that appears on press. Both features are provider-agnostic — the library has no dependency on expo-blur or any specific platform blur implementation.

​
Backdrop props

​
backdrop

Type: ReactNode A React node rendered below the track surface color layer. It fills the entire track shape and is clipped to the rounded pill outline along with the surface color. The canonical use-case is a blur view that makes the track look frosted. 
<JellyTabBarHeadless
  items={items}
  backdrop={<MyBlurView intensity={60} />}
/>

​
selectedBackdrop

Type: ReactNode A React node rendered below the selected-pill color layer, clipped inside the animated pill mask. Use it to add a per-tab blur, gradient, or texture that moves with the pill. 
<JellyTabBarHeadless
  items={items}
  selectedBackdrop={<MyBlurView intensity={80} tint="light" />}
/>

​
Why backdrops are provider-agnostic

The library renders your node as-is inside a clipping container. There is no import of expo-blur, @react-native-community/blur, or any other specific package. This means:
  • You can use expo-blur on Expo-managed projects.
  • You can use @react-native-community/blur in bare React Native apps.
  • You can pass any View, Image, gradient, or decorative element.
  • You can pass null or omit the prop entirely — there is no default backdrop.

​
Touch feedback props

When a user taps a tab, a radial gradient glow expands from the tap point. Four props let you control this effect without touching config.distortion.

​
touchFeedbackEnabled

Type: boolean — Default: true Set to false to disable the radial glow entirely. 
<JellyTabBarHeadless
  items={items}
  touchFeedbackEnabled={false}
/>

​
touchFeedbackColor

Type: string — Default: colors.selectedSurface Overrides the color of the radial gradient. Defaults to the selected pill color so the glow matches the pill. 
<JellyTabBarHeadless
  items={items}
  touchFeedbackColor="#ff6b6b"
/>

​
touchFeedbackOpacity

Type: number — Default: config.distortion.touchFeedback.opacity (0.15) Overrides the base opacity of the glow without changing any config value. Useful when you want a more or less prominent effect across the whole bar. 
<JellyTabBarHeadless
  items={items}
  touchFeedbackOpacity={0.3}
/>

​
touchFeedbackScale

Type: number — Default: config.distortion.touchFeedback.scale (2) Overrides the radius multiplier. The rendered radius is config.distortion.touchFeedback.radius × touchFeedbackScale × displayScale. Increase for a wider glow, decrease for a tighter one. 
<JellyTabBarHeadless
  items={items}
  touchFeedbackScale={3}
/>

​
Code examples

​
Expo Blur backdrop

import { BlurView } from "expo-blur";
import { JellyTabBarHeadless } from "react-native-jelly-tabs";

export default function BlurredTabBar() {
  return (
    <JellyTabBarHeadless
      items={items}
      colors={{
        // Make the surface transparent so the blur shows through
        surface: "transparent",
        selectedSurface: "#ffffff",
        activeContent: "#000000",
        inactiveContent: "#666666",
      }}
      backdrop={
        <BlurView
          intensity={70}
          tint="dark"
          style={{ flex: 1 }}
        />
      }
      selectedBackdrop={
        <BlurView
          intensity={40}
          tint="light"
          style={{ flex: 1 }}
        />
      }
    />
  );
}

​
Disabling touch feedback

import { JellyTabBarHeadless } from "react-native-jelly-tabs";

export default function NoGlowTabBar() {
  return (
    <JellyTabBarHeadless
      items={items}
      touchFeedbackEnabled={false}
    />
  );
}

​
Custom touch feedback color and intensity

import { JellyTabBarHeadless } from "react-native-jelly-tabs";

export default function ColoredGlowTabBar() {
  return (
    <JellyTabBarHeadless
      items={items}
      colors={{
        surface: "#0a0a0a",
        selectedSurface: "#7c3aed",
        activeContent: "#ffffff",
        inactiveContent: "#6b7280",
      }}
      // Glow color matches the pill, but at higher opacity and wider spread
      touchFeedbackColor="#7c3aed"
      touchFeedbackOpacity={0.25}
      touchFeedbackScale={2.5}
    />
  );
}

​
Backdrop with Expo Router

// app/(tabs)/_layout.tsx
import { BlurView } from "expo-blur";
import { Tabs } from "expo-router";
import { JellyTabBar } from "react-native-jelly-tabs";

export default function TabLayout() {
  return (
    <Tabs
      tabBar={(props) => (
        <JellyTabBar
          {...props}
          colors={{
            surface: "rgba(30, 30, 30, 0.4)",
            selectedSurface: "#e2e8f0",
            activeContent: "#0f172a",
            inactiveContent: "#94a3b8",
          }}
          backdrop={
            <BlurView
              intensity={50}
              tint="dark"
              style={{ flex: 1 }}
            />
          }
        />
      )}
    />
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us