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.

[astrojarred]

I found a solution that allows for:

• nesting stacks inside tabs
• the same stacks can be accessed from multiple tabs (e.g. you want to access /items both from the home tab and the search tab without changing tabs)
• ios back-swiping and android back button work and go back to the current tab
• you don't need to create tabs only to hide them

The trick is to use Expo Router's Shared routes together with the segment prop of _layout.tsx, thanks to Jonny Townend on stackoverflow.

I've updated a minimal example here and so far it works super smoothly!
https://github.com/astrojarred/tabs-v-stacks

If anyone can find any docs related to the what other parameters _layout.tsx can take let me know-- I'd be curious to read up more.

---

Overview of solution:

- _layout.tsx  (root layout)
- /(tabs)
   - _layout.tsx  [expo router tabs with (home) and (explore)]
   - /(home,explore)
      - _layout.tsx  (key layout file)
      - index.tsx
      - explore.tsx
      - /items
         - _layout.tsx  (expo-router Stack)
         - [id].tsx
         - gooditem.tsx
      - /people
         - _layout.tsx  (expo-router Stack)
         - [name].tsx
         - you.tsx

And the key layout file:

// (tabs)/(home,explore)/_layout.tsx

import { Stack } from "expo-router"
import { useMemo } from "react"

const Layout = ({ segment }: { segment: string }) => {

   // use `segment` to conditionally set the root screen
   const rootScreen = useMemo(() => {
      switch (segment) {
         case '(home)':
               return <Stack.Screen name="index" options={{ title: 'Home', headerShown: false }} />
         case '(explore)':
               return <Stack.Screen name="explore" options={{ title: 'Explore', headerShown: false }} />
      }
   }, [segment])

   // shared routes go here
   return (
      <Stack>
         {rootScreen}
         <Stack.Screen name="items" options={{ title: 'Items' }} />
         <Stack.Screen name="people" options={{ title: 'People' }} />
      </Stack>
   )
}

export default Layout

[NorseGaud]

THAT WAS IT. Thank you <3

[o2bomb]

This worked for me! Thank you so much @astrojarred

[Wolfleader101]

There has got to be a better way than this 🤔

If all my tabs have their stack, it would be nice to have a "default tab" option.

I.e

- _layout.tsx  (root layout)
- /(tabs)
   - _layout.tsx  (tabs layout)
   -  /devices
      - _layout.tsx (stack)
      - index.tsx 
      - [id].tsx
   - /notifications
      - _layout.tsx (stack)
      - index.tsx 
      - [id].tsx
   -  /settings
      - _layout.tsx (stack)
      - index.tsx 
      - account.tsx 
      - billing

If I navigate from devices to notifications or settings and then navigate back, I want it to remember what stack item I had open.
Right now this doesn't work because well there's no "index" - but in the case here, there your "index" would be for example the devices.

[teujorge]

"index" is the default tab... so you can create a index.tsx file inside (tabs) that simply returns <Redirect href="default-tab" />

or rename your default tab (in this case your device folder) to "index"

[Wolfleader101]

"index" is the default tab... so you can create a index.tsx file inside (tabs) that simply returns <Redirect href="default-tab" />

or rename your default tab (in this case your device folder) to "index"

I tried this - and it works great on paper except it causes flickering when it redirects (shows the empty index for a second). It also creates its own tab if you do this.

[teujorge]

Hmm, I see what you mean about the redirect issue. I’m using the approach where I renamed my default tab folder to ‘index,’ and it’s working fine for me. Have you tried that?

[samtsai]

 <Tabs.Screen
        name="index"
        redirect
        options={{
          href: null,
          title: "",
        }}
      />

This setup for me in addition to the index.tsx & <Redirect /> works pretty well for me. I'm not sure I need the redirect attrigute on the tab but href: null makes the tab not visible and title: "" takes care of the title from showing.

[Wolfleader101]

Hmm, I see what you mean about the redirect issue. I’m using the approach where I renamed my default tab folder to ‘index,’ and it’s working fine for me. Have you tried that?

I did - but I don't really want that, I specifically want the default root to be /devices because there is a sub directory /device/[id] so otherwise it would be /index/[id] which would just come out as /[id] as links.

[gesturetaj]

+1

[n-ii-ma]

This is still a bothersome issue!