Native iOS 26 Liquid Glass engine and cross-platform blur fallback for Expo SDK 57.

Expojet brings Apple's WWDC 2025 Liquid Glass design language to Expo SDK 57 applications. By pairing native iOS 26 primitives (expo-glass-effect) with robust cross-platform fallback blurs (expo-blur), your applications achieve authentic Apple-grade translucent glass surfaces on iOS while remaining completely crash-free on Android and Web.

Overview & Architecture

Target Platform	Technology	Implementation	Visual Appearance
iOS 26+	`expo-glass-effect`	Native `UIVisualEffectView` via `<GlassView />`	Authentic frosted, refracted liquid glass with real-time dynamic tinting.
Android / Older iOS / Web	`expo-blur`	`<BlurView intensity={80} tint="systemChromeMaterial" />`	Hardware-accelerated backdrop blur with semi-translucent borders.

Enabling Liquid Glass

You can toggle Liquid Glass during the interactive creation wizard or pass flags directly:

# Enable Liquid Glass
npx create-expojet@latest my-app --liquid-glass

# Explicitly disable
npx create-expojet@latest my-app --no-liquid-glass

Native Bottom Tab Bar Integration

When --liquid-glass is active, bottom tabs in both Expo Router and React Navigation are automatically upgraded to translucent floating glass bars, allowing screen content to smoothly scroll beneath them.

Expo Router Configuration

In app/(app)/_layout.tsx or app/(app)/(tabs)/_layout.tsx:

import { Tabs } from "expo-router";
import { GlassTabBarBackground } from "@/components/ui/glass-tab-bar-background";
import { Icon } from "@/components/ui/icon";

export default function ProtectedLayout() {
  return (
    <Tabs
      screenOptions={{
        headerShown: true,
        tabBarActiveTintColor: "#315efb",
        tabBarStyle: {
          position: "absolute",
          backgroundColor: "transparent",
          borderTopWidth: 0,
          elevation: 0,
        },
        tabBarBackground: () => <GlassTabBarBackground />,
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
          tabBarIcon: ({ color, size }) => <Icon name="home" color={color} size={size} />,
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: "Profile",
          tabBarIcon: ({ color, size }) => <Icon name="user" color={color} size={size} />,
        }}
      />
    </Tabs>
  );
}

In src/navigation/AppNavigator.tsx:

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { GlassTabBarBackground } from "../components/ui/glass-tab-bar-background";
import { Icon } from "../components/ui/icon";

const Tab = createBottomTabNavigator();

export function AppNavigator() {
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: true,
        tabBarActiveTintColor: "#315efb",
        tabBarStyle: {
          position: "absolute",
          backgroundColor: "transparent",
          borderTopWidth: 0,
          elevation: 0,
        },
        tabBarBackground: () => <GlassTabBarBackground />,
      }}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

The `<GlassCard />` Component

Located at src/components/ui/glass-card.tsx, this component provides a universal container for cards, floating panels, dialogs, and navigation cards.

import React from "react";
import { Text } from "react-native";
import { GlassCard } from "@/components/ui/glass-card";

export function ExampleGlassPanel() {
  return (
    <GlassCard glassEffectStyle="regular" intensity={70}>
      <Text style={{ fontSize: 18, fontWeight: "700" }}>Native Liquid Glass</Text>
      <Text style={{ color: "#52606d" }}>Rendered natively on iOS 26, blurred on Android.</Text>
    </GlassCard>
  );
}

Props Reference

Prop	Type	Default	Description
`glassEffectStyle`	`"regular" \| "clear"`	`"regular"`	iOS 26 native liquid glass material preset.
`intensity`	`number`	`60`	Blur intensity for the `expo-blur` fallback on Android/Web.
`tint`	`"systemMaterial" \| "systemChromeMaterial" \| "light" \| "dark"`	`"systemMaterial"`	Fallback backdrop tint mode.
`style`	`StyleProp<ViewStyle>`	`undefined`	Custom styling (padding, margins, borders).
`children`	`React.ReactNode`	`undefined`	Child content rendered within the glass surface.

Screen Padding & Ergonomics

Because the glass tab bar floats above content with position: "absolute", screen containers in Expojet automatically incorporate comfortable bottom padding (paddingBottom: 90), ensuring buttons, lists, and cards remain fully clickable and never obstructed by the tab bar.

Diagnostics

Expojet's doctor command automatically verifies that all Liquid Glass components and native assets are intact:

npx create-expojet@latest doctor

Checks performed:

Liquid Glass card: Validates src/components/ui/glass-card.tsx.
Liquid Glass tab bar: Validates src/components/ui/glass-tab-bar-background.tsx.

Liquid Glass