Confusion about shared screens/modals

[JClackett]

Hello!

Thanks for the great template, im trying to switch my app over to expo-router but its significantly more complicated than this one obviously so theres a load of edge cases/scenarios that aren't super obvious how to handle. I have a load of shared screens/modals that can be opened from anywhere from the app's tabs and nested screens.

I'm struggling to understand where the modals should go and how to make them open as proper iOS "modal"s. Should they placed at the very top level outside the tabs layout? but then when closing it how do I know which tab to go back to? should I pass a "redirect" param?

Maybe easier to show my current structure and intentions, really struggling to see how I should structure these shared screens, with the below navigating around seems like it unmounts everything. Whereas on the old react-navigation I could keep pushing these screens and go back and forth indefinitely.

.
├── (auth) <--------------------------------------- modal
│   ├── _layout.tsx
│   ├── login.tsx
│   ├── register.tsx
│   └── request-access.tsx
├── (home) <-------------------------------------- main group
│   ├── (index,account,guides,lists,spots) <------ shared group??
│   │   ├── [username] <-------------------------- shared stack between every screen
│   │   │   ├── (profile)
│   │   │   │   ├── _layout.tsx
│   │   │   │   ├── index.tsx
│   │   │   │   ├── lists.tsx
│   │   │   │   └── van.tsx
│   │   │   ├── _layout.tsx
│   │   │   ├── followers.tsx
│   │   │   └── following.tsx
│   │   ├── _layout.tsx
│   │   ├── account <------------------------------ tab
│   │   │   ├── _layout.tsx
│   │   │   ├── feedback.tsx
│   │   │   ├── index.tsx
│   │   │   ├── info.tsx
│   │   │   ├── interests.tsx
│   │   │   ├── invite.tsx
│   │   │   ├── settings.tsx
│   │   │   └── van.tsx
│   │   ├── guides.tsx <--------------------------- tab
│   │   ├── index.tsx <---------------------------- tab
│   │   ├── lists <-------------------------------- tab
│   │   │   ├── _layout.tsx
│   │   │   ├── index.tsx
│   │   │   └── new.tsx
│   │   ├── spot  <------------------------------- shared stack on every screen, contains modals
│   │   │   ├── [id]
│   │   │   │   ├── _layout.tsx
│   │   │   │   ├── delete.tsx <------------------ modal
│   │   │   │   ├── edit <------------------------ modal
│   │   │   │   │   ├── EditSpotModalView.tsx
│   │   │   │   │   ├── _layout.tsx
│   │   │   │   │   ├── confirm.tsx
│   │   │   │   │   ├── images.tsx
│   │   │   │   │   ├── index.tsx
│   │   │   │   ├── index.tsx
│   │   │   │   ├── report <----------------------- modal
│   │   │   │   │   ├── ReportSpotModalView.tsx
│   │   │   │   │   ├── _layout.tsx <-------------- stack
│   │   │   │   │   ├── index.tsx
│   │   │   │   │   ├── info.tsx
│   │   │   │   ├── reviews
│   │   │   │   │   ├── ReviewForm.tsx
│   │   │   │   │   ├── [id].tsx
│   │   │   │   │   ├── _layout.tsx
│   │   │   │   │   └── new.tsx
│   │   │   │   ├── save-spot-images.tsx <--------- modal
│   │   │   │   └── save.tsx <---- modal
│   │   │   └── _layout.tsx
│   │   └── spots.tsx  <--------------------------- tab
│   └── _layout.tsx
├── _layout.tsx
├── new-spot <------------------------------------- modal
│   ├── NewSpotModalView.tsx
│   ├── _layout.tsx <------------------------------ stack
│   ├── amenities.tsx
│   ├── confirm.tsx
│   ├── images.tsx
│   ├── index.tsx
│   ├── info.tsx
│   └── type.tsx
└── onboarding
    ├── 1.tsx
    ├── 2.tsx
    ├── 3.tsx
    └── _layout.tsx

[JClackett]

Here's a demo using react-navigation

https://github.com/EvanBacon/expo-router-twitter/assets/12549124/d2a12b7e-d16f-40e9-90ab-31ea2f449a11

[JClackett]

Okay, made some good progress actually, what I shared above seems to work okay, just making sure the href's are correct is quite the challenge!

However I cant get the infinite pushing of screens like on the demo, it seems to just flash back to a previously mounted version?

[JClackett]

Yeah it seems something with my current setup wont allow me to keep pushing the same screen to the stack, it seems to go back to a previous version and also removes all previous screens from the stack as well?

[eladgel]

@JClackett were you able to solve this?

[JClackett]

not yet, here's an open issue: https://github.com/expo/expo/issues/27183