iOS 26 がリリースされてから、アプリのレビューに「タブバーの見た目が変わった」「ナビゲーションが以前と違う」という声が届くようになりました。Apple が iOS 26 で導入した Liquid Glass というデザイン言語は、対応しているアプリとそうでないアプリの見た目の差を、ユーザーが肌で感じ始めるほど目立つ変化になっています。
Rork で作った React Native / Expo アプリも、この変化から無縁ではありません。何もしなくても動き続けはしますが、iOS 26 のデザイン言語に最適化するには Expo SDK のバージョンアップと少しのコード変更が必要になります。一方で、焦って全部一気に対応しようとすると既存ユーザーへの影響が出ることもあります。
ここでは既存の Rork アプリを iOS 26 に対応させるための手順を、優先度をつけながら解説します。スキップしても問題ないものと、早めに対応したほうがいいものを分けて整理していきます。
iOS 26 で React Native アプリに何が起きるか
iOS 26 の変化はデザイン面が中心ですが、React Native アプリに直接影響する点がいくつかあります。
タブバーが Liquid Glass スタイルに変わる
iOS 26 では、システムのタブバーが半透明のガラス素材風（Liquid Glass）に変わります。expo-router の Tabs コンポーネントを使っているアプリは、Expo SDK 54 以降で NativeTabs API を通じてこのネイティブスタイルが自動的に反映されます。タブアイコンのデザインによっては Liquid Glass 背景との相性が悪くなることがあるので、実機での確認が大切です。
back ナビゲーションの UI が変わる
スタックナビゲーションの戻るボタン周辺にも Liquid Glass が適用されます。Expo Router v4 以降ではほぼ自動で対応されますが、カスタムのヘッダースタイルを細かく設定していた場合は、意図しない表示になることがあります。
Edge-to-edge 表示がより厳格になる
iOS 26 では edge-to-edge（画面端から端まで）表示がさらに標準化されています。Safe Area Insets を正しく設定していないアプリでは、コンテンツがステータスバーやホームインジケーターと重なりやすくなっています。これは以前からの推奨事項ではありますが、iOS 26 ではより顕在化しやすい状況になっています。
Expo SDK 54 への移行が最初の一歩
Liquid Glass の恩恵を受け、iOS 26 対応を進めるには、まず Expo SDK を 54 以上にアップグレードする必要があります。SDK 54 には React Native 0.81 が含まれており、iOS 26 のネイティブ UI コンポーネントにアクセスできるようになります。
# Expo SDK 54 への移行
npx expo install expo@latest
# 依存関係を SDK 54 対応バージョンに自動更新
npx expo-doctor
npx expo install --fixexpo-doctor を実行すると、SDK 54 に対応していないライブラリや設定の問題が一覧で表示されます。まずこのコマンドの出力を確認してから移行を進めるのが安全です。
Rork 生成アプリは比較的スムーズに移行できる
Rork が生成するアプリは比較的シンプルな依存関係で構成されていることが多く、SDK 54 への移行はスムーズなケースが多いです。ただし、サードパーティの Native モジュールを追加している場合は、そのライブラリの SDK 54 対応状況を個別に確認することをお勧めします。依存関係のエラーが出た場合は、Expo 依存関係エラーの対処法が参考になるかもしれません。
SDK 55 への移行は慌てなくて大丈夫
2026年5月時点では Expo SDK 55（React Native 0.83 + React 19.2）もリリースされていますが、SDK 55 は Legacy Architecture のサポートを完全に削除しています。Rork 生成アプリの一部で New Architecture の移行が完了していない場合は、まず SDK 54 で iOS 26 対応を安定させてから、SDK 55 の移行を検討するほうが安全です。SDK 55 の新機能や Hermes v1 の最適化については、Expo SDK 55 パフォーマンス最適化ガイドも参照してください。
Liquid Glass の実装 — NativeTabs と GlassView
SDK 54 への移行が完了したら、Liquid Glass デザインを実装していきましょう。
NativeTabs でタブバーを Liquid Glass に
expo-router v4 の Tabs コンポーネントは、iOS 26 デバイスでは自動的に Liquid Glass スタイルのタブバーを使用します。特別なコードを追加しなくても、SDK 54 + expo-router v4 の組み合わせで動作するはずです。
// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
export default function TabLayout() {
return (
<Tabs
screenOptions={{
// iOS 26 では自動的に Liquid Glass タブバーが適用される
// tabBarStyle の変更は Liquid Glass の外観に影響する場合がある
headerShown: false,
}}
>
<Tabs.Screen
name="index"
options={{
title: 'ホーム',
tabBarIcon: ({ focused, color, size }) => (
<Ionicons
name={focused ? 'home' : 'home-outline'}
size={size}
color={color}
// iOS 26 では color が Liquid Glass に合わせて自動調整される
/>
),
}}
/>
<Tabs.Screen
name="explore"
options={{
title: '探索',
tabBarIcon: ({ focused, color, size }) => (
<Ionicons
name={focused ? 'search' : 'search-outline'}
size={size}
color={color}
/>
),
}}
/>
</Tabs>
);
}実機で確認した際にアイコンの色が Liquid Glass 背景と合わない場合は、tabBarActiveTintColor と tabBarInactiveTintColor を調整してみてください。
GlassView でカードやヘッダーにガラス効果を追加
タブバー以外の場所にも Liquid Glass 効果を使いたい場合は、expo-glass-effect パッケージが利用できます。
npx expo install expo-glass-effectimport { GlassView } from 'expo-glass-effect';
import { Platform, Text, View, StyleSheet } from 'react-native';
// iOS バージョンのチェック（フォールバック必須）
const isIOS26OrLater =
Platform.OS === 'ios' && parseInt(Platform.Version as string, 10) >= 26;
export default function GlassCard({ children }: { children: React.ReactNode }) {
if (isIOS26OrLater) {
return (
<GlassView
intensity="medium" // "low" | "medium" | "high"
tint="system" // "light" | "dark" | "system"
style={styles.glassCard}
>
{children}
</GlassView>
);
}
// iOS 25 以下のフォールバック（不透明の通常ビュー）
return (
<View style={[styles.glassCard, styles.fallbackCard]}>
{children}
</View>
);
}
const styles = StyleSheet.create({
glassCard: {
padding: 16,
borderRadius: 16,
overflow: 'hidden',
marginVertical: 8,
},
fallbackCard: {
backgroundColor: 'rgba(255, 255, 255, 0.9)',
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 4,
},
});フォールバック実装を省略しないこと
GlassView は iOS 26 以上でのみ動作します。フォールバックなしにすると、iOS 25 以下のユーザーでクラッシュが発生します。iOS 26 のシェアはまだ100%ではないので、必ずフォールバックを用意してください。
iOS 26 対応でよく遭遇するエラーと対処法
実際に移行を進めていると、いくつかパターン化されたエラーに出会います。
GlassView でクラッシュ「API not available」
一部の iOS 26 ベータ版では Liquid Glass API が利用できないバージョンがあります。上記のフォールバック実装（isIOS26OrLater チェック）で対応できます。iOS 26 リリース版では基本的に問題ありません。
タブアイコンの tint color がスクロール時に正しく変わらない
これは expo-router の既知の問題（expo/expo Issue #39930）です。SDK 54 の最新パッチバージョンで修正されていることが多いので、npx expo install expo-router@latest で更新してみてください。
back ナビゲーションに Liquid Glass が強制適用されてカスタムスタイルが崩れる
iOS 26 では back navigation の UI に Liquid Glass が適用されます（expo/expo Issue #40081）。カスタムのヘッダースタイルを設定している場合は、Expo Router の headerStyle や headerBackground プロパティを使って調整が必要になるケースがあります。
SDK 55 移行時に New Architecture 未対応ライブラリでエラー
SDK 55 では Legacy Architecture が完全に削除されているため、New Architecture 未対応のライブラリがあると移行時にエラーになります。React Native New Architecture 移行ガイドを参考に、ライブラリの互換性を事前に確認しておくと安心です。
Rork Max の SwiftUI アプリとの違い
Rork Max で生成した SwiftUI ネイティブアプリは、iOS 26 の Liquid Glass を Expo とは別の方法で扱います。SwiftUI では .glassEffect() モディファイアを直接使えるため、コンポーネント単位での細かなカスタマイズが可能です。
Rork Max の SwiftUI アプリで iOS 26 対応を進めている方は、Rork Max iOS 26 Liquid Glass 実装ガイドもあわせて参考にしてください。
対応の優先順位
iOS 26 対応は一度に全部やる必要はありません。私がお勧めする順序はこちらです。
まず Expo SDK 54 へのアップグレードを行い、expo-doctor で警告がないことを確認します。次に Safe Area の動作確認です。実機で iOS 26 デバイスを使い、コンテンツがステータスバーやホームインジケーターと重なっていないかを確認します。その後、TestFlight でタブバーの Liquid Glass 表示を確認します。アイコンの色や見た目に問題がなければ、この時点でリリース可能です。
GlassView を使った追加の Liquid Glass 演出は、その後の余裕があるタイミングで段階的に取り入れていくのがいいと思います。SDK 55 への移行も、Legacy Architecture を使っているライブラリがないことを確認してから進めると安全です。
まずは SDK 54 にアップグレードして、TestFlight に出して実機確認。これが一番シンプルで確実なスタート地点です。
React Native や Expo のエコシステムは変化が速いですが、Rork が生成するアプリのシンプルな構成は、こういった移行のしやすさという点では大きな強みだと感じています。