Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Confusion about shared screens/modals #7

Open
JClackett opened this issue Jan 23, 2024 · 5 comments
Open

Confusion about shared screens/modals #7

JClackett opened this issue Jan 23, 2024 · 5 comments

Comments

@JClackett
Copy link

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
Copy link
Author

Here's a demo using react-navigation

RPReplay_Final1706020633_compressed.mp4

@JClackett
Copy link
Author

JClackett commented Jan 23, 2024

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
Copy link
Author

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
Copy link

eladgel commented Mar 19, 2024

@JClackett were you able to solve this?

@JClackett
Copy link
Author

not yet, here's an open issue: expo/expo#27183

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants