expo-apple-maps-sheet — Apple Maps風ボトムシート（React Native）

Mobile
expo-apple-maps-sheet — Apple Maps風ボトムシート（React Native）

expo-apple-maps-sheet — Apple Maps風ボトムシート（React Native）

Apple Mapsのようなネイティブ感のあるボトムシートをReact Native／Expo環境で手軽に導入できるコンポーネントライブラリ。TypeScriptで実装され、TrueSheetによるスムーズなアニメーションとネイティブ風のジェスチャーを提供。iOSでそのまま動作することを第一に設計され、最小限の依存で軽量に組み込めます。（約300字）

https://github.com/rit3zh/expo-apple-maps-sheet

概要

expo-apple-maps-sheetは、React Native（特にExpo環境）向けに設計された、Apple Maps風の見た目と操作感を再現したボトムシートコンポーネントです。TypeScriptで書かれ、TrueSheetを利用した滑らかなアニメーションと自然なドラッグジェスチャーを特徴とします。iOS上でそのまま動作することを重視しており、地図アプリや位置情報を扱う画面に違和感なく組み込めるUIを提供します。軽量で導入が容易なため、既存のExpoプロジェクトに短時間で追加できます。

GitHub

リポジトリの統計情報

  • スター数: 22
  • フォーク数: 0
  • ウォッチャー数: 22
  • コミット数: 3
  • ファイル数: 12
  • メインの言語: TypeScript

主な特徴

  • Apple Mapsにインスパイアされた自然なドラッグ・スワイプジェスチャー
  • TrueSheetベースの滑らかなトランジションと物理的な動きの再現
  • TypeScript + Expo互換で、すぐにプロジェクトに組み込み可能
  • iOSでの動作を想定したデフォルト設定（追加のネイティブ設定なしで利用可）

技術的なポイント

このライブラリの核になる技術要素は、ジェスチャー処理とアニメーションの滑らかさをいかにネイティブ感覚で実現するかです。TrueSheetを採用することで、スナップ位置（折りたたみ／中間／全展開など）やフリクション、加速度に基づく自然な動きを簡潔に表現しています。TypeScriptで型定義を付与しているため、導入先のアプリケーション側からはpropsで高さやスナップ位置、バックドロップ表示の有無などを明示的に設定でき、静的解析やIDE補完の恩恵を受けられます。

Expo互換とする設計により、ネイティブモジュールの追加やネイティブビルドの手間を低減しています（ただしiOS向けに最適化されていることに留意）。構成面では、最小限の依存でUI本体とハンドリングを分離し、ボトムシートの表示ロジックとコンテンツ（子コンポーネント）を疎結合に保つことで、地図やリストなど多様なコンテンツを内包可能です。パフォーマンス面では、不要レンダリングの抑止やアニメーションにNative Driver相当のパフォーマンスを活かす工夫が期待できます（TrueSheetの実装に依存）。

さらに、Expoプロジェクトにおけるサンプルやデモを同梱しており、READMEやプレビュー動画によって導入手順が明示されています。開発者は既存のナビゲーション構成や状態管理（Redux / Context等）と組み合わせて、モーダル的な情報表示や詳細パネルの実装を短期間で行えます。現状はiOS優先の実装であるため、Androidでの挙動差分やカスタムジェスチャーの拡張を検討する余地があります。

プロジェクトの構成

主要なファイルとディレクトリ：

  • .gitignore: file
  • .vscode: dir
  • README.md: file
  • app.json: file
  • app: dir

…他 7 ファイル

（注）プロジェクト全体はTypeScriptで記述され、アプリ用のサンプルやコンポーネント本体、スタイル設定、ドキュメントが含まれている構成です。実際の使用ではREADMEのインストール手順に従い、Expoプロジェクト内でコンポーネントをimportして利用します。

まとめ

iOS向けに自然で滑らかなApple Maps風ボトムシートを手軽に導入できる軽量ライブラリ。

リポジトリ情報：

READMEの抜粋：

🗺️ expo-apple-maps-bottom-sheet

Beautiful Apple Maps–style bottom sheet built with React Native

🚀 Preview

https://github.com/user-attachments/assets/c4280638-5dc2-4b34-9ad8-2a73f46c9a70

🧩 Features

  • 🌀 Apple Maps–inspired native gestures
  • 💨 Smooth animations powered by TrueSheet
  • 🎨 TypeScript + Expo compatible
  • 📱 Works out of the box on iOS

⚙️ Installation

git clone https://github.com/rit3zh/expo-a...