Subscribe

Liquid Glass in React Native

React NativeExpoCode
103 views
Liquid Glass in React Native (featured image)

Apple unveiled their biggest design overhaul in over a decade - Liquid Glass - a design language that makes every UI element look like actual frosted glass that reacts to light and movement in real-time. And while we’re waiting for iOS 26 to drop later this year, I’m going to show you EXACTLY how to implement these stunning glass effects in your React Native apps(beta).

Apple describes Liquid Glass as a dynamic material that combines the optical properties of glass with a sense of fluidity, offering glass-like transparency that adapts in real time. Designed to replicate the optical qualities of glass, it uses Gaussian blur algorithms combined with realistic lighting shaders to create authentic glass appearances, while dynamically refracting and reflecting any element placed behind it to achieve a lifelike effect, it adjusts transparency levels and contrast to ensure text and icons remain readable regardless of background content, maintaining a clear hierarchy between content and controls.

Liquid Glass in React Native using expo-liquid-glass-view

Fundamentally, the Liquid Glass glass component works just like any other React Native view.You wrap your content inside <ExpoLiquidGlassView /> and provide additional prop of type, tint, cornerRadius, cornerStyle.

  • Type
  • Tint
  • Corner Radius
  • Corner Style

Installation & Setup


  1. Add the package
npx expo install expo-liquid-glass-view
  1. Install CocoaPods cd ios && pod install
cd ios && pod install
  1. Prebuild the iOS project and run your app
npx expo prebuild --platform ios

To use the component

import {
  CornerStyle,
  ExpoLiquidGlassView,
  LiquidGlassType,
} from 'expo-liquid-glass-view'

<ExpoLiquidGlassView
  style={style}
  cornerRadius={16}
  cornerStyle={CornerStyle.Continuous}
  type={LiquidGlassType.Regular}
>
  {children}
</ExpoLiquidGlassView>

Liquid Glass design language unveils Apple’s new direction, bringing nature-inspired glass, fluidity, and depth to the forefront of user interfaces. As the mobile design landscape continues to evolve toward more immersive and dynamic experiences, experimenting with Liquid Glass effects now can help position your apps ahead of the curve in modern UI design.