# Depth Drawer — 3D Side Menu with Morphing Menu Button for React Native & Expo

> A side menu where the screen steps back into depth: it shrinks, rounds and moves aside with ghost layers behind it, swings back like a door, slides, or stays under a floating menu card. One progress scrubs it all from the first pixel of an edge swipe: the menu's stagger, the…

- Kind: Mobile component (Navigation & Tab Bars)
- Price: Free
- License: MIT License. Do anything with it, keeping the copyright notice.
- Developer: UpFork
- Tags: tab-bar, gesture, react-native, expo, reanimated, drawer, side-menu, navigation
- npm packages: expo-haptics, expo-status-bar, react-native-gesture-handler, react-native-reanimated, react-native-safe-area-context, react-native-svg, react-native-worklets
- Published: 2026-10-14
- Updated: 2026-10-14
- Page: https://upfork.dev/products/depth-drawer-react-native

## How to get it

It's a React Native component for Expo apps (Expo SDK 57), not a shadcn item: copy its folders into the app's root from its ZIP (Download source on its page) or through UpFork's MCP server (install_product), then install its packages with Expo:

```bash
npx expo install expo-haptics expo-status-bar react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg react-native-worklets
```

It's free and in no plan: an AI assistant installs it through MCP with no account, and its ZIP downloads with a free UpFork account.

Step by step, with the App.tsx that shows it and Skia's web setup: https://upfork.dev/docs/mobile.

## About

Depth Drawer is the side menu that makes an app feel built, not assembled: the screen doesn't just slide away, it steps back.

- **Four styles.** Scale: the screen shrinks, rounds its corners and moves aside on a soft shadow, with faint ghost copies behind it for depth. Swing: it slides and turns back in perspective like a door, shading towards the edge that recedes. Push: the classic slide, refined. Float: the menu is a card over the dimmed screen.
- **Scrubbed, never timed.** One progress drives everything from the first pixel of an edge swipe to the settle: the screen, the menu items arriving one after another, the avatar, and the menu button's three bars turning into a close mark (or a back arrow).
- **Feels right.** A 1:1 drag from where the pointer went down, a release projected with its speed, a spring that keeps it, a rubber band past open. Edge swipes never block vertical scrolling. Tap the screen, drag, Android back or Esc to close.
- **A menu kit.** Header with avatar and plan badge, sections, items with icons and badges, an active pill that slides between items, a footer with a light/dark switch and sign out.
- **No navigation library.** Works with React Navigation and Expo Router (adapters in the README), either side, right-to-left too.
- **Accessible.** The open menu is modal for screen readers, focus moves to its first item, the screen becomes a "Close menu" button; reduced motion falls back to a plain slide and fade.

Three complete demos: a finance app opened in the scale style with ghost layers, a music player that swings, and a notes app with a floating menu of folders and tags.