How to create Apple Maps style liquid glass sheets in Expo (the real way)

claudejamodel: claude-sonnet-4-20250514

ExpoでApple Maps風リキッドガラスシートを作成する方法（本格的なやり方）

Development • React Native • Users • November 25, 2025 • 4分で読める

Arunabh Verma
ゲスト著者

Expo UI、Expo Router、TrueSheetを使用して、滑らかなdetent遷移を持つ新しいiOS 26のリキッドガラスボトムシートをExpoで再現する方法を学びましょう。

iOS 26では、ボトムシートの動作が変更されたことにお気づきでしょう。明らかにリキッドガラスがありますが、新しい遷移もあります。

最低のdetentでは、シートは浮遊状態にあります。画面の上に座り、見える隙間と完全に丸い角があります。

中間のdetentまでドラッグすると、まだ浮遊していますが、エッジにより近くなるため、隙間が狭くなり、角の半径が調整されます。

上部のdetentまでドラッグすると、遷移し、隙間が消えます。浮遊カードのような動作を停止し、私たちが慣れ親しんだ通常のフルシートのように動作し始めます。

最新のApple Mapsを使用したことがあれば、これはまさにその相互作用です：

そこで、さまざまなアプローチを試しました。そして、Expoでそれを実現するいくつかの方法があることがわかりました。

1. expo-swift-ui BottomSheet

これはネイティブシートなので、リキッドガラスサポートがあり、シートdetentを設定すれば、同じ動作が得られます。

しかし、まだベータ版なので、本番環境にはまだ出荷しません。実験には最適ですが、最終ビルドには理想的ではありません。

コード

import { BottomSheet, Host } from "@expo/ui/swift-ui";

<Host style={{ position: "absolute", width }}>
  <BottomSheet
    isOpened={isOpened}
    presentationDragIndicator="visible"
    presentationDetents={[0.1, 0.5, 1]}
    onIsOpenedChange={(e) => setIsOpened(e)}
  >
    <Text>Hello, world!</Text>
  </BottomSheet>
</Host>

ここでは、シートを制御するためにisOpened状態を使用しているだけです。detentは0から1（フル高さ）まで、どこまでスライドできるかを定義します。ドラッグインジケーターは、上部の小さなハンドルまたはグラバーです。

2. Expo Router formSheet Presentation

Evan BaconがX（Twitter）で同じことをExpo Routerで実現することについて投稿していることに気づいたので、それを試してみました。そして、期待通りに動作しました。

これにより、同じシート動作が得られます。

リキッドガラスシート動作

コード

<Stack.Screen
  name="liquidGlassSheet"
  options={{
    headerShown: false,
    presentation: "formSheet",
    gestureEnabled: false,
    sheetGrabberVisible: true,
    contentStyle: { backgroundColor: "transparent" },
    sheetAllowedDetents: [0.1, 0.5, 1],
    sheetInitialDetentIndex: 0,
    sheetLargestUndimmedDetentIndex: 0,
  }}
/>

sheetGrabberVisibleは上部のドラッグインジケーターです。

リキッドガラスの外観のためには、contentStyleのbackgroundColorをtransparentに設定する必要があります。そうしないと、リキッドガラスが透けて見えません。

detentは以前と同様に0から1まで行きます。ユーザーがドラッグダウンで閉じることを望まなかったので、gestureEnabled: falseを設定しました。

sheetInitialDetentIndex: 0は開始detentを0.1に設定します。これにより、シートが分離され完全に丸くなるApple Mapsの開始状態が得られます。

これは、単にシートが必要な場合のほぼすべての通常の使用例に完璧です。しかし、あなたの作業でより多くの制御と処理が必要な場合、カスタムフッターやシートの動きとアニメーションの同期などの詳細を制御するのが困難なため、うまく適合しません。

そこで、他のオプションに移ります。

3. TrueSheet by Jovanni Lo (@lodev09)

これは、シートを大幅に制御したい場合に非常に優れています。ネイティブで、シート背景ブラー（現在、iOS 26以降、ブラー効果の代わりにリキッドガラスを使用）をサポートし、detent、フッターをサポートし、シート遷移とUIを同期するためのアニメーション値を提供します。

コード

const sheet = useRef<TrueSheet>(null);

<TrueSheet
  ref={sheet}
  sizes={[75, "medium", "large"]}
  blurTint="default"
>
  <View>
    <Button
      title="Close Sheet"
      onPress={() => sheet.current?.dismiss()}
    />
  </View>
</TrueSheet>

<Button
  title="Open Sheet"
  onPress={() => sheet.current?.present()}
/>

ここでは、シートはGorhomのSheetと同様にrefを通じて制御されます。sizesはdetentを制御します。数値、パーセンテージ、またはauto、medium、largeなどのプリセット文字列を使用できます。好きなように混合できます。

自動サイジングは私にとって完璧に動作しなかったので、75のように最低の高さを明示的に設定してください。

そして、リキッドガラスの外観にはblurTint="default"を使用してください。readmeはまだ更新されていませんが、ネイティブAPIを呼び出すため、効果は完璧に動作します。

これが基本的に、リキッドガラスシートをExpoアプリに取り入れる本当のアプローチです。detentを意図的に保ち、OSに雰囲気を任せましょう。

これらのReact Nativeアニメーションとトリックに興味がある場合、私のX @iamarunabhで継続的に投稿しています。そこでリキッドガラスシートについても詳しく説明しました。ぜひチェックしてください：

Summary

Summary

Key Points

Translations

ExpoでApple Maps風リキッドガラスシートを作成する方法（本格的なやり方）

1. expo-swift-ui BottomSheet

2. Expo Router formSheet Presentation

3. TrueSheet by Jovanni Lo (@lodev09)