Using Tabs inside of a Stack

[akambale]

Hi all,

I have an app where I have a tabs navigation inside of a stack navigation. My main reason for this is because there are some screens where I don't want to show tab navigation bar or header. Navigating back has been a huge mess as a result of this though.

I'll try to navigate back with android gestures and instead of going from Tab3 to Tab2 as expected it will go back to Tab1. I'm guessing that's because it's navigating back screens instead of tabs. Ideally, I'd want each Tab.Screen to be even with Stack.Screen when it comes to navigating back.

Is there a better setup or approach for routing so that navigating back feels intuitive? Any help is appreciated!

See example pseudo code below

<Stack>
      <Stack.Screen name='(tabs)' />
      <Stack.Screen name='Auth' />
      <Stack.Screen name='EditContact' />
      <Stack.Screen name='EditJournal' />
      <Stack.Screen name='EditTouch' />
</Stack>

<Tabs>
      <Tabs.Screen name='Contacts' />
      <Tabs.Screen name='Tasks'/>
      <Tabs.Screen name='Journal'/>
</Tabs>

[akambale]

For anyone reading this after, I played around with routing structure and found that putting the stack inside my tabs resulted in the desired navigating back experience. My one gripe with this solution is having the Tab Bar shown on the screen components but the tabBarHideOnKeyboard: true prop is good enough and I'm satisfied with the editing UX. My code now looks like this:

<Tabs>
      <Tabs.Screen name='Contacts' />
      <Tabs.Screen name='Tasks'/>
      <Tabs.Screen name='Journals'/>
      <Tabs.Screen name='(screen)'/>
</Tabs>

Note that the Auth component is on the top level folder with my root component returning <Slot />.

<Stack>
      <Stack.Screen name='EditContact' />
      <Stack.Screen name='EditJournal' />
      <Stack.Screen name='EditTouch' />
</Stack>

This seems to be another way to hide the tab bar for those looking for a solution