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.

!Liquid Glass Navbar Demo

✨ 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

``bash
npm install react-native-liquid-glass-navbar


or


yarn add react-native-liquid-glass-navbar
`

🪄 Usage

$3

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

`tsx
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 (

tabs={tabs}
activeIndex={activeTab}
onTabChange={setActiveTab}
activeColor="#3498db"
/>

);
};
`

$3

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

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

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

⚙️ Props

$3

| 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. |

$3

| 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