react-native-liquid-glass-tabbar

Production-ready, drop-in bottom tab bar for React Navigation with an Apple-style liquid glass aesthetic.

• Frosted translucent material
• Animated selected pill with spring physics
• Press micro-interactions
• iOS blur with Android graceful fallback (no app patching needed)
• Light and dark mode token system
• Optional iridescent floating action button
• Auto blur adapter: @react-native-community/blur or expo-blur

Installation

Install the package and peers:

pnpm add react-native-liquid-glass-tabbar
pnpm add @react-navigation/native @react-navigation/bottom-tabs
pnpm add react-native-reanimated react-native-safe-area-context
# choose either blur backend:
pnpm add @react-native-community/blur
# or
pnpm add expo-blur

Optional haptics:

pnpm add expo-haptics
# or
pnpm add react-native-haptic-feedback

Usage

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { LiquidGlassTabBar } from 'react-native-liquid-glass-tabbar';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <Tab.Navigator tabBar={(props) => <LiquidGlassTabBar {...props} />}>
      {/* Your screens */}
    </Tab.Navigator>
  );
}

With iridescent action button

<Tab.Navigator
  tabBar={(props) => (
    <LiquidGlassTabBar
      {...props}
      actionButton={{
        icon: <SearchIcon />,
        onPress: () => props.navigation.navigate('Search'),
        iridescent: true,
      }}
    />
  )}
>
  {/* screens */}
</Tab.Navigator>

Props API

LiquidGlassTabBar extends React Navigation BottomTabBarProps.

interface LiquidGlassTabBarProps {
  blurAmount?: number;
  blurType?:
    | 'light'
    | 'dark'
    | 'extraLight'
    | 'ultraThinMaterial'
    | 'thinMaterial'
    | 'material'
    | 'thickMaterial'
    | 'chromeMaterial'
    | 'systemUltraThinMaterial';
  containerStyle?: StyleProp<ViewStyle>;
  pillColor?: string;
  pillBorderColor?: string;
  inactiveIconOpacity?: number;
  showLabels?: boolean;
  floatingOffset?: number;
  borderRadius?: number;
  horizontalPadding?: number;
  springConfig?: WithSpringConfig;
  hapticFeedback?: boolean;
  actionButton?: {
    icon: ReactNode;
    onPress: () => void;
    iridescent?: boolean;
    accessibilityLabel?: string;
  };
}

Exports

• LiquidGlassTabBar (default and named)
• TabItem
• SelectedPill
• GlassMaterial
• IridescentButton
• useTabAnimation
• useColorScheme
• useIridescent
• LiquidGlassColors
• iridescent

Design Tokens

The package ships with built-in LiquidGlassColors for light/dark material layers, selected pill colors, and icon/label colors.

Screenshots

Add screenshots or GIFs here:

• docs/light-mode.png
• docs/dark-mode.png
• docs/interaction.gif

Notes

• Works with the latest React Native (tested on 0.84.x) and supports broad ranges without patch-package.
• iOS uses native blur material and auto-detects @react-native-community/blur or expo-blur.
• Android falls back to optimized translucent tint.
• Selected pill is rendered beneath tab items for proper depth.
• Safe area insets are respected to avoid home indicator overlap.
• CI includes a compatibility matrix for bare React Native and Expo blur-only environments on Node 20 and 22.

Release Automation

• GitHub Actions publishes to npm on GitHub Release publish (.github/workflows/publish.yml).
• Configure repository secret NPM_TOKEN with publish permissions.
• Publish uses npm publish --provenance --access public for supply-chain attestations.

Development

pnpm install
pnpm run build
pnpm run typecheck
pnpm run lint
pnpm run format
pnpm run pack:check

Production Release Checklist

pnpm run clean
pnpm run build
pnpm run typecheck
pnpm run lint
pnpm run format
pnpm run pack:check

• Create GitHub release (publish workflow auto-runs).
• Ensure NPM_TOKEN is configured in repository secrets.

License

MIT