Skip to content

Confusion about shared screens/modals #7

@JClackett

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions