gitwtfhub

wtf is expo-dynamic-tray?

rit3zh/expo-dynamic-tray — explained in plain English

Analysis updated 2026-05-18

153TypeScriptAudience · developerComplexity · 2/5Setup · easy

TL;DR

A React Native and Expo component that opens a spring animated bottom sheet tray, with multi-view navigation and keyboard-following behavior.

Mindmap

mindmap
  root((expo-dynamic-tray))
    What it does
      Bottom sheet tray
      Spring morph animation
      Auto sizing
    Tech stack
      TypeScript
      React Native
      Expo
    Use cases
      Settings panels
      Multi step flows
      Persistent footer actions
    Audience
      React Native developers
      Expo app builders

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Add a keyboard-aware bottom sheet to a React Native app without building the animations from scratch.

REASON 2

Build multi-step in-app flows like settings or onboarding using the tray's view navigation.

REASON 3

Create a persistent action footer that stays visible while switching between different tray views.

What's in the stack?

TypeScriptReact NativeExpoReanimatedGesture Handler

How it stacks up

rit3zh/expo-dynamic-traybotpress/v12mclisterjoeh2o/yellowkey-bitlocker
Stars153153152
LanguageTypeScriptTypeScriptTypeScript
Last pushed2025-04-10
MaintenanceStale
Setup difficultyeasymoderateeasy
Complexity2/53/51/5
Audiencedeveloperdevelopergeneral

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 30min

Requires installing several peer dependencies such as react-native-reanimated and react-native-keyboard-controller.

Wtf does this do

expo-dynamic-tray is a component library for React Native and Expo apps that gives developers a bottom sheet tray, the kind of panel that slides up from the bottom of a screen. Instead of just sliding into place, the tray uses a single spring animation to move its position, fade its backdrop, and scale itself all together, so it feels like it grows into view rather than snapping open. The tray sizes itself automatically based on whatever content is placed inside it, so there is no need to set fixed heights. It also supports multiple views within one tray, with a real history stack: calling setView moves to a named view, and goBack unwinds through however many views were opened, similar to screens in a navigation stack. Switching between views includes a crossfade and scale effect so the transition feels continuous rather than abrupt. One practical feature is keyboard awareness. Using the react-native-keyboard-controller library, the tray lifts itself above the on screen keyboard and stays attached to it as the keyboard appears or moves. Users can also dismiss the tray by swiping or flicking it away, and the library measures both how far a user dragged and how fast, then snaps back with a spring if the swipe does not meet the threshold. The tray supports a persistent footer area that can hold buttons or other content. This footer slot stays mounted while switching between views, so buttons do not disappear or jump around during navigation. Developers can open and control the tray either declaratively, using a Trigger component, or imperatively, by calling functions from a useTray hook anywhere in their component tree. The project is written entirely in TypeScript, so all its components and functions are typed. Installation requires cloning the repository and adding a handful of peer dependencies for gestures, safe area handling, keyboard tracking, and Expo's UI package. The README includes code examples covering setup, a simple single view tray, imperative control, multi view navigation, and a shared footer, along with a full prop reference table for each exported component.

Yoink these prompts

Prompt 1
Show me how to wrap my Expo app root with GestureHandlerRootView and KeyboardProvider to use expo-dynamic-tray.
Prompt 2
Write a Tray component with a default view and a details view, using expo-dynamic-tray's setView and goBack.
Prompt 3
Help me add a persistent footer button to my expo-dynamic-tray sheet that stays visible across view changes.
Prompt 4
Show me how to open an expo-dynamic-tray imperatively using the useTray hook instead of the Trigger component.

Frequently asked questions

wtf is expo-dynamic-tray?

A React Native and Expo component that opens a spring animated bottom sheet tray, with multi-view navigation and keyboard-following behavior.

What language is expo-dynamic-tray written in?

Mainly TypeScript. The stack also includes TypeScript, React Native, Expo.

How hard is expo-dynamic-tray to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is expo-dynamic-tray for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.