Liquid Glass came with iOS 26, and only iOS 26 has it. Android has nothing like it. I wanted the material in React Native apps on both platforms, so this package renders it wherever the hardware allows and steps down cleanly where it doesn't.
One view, three renderers
| Platform | What draws the glass |
|---|---|
| iOS 26 and up | Apple's UIGlassEffect |
| iOS 16.4 to 25 | A Metal renderer |
| Android 13 and up | An AGSL shader, ported from the Metal one |
| Android 10 to 12 | A blur or a scrim, without refraction |
The Metal renderer and the Android shader run the same algorithm, line for line. Both do refraction, chromatic dispersion, frost, tint, grain and a lit border, so a fix measured against real iOS 26 glass lands on both.
Android can't see behind a view
No Android API lets a view sample the pixels of the views behind it. So the backdrop has to be marked. You wrap it in a LiquidGlassProvider, which records that part of the screen as a display list, and each glass view draws from that recording.
<View style={{ flex: 1 }}>
<LiquidGlassProvider style={StyleSheet.absoluteFill}>
<ScrollView>{/* what shows through the glass */}</ScrollView>
</LiquidGlassProvider>
<LiquidGlassView style={styles.panel} cornerRadius={32} />
</View>Glass views sit next to the provider, never inside it. That rule is also why a glass view can't refract its own output on Android. On iOS the renderer has to filter its own views out of the capture.
The controls
On top of the view there's a tab bar, buttons that merge into their neighbours when pressed, a switch, slider, stepper, text input, segmented control, toolbar, toast and bottom sheet. The designs come from Kyant0's AndroidLiquidGlass catalog, springs included. Gestures run as Reanimated worklets on the UI thread, so a busy JS thread doesn't drop frames.
What it costs
Glass is limited by fill rate. With one animating glass view on a Galaxy S23 Ultra at 120 Hz:
| Screen covered | Janky frames |
|---|---|
| 10% | 2% |
| 25% | 2% |
| 50% | 18% |
| 75% | 78% |
Pinned bars and press feedback, the two patterns most apps ship, run fine on a 2019 Redmi Note 7. No quality setting makes a full-screen glass panel hold 120 Hz.
Status
It isn't on npm yet, so install it from GitHub. It began as a fork of rit3zh's expo-liquid-glass-view and no longer tracks upstream. MIT licensed.