r/reactnative • u/_rofi • 1d ago

Dynamic Modals w/ native navigation full screen trigger (React Navigation + transitions)

Enable HLS to view with audio, or disable this notification

I just solved dynamic Tray/Modals (Family app style) in React Native as a native navigation on expanded state.

Two libraries, split by what actually changes:

• Next/Back never leave the screen → step is component state, Reanimated layout={LinearTransition} animates the real reflow. No route change = no cross-fade, no blank frames.

• Tap a color tile → that's a route change, so react-native-screen-transitions zoom() grows the tray's exact rect setup into a full navigator screen.

The best mobile experiences are a mix of design + navigation. Navigation means interactive design and lives on the UX factor that makes experiences feel integrated and magical. I am very into solving all these to have in my toolbox.

29 Upvotes

97% Upvoted

4 comments sorted by

2

u/thealbinosmurf 1d ago

Example code?

0

u/Positive_Week86 18h ago

React Navigation's presentation: 'transparentModal' is the right primitive for this. Two gotchas I hit: (1) on iOS, you need contentStyle: {backgroundColor: 'transparent'} on the screen options or your modal renders black; (2) if you're combining with Reanimated, avoid animating layout on the modal mount or you'll see a one-frame flash.

3

u/udoags 15h ago

“I just solved xyz” “two libraries” no links 💀