Liquid Glass in React Native with Expo

Liquid Glass is Apple's design language since iOS 26: translucent surfaces that bend and reflect whatever sits behind them. With iOS 27, Apple refined it more uniform refraction, better contrast and users can now choose how clear or tinted the glass looks.

The good news for React Native developers: with Expo, you don't need to write Swift to get it. There are three ways in, from "free" to "full control".

1. Native tabs: Liquid Glass for free

If your app uses Expo Router, native tabs render the real iOS tab bar and on iOS 26 and later, the system draws it with Liquid Glass, taking its colours from the content behind it.

// app/(tabs)/_layout.tsx  SDK 58
import { NativeTabs } from "expo-router/native-tabs";

export default function TabLayout() {
  return (
    <NativeTabs minimizeBehavior="onScrollDown">
      <NativeTabs.Trigger name="index">
        <NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
        <NativeTabs.Trigger.Icon sf="house.fill" md="home" />
      </NativeTabs.Trigger>
      <NativeTabs.Trigger name="search" role="search">
        <NativeTabs.Trigger.Label>Search</NativeTabs.Trigger.Label>
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}

• minimizeBehavior="onScrollDown" shrinks the tab bar as the user scrolls, like Apple's own apps.
• role="search" gives you the separate search tab introduced in iOS 26.
• Native tabs are stable from SDK 58. On SDK 55–57, import from expo-router/unstable-native-tabs instead.

2. expo-glass-effect: glass on any view

For cards, floating buttons or toolbars, expo-glass-effect wraps the native glass view in two React components.

npx expo install expo-glass-effect

GlassView is the glass surface. GlassContainer groups several of them so they blend together when they're close the "liquid" part of Liquid Glass.

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

export function Toolbar({ children }: { children: React.ReactNode }) {
  // Android, web and iOS < 26 get a solid fallback instead of glass.
  if (!isLiquidGlassAvailable()) {
    return <View style={[styles.bar, styles.fallback]}>{children}</View>;
  }

  return (
    <GlassContainer spacing={10} style={styles.row}>
      <GlassView style={styles.bar} glassEffectStyle="regular" isInteractive>
        {children}
      </GlassView>
    </GlassContainer>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: "row", gap: 8 },
  bar: { borderRadius: 24, paddingHorizontal: 16, paddingVertical: 12 },
  fallback: { backgroundColor: "rgba(255,255,255,0.9)" },
});

The props worth knowing:

3. Expo UI: the SwiftUI way

When you want the exact SwiftUI behaviour, Expo UI lets you write SwiftUI views from React and apply the glassEffect modifier directly.

import { Host, Text } from "@expo/ui/swift-ui";
import { glassEffect, padding } from "@expo/ui/swift-ui/modifiers";

export function GlassLabel() {
  return (
    <Host matchContents>
      <Text modifiers={[padding({ all: 16 }), glassEffect({ glass: { variant: "regular" } })]}>
        Liquid Glass
      </Text>
    </Host>
  );
}

Host is the bridge: everything inside it is real SwiftUI. Expo UI needs a development build, not Expo Go.

Mistakes to avoid

• Setting opacity: 0 on a glass view (or its parent) turns the effect off. To fade glass in or out, use glassEffectStyle={{ style: "regular", animate: true }} instead.
• Tab bar backgroundColor is ignored on iOS 26+. The glass takes its colour from the content use DynamicColorIOS for icon colours that work in light and dark mode.
• Don't design only for iOS. On Android and the web, GlassView falls back to a plain View. Check isLiquidGlassAvailable() and give those platforms a solid background.
• Test readability with both glass settings. Since iOS 27 lets people make the glass clearer or more tinted, check that your text stays readable either way.

Which one should you use?

1. Start with native tabs you get Liquid Glass where users notice it most, with no extra code.
2. Add expo-glass-effect for floating elements like toolbars, cards and buttons.
3. Reach for Expo UI when a screen should feel exactly like a native SwiftUI screen.

Sources

• Expo docs: GlassEffect
• Expo docs: Native tabs
• Expo blog: Liquid Glass with Expo UI and SwiftUI
• MacRumors: iOS 27 features