Repository navigation
Conversation
… navigator Web form sheets render through a custom StackRouter navigator (WebModalStack.web.tsx) that layers formSheet/modal routes as centered dialogs over the live base stack, matching the behavior EXPO_UNSTABLE_WEB_MODAL=1 provided before SDK 58 removed it. Native keeps expo-router's Stack via a passthrough re-export.
Stacked modal routes each render an overlay; leaving every listener armed would close the whole pile on one Esc press.
Drop the render-without-crashing and styling assertions from the web test (not-worth-writing categories in docs/testing.md), compress comment blocks under the 2-line cap, and tighten the frontend.md constraint.
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
✅ Deploy Preview for dexterplanner canceled.
|
cvburgess
deleted the
dex-234-replace-experimental-web-modal-with-a-custom-web-modal
branch
October 20, 2026 19:59
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
Web form sheets (= "new task", "edit task", and the settings task/list/habit editors) rendered through Expo Router's experimental modal stack, which SDK 58 removes. Without a replacement they stop rendering as dialogs on web — and on this branch (already on SDK 58)
EXPO_UNSTABLE_WEB_MODAL=1is already inert, so they had silently regressed to full-page routes. Fixes the regression, not just the upgrade.Closes DEX-234
What
Follows Expo's custom web modal navigator guide, which is the documented replacement for the removed experimental stack.
src/components/WebModalStack.web.tsx— a customStackRouternavigator built withcreateStandardRouterNavigator+NativeStackView. It renders the stack up to the last non-modal route as the live base stack, then layers everyformSheet/modalroute on top as a centered dialog (max width 680, theme tokens) inside the existingWebOverlay(repo rule: every web overlay goes throughWebOverlay.web.tsx). Dialogs close on backdrop click (a full-viewportPressable), Esc (topmost dialog only), and browser back (actions.back). The base stack stays mounted, so the screen underneath keeps its scroll position.src/components/WebModalStack.tsx— native passthrough re-exporting expo-router'sStack, so native form sheets are byte-for-byte unchanged.(app)/_layout.tsx(new-task, edit-task/[id]),settings/_layout.tsx(lists/[id], habits/[id]), andsettings/tasks/_layout.tsx([id]) swapStack→WebModalStack. The settings/lists + habits editors are included because the old stack was bundle-wide — everyformSheetscreen rendered as a dialog, and skipping them would have left a visible regression on web.src/package.json— dropEXPO_UNSTABLE_WEB_MODAL=1fromstart/web/export:web.docs/frontend.md— replace the experimental-stack bullet with the new navigator's constraint; tighten the now-stale vaul reference in "Web overlays".ModalScreen contract preserved
The dialog body stays a flex column and
ModalScreen.web.tsx(flex: 1) still fills it — the guide's snippet renders the dialog as a flex row, which would have broken every screen relying on the existing contract.Validation
isModalRouteclassification, backdrop + Esc dismissal, topmost-only Esc, plus the existing 66 layout/screen tests still green (they mockexpo-router'sStack, which the native passthrough re-exports.EOF
)