【ITニュース解説】Stunning Animated Drawer Navigation in Expo React Native

React Nativeアプリケーションにおいて、ユーザー体験を豊かにするドロワーナビゲーションを、標準的な機能を超えて、視覚的に魅力的なアニメーション付きで実装する方法が解説されている。ドロワーナビゲーションとは、スマートフォンの画面端からスライドして現れるメニューのことで、多くのアプリで画面間の移動に使われる重要なUI要素である。

この開発は、通常のドロワー機能では表現できない、より没入感のある体験をユーザーに提供することを目指した。具体的には、メニューが開閉する際に画面全体がまるで生きているかのように動き、iOSのような洗練されたデザイン、スムーズな3D回転、画面の縮小や奥行きを感じさせるパースペクティブアニメーション、ユーザーのプロフィール表示、そして指の動きに完璧に追従するジェスチャー操作を実現することが目標とされた。

この高度なドロワーを構築するために、いくつかの主要な技術が活用されている。expo-routerは、アプリケーションの画面遷移（ルーティング）をファイル構造に基づいて容易に設定できるツールである。react-native-reanimatedは、React Nativeで非常に滑らかで複雑なアニメーションを作るための中心的なライブラリであり、CPUではなくGPUを使って描画するため、高いパフォーマンスを発揮する。@react-navigation/drawerは、基本的なドロワーナビゲーションの機能を提供するもので、これを基盤としてカスタマイズが施されている。そして、react-native-gesture-handlerは、タップやスワイプなどの様々なジェスチャー操作をネイティブレベルで検知し、アニメーションライブラリと連携させるための基盤となる。

具体的な実装ステップは以下の通りだ。まず、npx create-expo-app@latestコマンドでExpoプロジェクトを新しく作成し、その後必要なライブラリを一括でインストールすることで開発の準備を整える。

次に、画面のアニメーションを実現する「Magic Animation Wrapper」として、drawer-scene-wrapper.tsxというコンポーネントが作成される。このコンポーネントが、メニューが開くときにアプリの各画面が「踊る」ようなアニメーションの鍵を握る。DrawerSceneWrapperは、アプリの各画面を囲むように配置されるコンポーネントであり、ここで重要なのがuseDrawerProgress()というフックだ。これは、ドロワーが閉まっている状態（値が0）から完全に開いた状態（値が1）までの進行度を数値で教えてくれる。この進行度を利用して、useAnimatedStyle()とinterpolate()という関数を組み合わせて画面の見た目を動的に変化させる。例えば、interpolate(progress.value, [0, 1], [1, 0.8])は、ドロワーの進行度が0から1に変わるにつれて、画面の拡大率（scale）が1（元のサイズ）から0.8（80%のサイズ）に縮小するように指示する。同様に、translateXプロパティで横方向への移動、rotateYプロパティでY軸を中心とした3D回転（-25度）を設定している。これにより、ドロワーが開くにつれて、画面は縮小しながら少し横に移動し、奥行きを感じさせるように傾くという、複雑なアニメーションが実現される。さらに、borderRadius: 20で画面の角を丸くする効果も加えられている。

ドロワー自体のUIをカスタマイズするためには、custom-drawer-content.tsxというコンポーネントが作成される。標準のドロワーはシンプルな見た目だが、このプロジェクトでは独自の要素を追加して、よりリッチなメニュー画面を実現している。SafeAreaViewを使って、スマートフォンのノッチ（切り欠き）領域にコンテンツが重ならないように配慮しつつ、上部にユーザーのプロフィール（アバター画像、名前、メールアドレス）を表示するセクションを配置する。その下には、DrawerContentScrollViewとDrawerItemListを使って、基本的なナビゲーション項目（ホームなど）をスクロール可能なリストとして表示する。さらに、下部にはログアウトボタンも追加し、アイコンとテキストで視覚的に分かりやすくしている。全体的に透明な背景を設定することで、ドロワーの背後で動く画面アニメーションが透けて見えるように工夫されている。

アプリケーション全体のレイアウトやナビゲーションの動作を定義する重要なファイルとして、_layout.tsxがある。このファイルではドロワーの構成とスタイルが設定される。まず、GestureHandlerRootViewでアプリケーション全体を囲むことで、ジェスチャー処理が適切に動作するようにしている。メインとなるDrawerコンポーネントには、先ほど作成したカスタムUI (CustomDrawerContent) をdrawerContentプロパティで指定し、標準のドロワーではなく独自の見た目を適用させる。screenOptionsプロパティでは、ドロワーの挙動や見た目に関する様々な設定を行う。headerShown: falseで画面上部のヘッダーを非表示にし、drawerActiveBackgroundColorやdrawerInactiveBackgroundColorで選択中のメニュー項目と未選択のメニュー項目の背景色を細かく設定する。overlayColor: "transparent"は、ドロワーが開いたときに背景が暗くならないように設定され、画面アニメーションを際立たせる効果がある。drawerStyleでは、ドロワー自体の幅を画面の60%に設定したり、上部に余白を設けたりしている。特に注目すべきはdrawerItemStyleで、ここでborderTopRightRadius: 50のように角を丸くするスタイルを適用し、いわゆる「バブルメニューアイテム」のような特徴的なデザインを実現している。選択された項目が、丸みを帯びたカラフルな背景でハイライトされるため、視覚的に魅力的だ。sceneStyleは、ドロワーが開いたときに後ろに見える画面（アニメーションを付けた画面）の背景色を設定する。

最後に、実際にアプリに表示される各画面（例えばホーム画面のindex.tsx）では、その画面全体を先ほど作成したDrawerSceneWrapperで囲む必要がある。これにより、メニューが開閉する際に、その画面が自動的にアニメーションするようになる。また、画面上部にはメニューを開くためのボタン（ハンバーガーアイコン）を配置し、タップすることでドロワーを開くアクションを呼び出せるようにする。

この実装の大きなデザイン上の特徴は、ドロワーのジェスチャーと連動して、画面が3D回転や縮小を行う「アニメーションパースペクティブ」だ。さらに、ドロワー内のメニュー項目は、選択時に右側が丸くハイライトされる「バブルメニューアイテム」としてデザインされている。

開発の過程ではいくつかの一般的な課題も解決されている。例えば、ジェスチャー操作が競合する問題は、アプリケーションのルートをGestureHandlerRootViewで囲むことで解決された。アニメーションが途中でカクついたり、不自然な動きになったりする「Animation Jank」の問題は、Extrapolation.CLAMPという設定を使うことで、アニメーションの範囲外の動きを防ぎ、滑らかさを保った。スマートフォンのノッチや下部のホームインジケーターなど、画面の安全な領域（SafeArea）に関する問題は、react-native-safe-area-contextというライブラリを活用することで適切に対応している。また、TypeScriptを使用しているため、ドロワーのプロパティ（DrawerContentComponentPropsなど）に厳密な型定義を適用し、コードの品質と保守性を高めている。

このように、react-native-reanimatedによるアニメーションの高度な制御、Expoのシンプルな開発ツール、そして戦略的なスタイリングを組み合わせることで、ユーザーを魅了するようなナビゲーションを、比較的シンプルなコードで実現できることが示されている。これは、ただ機能するだけでなく、使うのが楽しくなるようなユーザーインターフェースを開発するための、優れた実践例である。