react-native-liquid-glass-navbar 🍬🪄

A high-fidelity refraction and dispersion (chromatic aberration) effect for React Native, powered by OpenGL ES 2.0. Perfect for glassmorphism, magic lens effects, and premium interactive UI components.

✨ Features

• Liquid Reveal™ Architecture: A "magic lens" effect that reveals active colors instantaneously as the glass pill glides across tabs.
• Real-time Refraction: High-performance GPU distortion of the underlying UI content.
• Chromatic Aberration: Realistic RGB dispersion (color splitting) for a premium optical feel.
• Interaction Scaling: The liquid lens expands organically during touch gestures (1.2x pop).
• Smooth Physics: Spring-driven movement with zero-flicker settles.
• Cross-Platform: Native OpenGL on Android with high-quality animated fallbacks for other platforms.

🚀 Installation

npm install react-native-liquid-glass-navbar
# or
yarn add react-native-liquid-glass-navbar

🪄 Usage

High-Level Navbar (Recommended)

The LiquidGlassNavbar is a production-ready component that handles all gestures, glass physics, and tab rendering out of the box.

import React, { useState } from 'react';
import { View } from 'react-native';
import { LiquidGlassNavbar } from 'react-native-liquid-glass-navbar';
import { House, Search, Bell, User } from 'lucide-react-native';

const MyNavbar = () => {
  const [activeTab, setActiveTab] = useState(0);

  const tabs = [
    { label: 'Home', Icon: House, onPress: () => console.log('Home') },
    { label: 'Explore', Icon: Search },
    { label: 'Alerts', Icon: Bell },
    { label: 'Profile', Icon: User },
  ];

  return (
    <View style={{ flex: 1, backgroundColor: '#FFF' }}>
      <LiquidGlassNavbar 
        tabs={tabs}
        activeIndex={activeTab}
        onTabChange={setActiveTab}
        activeColor="#3498db"
      />
    </View>
  );
};

Low-Level Lens Effect

For custom UI components, you can use the raw LiquidGlassView.

import { LiquidGlassView } from 'react-native-liquid-glass-navbar';

// Use with Animated.Value for silky smooth transitions
<LiquidGlassView
  pillX={indicatorPosition}
  pillWidth={120}
  refractionMag={0.15}
  aberration={0.8}
/>

⚙️ Props

LiquidGlassNavbar

| Prop | Type | Default | Description | |---|---|---|---| | tabs | TabItem[] | Required | Array of { label, Icon, onPress }. | | activeIndex | number | 0 | Controlled active index. | | onTabChange | (idx: number) => void | - | Callback when a tab is selected. | | activeColor | string | #000000 | Color of the icon/text when active. | | inactiveColor | string | #8E8E93 | Color of the icon/text when inactive. | | iconSize | number | 24 | Icon size in DP. | | fontSize | number | 12 | Label font size in DP. | | glassProps | LiquidGlassConfig| {} | Fine-tune refractionMag and aberration. | | containerStyle| ViewStyle | - | Outer container styles. |

LiquidGlassView

| Prop | Type | Description | |---|---|---| | pillX | Animated.Value | Horizontal position of the lens center. | | pillWidth | number | Width of the refraction area. | | refractionMag | Animated.Value | Distortion strength (0.01 - 0.2). | | aberration | Animated.Value | Color dispersion strength (0.0 - 1.5). | | interactionScale| Animated.Value | Geometric growth factor (1.0 - 2.0). |

🛠 How it Works

1. Secret Capture: On mount, the component briefly renders all content in its "active" state and takes a high-speed snapshot via PixelCopy.
2. GPU Texture: This snapshot is uploaded to the GPU as a background texture.
3. Refraction Shader: A custom GLSL fragment shader calculates a capsule-shaped lens distortion in real-time.
4. Liquid Reveal: As the pill moves, it samples from the "active" texture, while the underlying background UI remains inactive, creating the "magic reveal" effect.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT © Liquid Glass Contributors