Since iOS 26 launched, I've started seeing user reviews mentioning things like "the tab bar looks different" and "the back button changed." Apple's new Liquid Glass design language is becoming noticeable enough that users can tell the difference between apps that have adapted and those that haven't.
If you've built an app with Rork, your React Native / Expo app is affected by these changes too. It won't break outright — things will still work — but properly adapting to iOS 26 requires upgrading Expo SDK and making some targeted code changes. The good news is that Rork-generated apps tend to have clean, straightforward structures that make this migration relatively smooth.
This guide walks through the practical steps for bringing your existing Rork app up to iOS 26 standards, with a clear priority order so you're not overwhelmed.
What Actually Changes for React Native Apps on iOS 26
iOS 26 is primarily a design-focused update, but there are specific areas where React Native apps feel the impact directly.
The tab bar gets Liquid Glass styling
On iOS 26, the system tab bar switches to a translucent, frosted-glass appearance called Liquid Glass. With Expo SDK 54 and expo-router v4, your Tabs component will automatically use this native Liquid Glass style. The main thing to watch for is how your tab icons look against the new translucent background — some color combinations that worked before may need adjustment.
Back navigation UI changes
The back button area in stack navigation now has Liquid Glass applied. Expo Router v4 handles this automatically in most cases, but if you have custom header styles, you may see some unintended visual results that need minor tweaks.
Edge-to-edge becomes more strict
iOS 26 further enforces edge-to-edge layout (content extending behind status bars and home indicators). If you haven't been careful about Safe Area Insets, you'll notice more layout issues on iOS 26 devices. This isn't entirely new, but iOS 26 makes it more prominent.
Upgrading to Expo SDK 54: The First Step
To access iOS 26's native UI components and Liquid Glass APIs, you'll need to upgrade to at least Expo SDK 54, which ships with React Native 0.81.
# Upgrade to Expo SDK 54
npx expo install expo@latest
# Auto-update all dependencies to SDK 54-compatible versions
npx expo-doctor
npx expo install --fixRunning expo-doctor is important before going further — it surfaces any libraries that aren't compatible with SDK 54 and gives you a clear list of what needs attention. Address those warnings before moving on.
Rork apps typically migrate cleanly
Rork-generated apps tend to have leaner dependency trees than apps built by hand, which usually means a smoother SDK upgrade. If you've added third-party native modules on top of what Rork generated, check their SDK 54 compatibility individually. If you hit dependency errors, the Expo dependency error troubleshooting guide covers the common patterns.
On SDK 55: don't rush
Expo SDK 55 (React Native 0.83 + React 19.2) is also available as of May 2026, but it drops Legacy Architecture support entirely. If any libraries in your Rork app haven't migrated to the New Architecture, upgrading to SDK 55 will break things. My suggestion: get stable on SDK 54 for iOS 26 compatibility first, then plan your SDK 55 migration separately. For a deeper look at SDK 55's performance improvements (Hermes v1, bytecode diffing), check the Expo SDK 55 performance guide.
Implementing Liquid Glass: NativeTabs and GlassView
With SDK 54 in place, here's how to bring Liquid Glass into your app.
NativeTabs: Automatic Liquid Glass Tab Bar
If you're using expo-router v4's Tabs component, Liquid Glass tab bar support is essentially automatic on iOS 26. You don't need to opt into anything — it just works. What you do need to verify is how your icons render on the new translucent background.
// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
export default function TabLayout() {
return (
<Tabs
screenOptions={{
// On iOS 26, Liquid Glass tab bar is applied automatically
headerShown: false,
}}
>
<Tabs.Screen
name="index"
options={{
title: 'Home',
tabBarIcon: ({ focused, color, size }) => (
<Ionicons
name={focused ? 'home' : 'home-outline'}
size={size}
color={color}
// iOS 26 adjusts color automatically for Liquid Glass contrast
/>
),
}}
/>
<Tabs.Screen
name="explore"
options={{
title: 'Explore',
tabBarIcon: ({ focused, color, size }) => (
<Ionicons
name={focused ? 'search' : 'search-outline'}
size={size}
color={color}
/>
),
}}
/>
</Tabs>
);
}If the icon colors look off against the Liquid Glass background on a real device, adjust tabBarActiveTintColor and tabBarInactiveTintColor in your screenOptions.
GlassView: Adding Glass Effects to Cards and UI Elements
For adding Liquid Glass styling to other parts of your UI (cards, headers, modals), the expo-glass-effect package provides a GlassView component.
npx expo install expo-glass-effectimport { GlassView } from 'expo-glass-effect';
import { Platform, View, StyleSheet } from 'react-native';
// Always check iOS version — GlassView only works on iOS 26+
const isIOS26OrLater =
Platform.OS === 'ios' && parseInt(Platform.Version as string, 10) >= 26;
export default function AdaptiveCard({ children }: { children: React.ReactNode }) {
if (isIOS26OrLater) {
return (
<GlassView
intensity="medium" // "low" | "medium" | "high"
tint="system" // "light" | "dark" | "system"
style={styles.card}
>
{children}
</GlassView>
);
}
// Fallback for iOS 25 and below — required to prevent crashes
return (
<View style={[styles.card, styles.solidCard]}>
{children}
</View>
);
}
const styles = StyleSheet.create({
card: {
padding: 16,
borderRadius: 16,
overflow: 'hidden',
marginVertical: 8,
},
solidCard: {
backgroundColor: 'rgba(255, 255, 255, 0.9)',
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 4,
},
});The fallback is not optional. GlassView will crash on iOS 25 and below if you skip the version check. iOS 26 adoption is growing fast but isn't universal yet, so this check is essential.
Common Errors and How to Fix Them
A few error patterns come up repeatedly when adapting Rork apps for iOS 26.
GlassView crash: "API not available"
Certain iOS 26 beta builds shipped without the Liquid Glass API available. The isIOS26OrLater fallback pattern above handles this correctly. On iOS 26 release builds, this error shouldn't occur.
Tab icon tint color not updating correctly while scrolling
This is a known expo-router bug (see expo/expo Issue #39930) where tint colors don't update correctly when scrolling over light/dark content on iOS 26. It's been fixed in recent SDK 54 patch releases, so running npx expo install expo-router@latest usually resolves it.
Back navigation has unexpected Liquid Glass styling that overrides custom headers
iOS 26 applies Liquid Glass to the navigation bar region automatically. If you've set custom headerStyle or headerBackground values in your stack navigator, some of those styles may get overridden. Use Expo Router's headerStyle, headerBackground, and headerTransparent props to regain control (see expo/expo Issue #40081 for details).
New Architecture incompatibility when upgrading to SDK 55
SDK 55 has fully removed Legacy Architecture support. Libraries that haven't migrated will throw errors. The React Native New Architecture migration guide walks through identifying and resolving these conflicts before you commit to SDK 55.
Rork Max SwiftUI Apps: A Different Path
If you're building with Rork Max and generating native SwiftUI code, iOS 26 Liquid Glass works differently. SwiftUI gives you direct access to the .glassEffect() modifier, enabling fine-grained, per-component customization that's more expressive than what's available in React Native.
For SwiftUI-specific iOS 26 implementation, see the Rork Max iOS 26 Liquid Glass implementation guide.
Recommended Migration Order
Don't try to tackle everything at once. Here's the order I'd recommend:
Step 1 — Upgrade to Expo SDK 54: Run npx expo install expo@latest and npx expo-doctor. Resolve any flagged warnings before going further.
Step 2 — Verify Safe Area handling: Check on a real iOS 26 device (or simulator) that content isn't bleeding under the status bar or home indicator. Fix any layout issues in this step.
Step 3 — Test tab bar on a real device: Build for TestFlight and check how your tab bar looks with Liquid Glass. Adjust tabBarActiveTintColor / tabBarInactiveTintColor if needed.
Step 4 — Add GlassView incrementally (optional): Once the basics are stable, explore adding Liquid Glass effects to cards, modals, or other UI surfaces.
Step 5 — Plan SDK 55 migration separately: Don't bundle SDK 54 and SDK 55 migrations. Get iOS 26 support stable first.
The fastest path forward is: upgrade SDK 54, push to TestFlight, check on a real device. Rork apps have the advantage of a clean baseline structure, which makes each of these steps more predictable than a heavily customized codebase.