Nested stack in tab navigator doesn't respect stack nesting in tabs as in react anvigation

[tylerthedeveloper]

Which package manager are you using? (Yarn is recommended)

npm

Summary

As per this old bare bones simple shared below, a tab navigator in react-navigation with stacks inside -> when pushing in the nested stacks it both hides the tab bar and brings in the new header, making it the top contextual page

This discussion started here - but i don't think it sufficed: #518

^ in the above, this link is shared: https://reactnavigation.org/docs/hiding-tabbar-in-screens/ and in the exact expo example, what i am requesting works, but in expo-router, it does not.

I attempted the suggested solution at the bottom but then every single page now needs special custom header / tab bar / back button overrides, whereas in the past it worked automatically.

I think this is a super common scenario, needing stacks in tabs, wherein i need not worry about the all the above - this would be considered blocking upgrade for sure

Minimal reproducible example

There is an article that has example here - https://github.com/captainIN/tab_stack/tree/master

[EvanBacon]

The solution from @marklawlor seems correct.

I think this is a super common scenario, needing stacks in tabs

Sure, but there will be some additional code required to make File-based routing work on native. Perhaps you can utilize the array syntax:

Arrays

Instead of defining the same route multiple times with different layouts, use the array syntax (,) to duplicate the children of a group.

• app/(home,search)/[user].js -- creates app/(home)/[user].js and app/(search)/[user].js in memory.

Distinguishing between the two routes using the segment prop of a layout.

export default function DynamicLayout({ segment }) {
  if (segment === "(search)") {
    return <SearchStack />;
  }

  return <Stack />;
}

---

e.g.

app/
  (home,search)/
    _layout.js -> Stack
    home.js
    search.js
  _layout.js -> Tabs

This has a lot of caveats though:

• app/(home)/home.js is the automatic initial route for app/(home)/_layout.js, this can be changed using unstable_settings
• All routes in app/(home,search)/ are parallel routes, reloading the page on them will return to the default stack (first group listed in the array, i.e. home)

[EvanBacon]

I put together a demo app https://github.com/EvanBacon/expo-router-twitter

[hasanaktas]

@EvanBacon

Screen.Recording.2023-05-19.at.05.38.32.mov

Why is the tab structure broken when I rest the profile page in the Twitter example?

I'm trying to set up a conjugate structure with my website. My category landing pages can take many forms.

/jewelry/necklaces/best-products
/jewelry/necklaces
/jewelry

but I want to match them all in the same place.(exp: [...resolve].tsx) because there is no specific rule. It can be 2 or 3 or 5 or a single segment.

I showed what I want to do in the example of Twitter, I would be very happy if you review and give feedback.

https://github.com/hasanaktas/expo-router-twitter

[senghuotlay]

i am having the same issue on my real app

[huix9527]

similar issue with shared routes, I'm following the Shared Routes guide (https://docs.expo.dev/router/advanced/shared-routes/), but the router is working as the screenshot above, that's not what I want

[DenisDov]

Im fight with shared routes half of the day, figured out i can't use them as arrays, my behavior is the same as in developers above, I ended by copy paste [id].tsx in desired stacks. sadly.