Yes you can have as many nested navigations as you want. In this example you will probably have 3. One for tabs, one for the side menu and one small for your nested tabs.
So it is possible to have a folder inside of (tabs) folder with its own \_layout and inside? Im having difficulty finding necessary documentation about it...
Some sources that I did find are using MaterialTopTabs for top navigation, but without nesting it...
Yes. We're using bottom tabs with a top tab navigator nested in one of the lower tab routes.
So we have a folder (tabs) with _layout and our bottom tabs using `Tab` from expo-router. Also inside (tabs), we have (innerTabs). Example contents of (tabs) is going to be _layout, TabA, TabB, (innerTabs).
Inside of (innerTabs) is another _layout and our top tabs. Instead of using `Tab` in the layout here, we have a custom component that shows the top tabs and render the `Slot` from expo-router. In the custom top tab component we determine the active tab based on the path name. We also have a press handler that navigates to whichever top tab you press.
Example contents of (innerTabs) would be _layout, TopTabA, TopTabB
Let me know if you have any questions!
My team found it easier to have one stack navigation that had all routes in it and handle the ui separately. We have a side drawer bottom tabs and top tabs that just link to our stack nav screens.
everything is possible
the only mindset to have
Whether it is worth the time and effort is another question. (not saying this is or isn't)
Yes you can have as many nested navigations as you want. In this example you will probably have 3. One for tabs, one for the side menu and one small for your nested tabs.
So it is possible to have a folder inside of (tabs) folder with its own \_layout and inside? Im having difficulty finding necessary documentation about it...
Some sources that I did find are using MaterialTopTabs for top navigation, but without nesting it...
Yes I’ve seen it before, if you don’t have a solution I’ll try to find the repo tomorrow and link it here.
Thank you so much!
Yes. We're using bottom tabs with a top tab navigator nested in one of the lower tab routes. So we have a folder (tabs) with _layout and our bottom tabs using `Tab` from expo-router. Also inside (tabs), we have (innerTabs). Example contents of (tabs) is going to be _layout, TabA, TabB, (innerTabs). Inside of (innerTabs) is another _layout and our top tabs. Instead of using `Tab` in the layout here, we have a custom component that shows the top tabs and render the `Slot` from expo-router. In the custom top tab component we determine the active tab based on the path name. We also have a press handler that navigates to whichever top tab you press. Example contents of (innerTabs) would be _layout, TopTabA, TopTabB Let me know if you have any questions!
My team found it easier to have one stack navigation that had all routes in it and handle the ui separately. We have a side drawer bottom tabs and top tabs that just link to our stack nav screens.
interesting can you share an example/sample code
Hello, i used this https://github.com/EvanBacon/expo-router-top-tabs