react-native-lg

react-native-lg

A customizable Liquid Glass effect library for React Native, supporting both Android and iOS platforms.

Features

• 🎨 Customizable liquid glass/glassmorphism effects
• 🔄 Refraction with depth and chromatic aberration
• 💫 Blur and backdrop effects
• 🎯 Inner shadows and highlights
• 📱 Cross-platform support (Android & iOS)
• ⚡ High performance with native rendering
• 🎭 Multiple effect combinations

Installation

npm install react-native-lg

or

yarn add react-native-lg

iOS

cd ios && pod install

Note: You may see editor warnings in VS Code for iOS Swift files. These are false positives and can be safely ignored. The code compiles correctly when building the app.

Usage

Basic Liquid Glass View

import { LiquidGlassView } from 'react-native-lg';

export default function App() {
  return (
    <LiquidGlassView
      style={{ width: 200, height: 100, borderRadius: 20 }}
      refractionAmount={30}
      refractionHeight={10}
      blurRadius={20}
    >
      <Text>Liquid Glass Effect</Text>
    </LiquidGlassView>
  );
}

Advanced Configuration

<LiquidGlassView
  style={{ 
    width: 300, 
    height: 150, 
    borderRadius: 25 
  }}
  refractionAmount={40}
  refractionHeight={15}
  depthEffect={0.5}
  chromaticAberration={2}
  blurRadius={25}
  innerShadow={{
    offsetX: 0,
    offsetY: 2,
    blurRadius: 10,
    color: 'rgba(0, 0, 0, 0.3)',
  }}
  highlight={{
    color: 'rgba(255, 255, 255, 0.5)',
    blurRadius: 15,
  }}
>
  <Text style={{ fontSize: 20, color: 'white' }}>
    Beautiful Liquid Glass
  </Text>
</LiquidGlassView>

API Reference

LiquidGlassView Props

Prop	Type	Default	Description
style	ViewStyle	-	Standard React Native style
refractionAmount	number	30	Amount of refraction distortion
refractionHeight	number	10	Height of refraction effect
depthEffect	number	0.0	Depth perception (0.0 - 1.0)
chromaticAberration	number	0	Color dispersion amount
blurRadius	number	20	Blur intensity
innerShadow	InnerShadow	-	Inner shadow configuration
highlight	Highlight	-	Highlight configuration

InnerShadow

{
  offsetX: number;
  offsetY: number;
  blurRadius: number;
  color: string;
}

Highlight

{
  color: string;
  blurRadius: number;
}

Examples

Check out the example app for more advanced usage and component examples:

• Liquid Button
• Liquid Toggle
• Liquid Slider
• Liquid Bottom Tabs

Credits

This library is inspired by and ported from AndroidLiquidGlass by Kyant.

License

Apache-2.0

Made with ❤️ for React Native