Liquid Glass Tabs

iOS-style Global Navigation Bar library with glass-morphism effect for React Native and Expo Router.

Features

- 🎨 Glass-Morphism Design: Beautiful blur effect using expo-blur
- 📱 iOS Native Support: Uses native iOS tabs via Expo Router when available
- 🤖 Android Compatible: Fallback custom implementation for Android
- ⚡ Expo Router Integration: First-class support for Expo Router v6+
- 🎯 TypeScript Support: Full type safety with TypeScript
- 🔧 Customizable: Props for icons, labels, and navigation behavior
- 📦 Lightweight: Minimal dependencies, optimized performance

Installation

``bash
npm install liquid-glass-tabs


or

pnpm add liquid-glass-tabs

or

yarn add liquid-glass-tabs
`

$3

This library requires the following peer dependencies:

`bash
npm install expo expo-router expo-blur @react-navigation/bottom-tabs @react-native-community/blur react-native-safe-area-context @expo/vector-icons
`

Quick Start

$3

`tsx
import { LiquidGlassTabs } from 'liquid-glass-tabs';

export default function Layout() {
return (
tabs={[
{
name: 'home',
label: 'Home',
icon: {
sf: {
default: 'house',
selected: 'house.fill',
},
},
},
{
name: 'search',
label: 'Search',
icon: {
sf: {
default: 'magnifyingglass',
selected: 'magnifyingglass.fill',
},
},
},
{
name: 'profile',
label: 'Profile',
icon: {
sf: {
default: 'person',
selected: 'person.fill',
},
},
},
]}
/>
);
}
`

API Documentation

$3

The main component that provides platform-aware tab navigation.

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| tabs | TabItem[] | Required | Array of tab configurations |
| useNativeIOS | boolean | true | Use native iOS tabs when available |

#### TabItem Interface

`typescript
interface TabItem {
name: string; // Unique identifier (route name)
label: string; // Display label
icon?: {
sf: {
default: string; // SF Symbol name (default state)
selected: string; // SF Symbol name (selected state)
};
ionicon?: {
// Optional Ionicon fallback
default: any;
selected: any;
};
};
}
`

$3

Exported for custom implementations. Provides glass-morphism tab bar styling.

`tsx
import { CustomTabBar } from 'liquid-glass-tabs';
`

Platform-Specific Behavior

$3

- Native Tabs (default): Uses Expo Router's native iOS tabs for best native feel
- Custom Tabs: Falls back to custom glass-morphism implementation when useNativeIOS={false}

$3

- Always uses the custom CustomTabBar component with glass-morphism effect

$3

- Uses custom CustomTabBar for consistent cross-platform appearance

Example

See the example/ directory for a complete working example with Expo Router:

`bash
cd example
pnpm install
pnpm start
`

The example includes:

- 5-tab navigation setup with Expo Router
- Custom icon components
- Home, Search, Notifications, Profile, and Settings screens
- Glass-morphism styling demonstration

Styling

The tab bar uses platform-specific styling:

- iOS: Native shadows and effects
- Android: Material Design elevation
- BlurView: Semi-transparent background with expo-blur integration

$3

For custom styling, you can extend the CustomTabBar component or use the library's exported types and components.

Project Structure

`
src/
├── index.tsx # Main LiquidGlassTabs component (platform selector)
└── CustomTabBar.tsx # Cross-platform glass-morphism tab bar
`

TypeScript Support

Full TypeScript support with strict mode enabled:

`tsx
import { LiquidGlassTabs } from 'liquid-glass-tabs';
import type { TabItem } from 'liquid-glass-tabs';

const tabs: TabItem[] = [
{
name: 'home',
label: 'Home',
icon: { sf: { default: 'house', selected: 'house.fill' } },
},
];
``

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

Code of Conduct

Please read CODE_OF_CONDUCT.md to understand our community standards.

License

MIT © 2025 Antigravity