Liquid Glass in React Native with Expo

Most “Liquid Glass in React Native” threads end half-solved: the tab bar is glass, then it goes blank on an animation, or a button inside it stops taking taps. The glass itself is easy now. The rules around it are what nobody writes down. Here are both, as of Expo SDK 57.

1. Get the real glass from the system, not a library that imitates it

Two pieces, both from Expo:

• Native tabs. expo-router‘s native tabs (imported from expo-router/unstable-native-tabs since SDK 54; a stable import is planned for SDK 58) put a real UITabBarController under your screens. On iOS 26 that bar is Liquid Glass, floats over content, and can minimise as you scroll with minimizeBehavior. On Android the same component renders a Material bar, with five tabs at most.
• The glass view. expo-glass-effect gives you GlassView, GlassContainer and isLiquidGlassAvailable(). On iOS 26 and later it is the system material; below that it renders as a plain View, so you branch yourself.

Everything else, a blurred View with a white tint, a third-party “glass” style, is an imitation, and on a phone that has the real thing next to it, imitation reads as old.

2. Below iOS 26, fall back on purpose

By Apple’s own numbers from June 2026, 79% of all iPhones run iOS 26 and 86% of iPhones from the last four years do. That still leaves phones where isLiquidGlassAvailable() is false. Decide the fallback once, at the top: a blur material for your own surfaces, and the standard tab bar, and keep every other rule the same so the app is the same shape on both.

One gotcha from Expo’s own docs: the header’s headerBlurEffect and iOS 26’s scroll-edge effects stack. On a glass header you get two blurs. Gate headerBlurEffect to the pre-26 path.

3. Never animate a glass view’s opacity or scale

This is the rule that costs people a day. Animate a mounted GlassView to opacity 0 and it does not fade out: it renders blank, and stays blank when you bring the opacity back. Animate its scale to 0 and it goes pixelated on the way, because the effect is computed at the view’s live size.

Hide and reveal glass with translateX or translateY only, and let the parent clip it. The view stays fully rendered the whole time. A morph between two states (a back button becoming a close button, a selection pill moving between tabs) is one view translating, never two views cross-fading.

4. isInteractive makes the subtree touch-dead

GlassView takes an isInteractive prop that gives the glass its press response. It also swallows touches for everything inside it: a button in an interactive glass capsule stops receiving taps. We proved it with an A/B on the simulator before believing it. If you need taps inside, leave isInteractive off and build the press feedback yourself with a small translate dip.

5. Inside a container, use the regular style

GlassContainer lets several glass shapes blend as they approach each other, which is how the system’s own toolbars work. Give a child the clear style inside a container and it draws a rectangular backing behind the rounded shape. Containers want regular; save clear for lone views over photos.

6. The minimising tab bar needs a ScrollView first

minimizeBehavior="onScrollDown" only fires when the first descendant of the screen is the scrolling view. It is not controlled by contentInsetAdjustmentBehavior, which is where people look first: it fires with that set to never too. Put the ScrollView or FlatList first, wrap decorations around it rather than above it. One more surprise: only the tab the app launches on gets its content pre-offset by the top safe area; the others need the inset applied yourself.

Where to start

Switch the tab bar to native tabs first. It is the biggest visible change for the least code, and it brings the glass with it on iOS 26 and the Material bar on Android. Then go through your animations for any opacity or scale on a glass view and replace it with a translate.

Or skip the week: an app designed in the App Builder comes out of your coding agent with native tabs, the glass surfaces and all six rules already in the code, and its verify_app tool flags an opacity animation on glass the day it is written.