Expo SDK 54にバージョンアップ + Expo GlassEffectを試してみる

概要

Expo SDK 54 がリリースされたので移行し、合わせて iOS の Liquid Glass 表現と expo-glass-effect を試した内容をまとめる。

PR

Expo SDK 54

実装

以下のコマンドで主要パッケージを更新。

npx expo install expo@^54.0.0 --fix

続いて警告や非推奨の指摘を解消。

npx expo-doctor

警告解消後もビルドでエラーが出たため、expo-web-browser をプラグインに追加。

■ app.config.ts

plugins: [
  // ...省略
  "expo-web-browser",  // ← 追加
],

ここまででアプリは起動できた。Androidは見た目に変化なしだが、iOS は iOS26 で起動するとヘッダーが Liquid Glass 仕様に変わる。

Android	iOS

www.apple.com

Expo GlassEffectを試してみる

iOS26 で追加された演出に関連して、expo-glass-effect を試す。

docs.expo.dev

以下のコードで View と GlassView を並べて比較。

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

export default function App() {
  return (
    <View style={styles.container}>
      <Image
        style={styles.backgroundImage}
        source={{
          uri: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop",
        }}
      />

      {/* Basic View */}
      <View style={styles.view}>
        <Text>test</Text>
      </View>

      {/* Basic Glass View */}
      <GlassView style={styles.glassView}>
        <Text>test</Text>
      </GlassView>

      {/* Glass View with clear style */}
      <GlassView style={styles.tintedGlassView} glassEffectStyle="clear">
        <Text>test</Text>
      </GlassView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  backgroundImage: {
    width: "100%",
    height: "100%",
  },
  view: {
    position: "absolute",
    top: 100,
    left: 50,
    width: 200,
    height: 100,
    borderRadius: 12,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
    borderColor: "black",
    borderWidth: 1,
  },
  glassView: {
    position: "absolute",
    top: 250,
    left: 50,
    width: 200,
    height: 100,
    borderRadius: 12,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  tintedGlassView: {
    position: "absolute",
    top: 400,
    left: 50,
    width: 200,
    height: 100,
    borderRadius: 12,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  text: {
    fontSize: 16,
    fontWeight: "600",
    color: "#000",
    textAlign: "center",
  },
});