Stack navigation inside Tab navigation

[tsvetann]

There seem to be a lot of confusion and no documentation/examples on how to achieve a main Tab-ed view and being able to navigate to a Stack from with a Tab and then go back to the Tab you came from. Many people ask this question in Discord without progress and since this is a very common navigation design I thought about posting it here.

Here is the navigation architecture:
App has three tabs on the initial screen (Tab A | Tab B | Tab C)
User lands on Tab A by default. Then navigates to a Stack (lets say profile screen, could be shared by multiple tabs)
Where and how should the profile Stack live? Nesting a Stack inside a Tab is regarded as an extra tab. Pulling the Stack outside of the Tabs seems to result in worse performance.

What is the correct approach to embed a Stack inside a Tab? or is embedding a Stack inside a Tab not recommended?

Here is an example folder structure:

(app) _layout.js // Tabs
  (feed) // Tab A
    index.js // initial screen
    profile // folder
      _layout.js // Stack
      index.js // profile screen
  (search) // Tab B
 .....
  (menu) // Tab C

profile/index appears as an extra tab so this is not ideal.

Thanks

[mauricedoepke]

I guess that depends on how you would like your settings screen to be displayed. Should it be shown above the TabBar and hide it or should the TabBar stay visible?

(This should definitely work. I use this pattern in my app)
If you want it the settings screen to hide the TabBar you could architect it like this:

flowchart LR
    RootStackLayout --> TabLayout
    TabLayout --> TabA
    TabLayout --> TabB
    TabLayout --> TabC
    RootStackLayout --> SettingsPage

Loading

This way you can navigate (router.push) to the settings from each screen and pressing back will navigate to the previously open tab.

(This is theory from reading the docs, but should probably work)
If you want it to be displayed inside the tabs you should be able to use the group feature like this:

(app) _layout.js // Tabs
  (feed,search,menu)
     profile.js // profile screen, no need to create a seperate layout for it
  (feed) // Tab A
    index.js // initial screen
  (search) // Tab B
 .....
  (menu) // Tab C

If it will be shown as a tab inside the TabLayout (I am not sure if it will), you can hide it as described here:
https://expo.github.io/router/docs/guides/tabs#hiding-a-tab

[vitalyliber]

@mauricedoepke do you have examples of how to use native layouts (Stack from expo-router) with tabs?

I have two headers on the nested page.

https://github.com/vitalyliber/expo-router-tabs-example/tree/tabs_plus_native_layout

Screen-2023-03-15-222053.mp4

I tried hiding it based on routing, but the animation is flickering.

https://github.com/vitalyliber/expo-router-tabs-example/tree/tabs_plus_native_layout_with_hiding_header

Screen-2023-03-15-222728.mp4

My example has:

• Auth screen
• Tabs screen (for signed-in users)
• Stack navigation inside Tab navigation

Sorry, this file-based navigation concept without good examples is difficult to understand.

[matuskropuch]

@mauricedoepke thank you for sharing! I used the first approach and it worked flawlessly

@vitalyliber it would be helpful if you shared your file structure and navigators used

[vitortonaco]

Helped a lot bro

[BalogunofAfrica]

@vitalyliber What if I want to access the events page from the settings tab too?

[senghuotlay]

However, what i found is that when doing href:null it loses the focused state of the tab-bar.

[rd273001]

I have just started Expo Router, its very confusing for nested navigations and I am really not getting how to make Stack navigation inside Tabs! Its very confusing and looks unstructured! React-navigation is easy to use and looks structured, anyone can understand it clearly!

[ricardogomez-dev]

This was very helpful:

https://www.youtube.com/watch?v=Z20nUdAUGmM

[rd273001]

I got it in some time after playing with it. Thank you btw.

…

On Fri, 2 Aug, 2024, 11:14 am Ricardo Gomez, ***@***.***> wrote: This was very helpful: https://www.youtube.com/watch?v=Z20nUdAUGmM — Reply to this email directly, view it on GitHub <#380 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUGZQMKUOLKDGFA4VOYLTN3ZPMMFRAVCNFSM6AAAAAAVZEPSDWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMRRHE3DOMI> . You are receiving this because you commented.Message ID: ***@***.***>

[abadfish]

@rd273001 Having trouble too. What was your solution?

[rd273001]

check my Repo - JobDekho and play with file and folder structures, you will get it.

[astrojarred]

Still struggling to make this work. I hope I'm just missing something obvious! Has anyone managed to figure this out? I added a minimal reproducible example here to help explain my struggle.

With the structure below we have two behaviors:

• /people are outside the (tabs) layout. We have back buttons and swipeback gestures on people pages, but we don't see the tab bar and must use the back button to navigate back to the tab view.
• /items are inside the tab bar. We can see the tab bar when navigating to an item page, but we don't have back buttons or swipeback gestures. In addition, the tab bar defocuses as @senghuotlay shows (I assume because we're navigating to a hidden tab).

So, is there a way to do a combination of both? i.e. always see the tab bar at the bottom while also being able to swipe/navigate backwards through the stack.

- /(tabs)
   - _layout.tsx (expo-router Tabs, items tab is hidden with `href = null`) 
   - index.tsx
   - explore.tsx
   - /items
      - _layout.tsx (expo-router Stack)
      - [id].tsx
      - gooditem.tsx
- /people
   - _layout.tsx (expo-router Stack)
   - [name].tsx
   - you.tsx

[rd273001]

You can take a look on my repository for structure, may be you could get it what you want, if you are using tabs and stack... And you can play with the structure in that to test.. Like if you want tab for ever then place job in jobs... I don't remember it but look into it, I tried with different things, so I got that how was it working... You can do same. Even now, still, I am struggling with it but with something else, just the problem is its new and I haven't used file based expo router much, once I use it in 2-3 projects I will get used to it too, few days back using latest expo version I tried to implement stack navigation with some different structure, and I was using TypeScript, even I thought everything is fine and right but it was not working properly. Also using Typescript gives error on just giving route href like this - "/" or "/dashboard" which says to use relative href like - "./" or "./dashboard".

…

On Wed, 27 Nov, 2024, 7:36 pm Jarred Green, ***@***.***> wrote: Still struggling to make this work. I hope I'm just missing something obvious! Has anyone managed to figure this out? I added a minimal reproducible example here <https://github.com/astrojarred/tabs-v-stacks> to help explain my struggle. With the structure below we have two behaviors: - /people are outside the (tabs) layout. We have back buttons and swipeback gestures on people pages, but we don't see the tab bar and *must* use the back button to navigate back to the tab view. - /items are inside the tab bar. We can see the tab bar when navigating to an item page, but we don't have back buttons or swipeback gestures. In addition, the tab bar defocuses as @senghuotlay <https://github.com/senghuotlay> shows (I assume because we're navigating to a hidden tab). So, is there a way to do a combination of both? i.e. always see the tab bar at the bottom while also being able to swipe/navigate backwards through the stack. - /(tabs) - _layout.tsx (expo-router Tabs, items tab is hidden with `href = null`) - index.tsx - explore.tsx - /items - _layout.tsx (expo-router Stack) - [id].tsx - gooditem.tsx - /people - _layout.tsx (expo-router Stack) - [name].tsx - you.tsx — Reply to this email directly, view it on GitHub <#380 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUGZQMIDMGRTBQKLKOKOXND2CXGX7AVCNFSM6AAAAAAVZEPSDWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMZZGUYTMMA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[rd273001]

Sorry I forgot to mention the Git repository URL - https://github.com/rd273001/JobDekho

…

On Wed, 27 Nov, 2024, 7:36 pm Jarred Green, ***@***.***> wrote: Still struggling to make this work. I hope I'm just missing something obvious! Has anyone managed to figure this out? I added a minimal reproducible example here <https://github.com/astrojarred/tabs-v-stacks> to help explain my struggle. With the structure below we have two behaviors: - /people are outside the (tabs) layout. We have back buttons and swipeback gestures on people pages, but we don't see the tab bar and *must* use the back button to navigate back to the tab view. - /items are inside the tab bar. We can see the tab bar when navigating to an item page, but we don't have back buttons or swipeback gestures. In addition, the tab bar defocuses as @senghuotlay <https://github.com/senghuotlay> shows (I assume because we're navigating to a hidden tab). So, is there a way to do a combination of both? i.e. always see the tab bar at the bottom while also being able to swipe/navigate backwards through the stack. - /(tabs) - _layout.tsx (expo-router Tabs, items tab is hidden with `href = null`) - index.tsx - explore.tsx - /items - _layout.tsx (expo-router Stack) - [id].tsx - gooditem.tsx - /people - _layout.tsx (expo-router Stack) - [name].tsx - you.tsx — Reply to this email directly, view it on GitHub <#380 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUGZQMIDMGRTBQKLKOKOXND2CXGX7AVCNFSM6AAAAAAVZEPSDWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMZZGUYTMMA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[astrojarred]

Thanks so much for the reply!

Your repository is very helpful but unfortunately doesn't get us all the way there.

The jobs.jsx page itself is a tab, and when you click on a nested page from there it takes us to /app/jobs/[id]. We do not have access to the tab bar anymore when we click on job.

Perhaps I missed something but I believe this is the same situation to the /people page in my example:

/people are outside the (tabs) layout. We have back buttons and swipeback gestures on people pages, but we don't see the tab bar and must use the back button to navigate back to the tab view.