expo-morphing-menu

A morphing, keyboard-aware composer + picker menu for React Native.

✨ Features

• 🫧 Morphing presentation — a single spring machine drives the composer's width, height, corner radius, and position together, so the input bar grows into the menu surface instead of a separate sheet sliding up
• ⌨️ Keyboard-following via react-native-keyboard-controller — the surface reads live keyboard height and stays glued above it as it opens and closes
• 🧭 Multi-panel navigation — register rows (Camera, Photos, Files, Plugins…) and matching panels; open(id) morphs the surface to that panel and back() returns to the item list
• 🖼️ Single-image morph — tapping a photo runs a shared-element morph from its grid cell into an attachment thumb, coordinated through the root via reportFrame / run
• 🧠 TypeScript-first, fully typed surface

⚙️ Installation

git clone https://github.com/rit3zh/expo-morphing-menu
cd expo-morphing-menu
bun install
bun start -c

Core dependencies (already wired up in this template):

bun add react-native-reanimated react-native-gesture-handler \
  react-native-safe-area-context react-native-keyboard-controller \
  expo-symbols expo-glass-effect expo-image expo-document-picker

Expo SDK 57. Read the exact versioned docs at https://docs.expo.dev/versions/v57.0.0/ before changing native code.

🚀 Usage

Wrap your app once with KeyboardProvider, then compose a `` at the bottom of your screen.

// app/_layout.tsx
import { KeyboardProvider } from "react-native-keyboard-controller";
import { Stack } from "expo-router";

export default function RootLayout() {
  return (
    
      
    
  );
}

The simplest composer — a placeholder, one trigger, one menu item:

import { BottomInput } from "@/components/bottom-input";
import { SymbolView } from "expo-symbols";

export function Composer() {
  return (
    
      
        
      

      
        }
        />
      

      
        {/* your panel here */}
      
    
  );
}

Preview

https://github.com/user-attachments/assets/15abbea3-644f-4680-8795-4d16182a70ec

Controlling open state

Pass open / onOpenChange to drive the menu from outside (e.g. to prefetch the photo library the moment it opens):

const [menuOpen, setMenuOpen] = useState(false);

}
>
  {/* …