liquid-glass-tabs

v0.1.0

Published

21 days ago

iOS style Global Navigation Bar library

0High
0Medium
0Low

blissun

react-native ios android navigation tabs tab-bar bottom-tabs glass-morphism blur expo-router

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

npm install liquid-glass-tabs
# or
pnpm add liquid-glass-tabs
# or
yarn add liquid-glass-tabs

Prerequisites

This library requires the following peer dependencies:

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

Basic Usage with Expo Router

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

export default function Layout() {
  return (
    <LiquidGlassTabs
      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

LiquidGlassTabs Component

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

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;
    };
  };
}

CustomTabBar Component

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

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

Platform-Specific Behavior

iOS

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}

Android

Always uses the custom CustomTabBar component with glass-morphism effect

Web

Uses custom CustomTabBar for consistent cross-platform appearance

Example

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

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

Customization

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:

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' } },
  },
];