Liquid Glass in React Native and Expo: What Works on iOS 26

When Apple introduced Liquid Glass in iOS 26, native apps picked up the new translucent, light-bending look for tab bars, toolbars and sheets almost for free. Many React Native apps didn't, because their tab bars and headers were drawn in JavaScript rather than by the system. Suddenly the difference between "native components" and "components that look native" became visible on every iPhone.

This guide explains how React Native Liquid Glass support works in 2026: which parts of your app get it automatically, how to add glass surfaces with Expo's modules, what to do on older iOS versions and Android, and the accessibility settings you must respect.

Key takeaways

• System components adopt Liquid Glass automatically when built with the iOS 26 SDK: native tab bars, navigation bars, toolbars and sheets.
• JavaScript-drawn tab bars and headers don't. Use native-backed navigation, such as Expo Router's native tabs and native stack headers.
• For custom glass surfaces, use expo-glass-effect (GlassView), which falls back to a normal view where Liquid Glass isn't available.
• Expo UI lets you use SwiftUI components and their glass styling directly, for deeper native integration.
• Check availability and accessibility: Liquid Glass needs iOS 26, and users can reduce transparency, so always design a solid fallback.

Why some React Native apps got Liquid Glass and others didn't

Liquid Glass is applied by iOS to its own UI components. A React Native app that uses real native components (a native stack header, a native tab bar, system sheets and menus) gets the new look when built with the iOS 26 SDK. An app that draws its own tab bar with views and styles in JavaScript keeps whatever it drew, which looks dated next to system apps.

That's the practical argument for native-backed navigation and controls: platform design changes reach your app through the platform, without a redesign.

Native tabs and headers with Expo Router

Expo Router's native tabs render the real system tab bar, which on iOS 26 uses Liquid Glass, supports the minimise-on-scroll behaviour, and keeps standard behaviours like scroll-to-top. A minimal layout looks like this:

// app/(tabs)/_layout.tsx
import { NativeTabs, Icon, Label } from "expo-router/native-tabs";

export default function TabLayout() {
  return (
    <NativeTabs>
      <NativeTabs.Trigger name="index">
        <Icon sf="house.fill" />
        <Label>Home</Label>
      </NativeTabs.Trigger>
      <NativeTabs.Trigger name="bookings">
        <Icon sf="calendar" />
        <Label>Bookings</Label>
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}

Older examples import from expo-router/unstable-native-tabs; current documentation uses expo-router/native-tabs. Native stack headers (Expo Router's default stack) also pick up the system styling. Note that on iOS 26 the system draws the tab bar's glass from the content behind it, so some background customisation props only apply to older iOS versions.

Custom glass surfaces with expo-glass-effect

For cards, floating buttons or overlays that should use the glass material, expo-glass-effect provides a GlassView:

import { GlassView, isLiquidGlassAvailable } from "expo-glass-effect";
import { View } from "react-native";

export function FloatingBar({ children }: { children: React.ReactNode }) {
  if (!isLiquidGlassAvailable()) {
    return <View style={{ borderRadius: 24, padding: 12, backgroundColor: "rgba(255,255,255,0.92)" }}>{children}</View>;
  }
  return <GlassView style={{ borderRadius: 24, padding: 12 }}>{children}</GlassView>;
}

GlassView is only available on iOS 26 and later and falls back to a regular view elsewhere. Expo's documentation also recommends checking isGlassEffectAPIAvailable() before rendering glass components, because some early iOS 26 builds lacked the API. isLiquidGlassAvailable() can return false when the user has accessibility settings that limit the effect, which is exactly when your fallback should take over.

Going deeper with Expo UI and SwiftUI

Expo UI lets you render SwiftUI components inside a React Native app, and its SwiftUI and Jetpack Compose APIs became stable in SDK 56. For screens where you want the full native look (controls, menus, pickers with system glass styling), this route gives you the real platform components rather than imitations. Other libraries, such as Callstack's Liquid Glass view, offer additional glass components if you need them.

From the field: I've built navigation with Expo Router and React Navigation in production, and written native modules in Swift and Kotlin when JavaScript alone wouldn't do. Liquid Glass shows why native-backed components pay off: apps built on system components got the new design with a rebuild, while custom-drawn chrome needs redesign work.

Fallbacks: older iOS and Android

Design the fallback first. If a screen only works with glass, it's fragile on every device that doesn't have it, and those devices will be a large share of your users for years.

Accessibility and legibility

Glass surfaces show what's behind them, which can hurt contrast. Keep text on glass short, bold enough to read over busy backgrounds, and tested in both light and dark mode. Respect the system's reduce-transparency and increased-contrast settings, which your fallback handles if you check availability rather than assuming glass.

A practical adoption plan

1. Build with the iOS 26 SDK and review every screen: system components already changed.
2. Replace JavaScript tab bars and headers with native tabs and native stack headers.
3. Add glass to a few deliberate surfaces, such as a floating action bar or a sheet, not every card.
4. Test fallbacks on older iOS, with reduced transparency enabled, and on Android.
5. Watch performance on older supported iPhones, since layered translucent views cost GPU time.

FAQ

Does React Native support Liquid Glass?

Yes. React Native apps that use native system components, such as native tabs and native stack headers, adopt Liquid Glass automatically when built with the iOS 26 SDK. For custom glass surfaces, Expo's expo-glass-effect and Expo UI (SwiftUI) provide native glass components with fallbacks.

How do I add Liquid Glass tabs in Expo?

Use Expo Router's native tabs (NativeTabs from expo-router/native-tabs), which render the system tab bar. On iOS 26 that tab bar uses Liquid Glass automatically, with behaviours like minimise-on-scroll, while older iOS versions show the previous system style.

What happens to Liquid Glass on Android?

Nothing: Liquid Glass is an iOS design language. On Android, use Material surfaces and components. Expo's glass components fall back to regular views on unsupported platforms, so the same code can render appropriately on both.

Do I need Xcode 26 for Liquid Glass?

Yes. Building with the iOS 26 SDK requires Xcode 26, and that's what makes system components adopt Liquid Glass. With EAS Build, choose a build image with Xcode 26 for your iOS builds.

Next steps

If your app's tab bars and headers look out of place on iOS 26, I can move them to native components and add glass where it genuinely improves the design. Get in touch, or see how I work as a React Native developer.

Sources

• GlassEffect (expo-glass-effect), Expo
• Native tabs, Expo
• Integrating iOS 26 Liquid Glass with Expo UI and SwiftUI, Expo blog
• How to use Liquid Glass in React Native, Callstack
• Liquid Glass, Apple