I've been using expo & react-navigation for developing on both mobile & desktop and so far it's awesome! However, I need to display bottom tab in mobile & drawer in desktop. I've been facing some trouble with applying different navigator in smaller & larger screens. We want to display tab in mobile & a sidebar in larger screens. The route structure is different between mobile & larger screen. For example: In mobile screens:
- Main Navigator
- Tab Navigator
- Screen A
- Screen B
- Screen C
- Profile Stack Navigator
- Settings Stack Navigator In mobile we just want the 3 screens to be inside the tab, while the other should not display the tab. In larger screens:
- Tab Navigator
- Main Navigator
- Drawer Navigator
- Stack A
- Screen A
- Profile Stack Navigator (put the stack here, because we don't want the profile stack navigator to be displayed in drawer item list)
- Stack B
- Screen B
- Settings Stack Navigator
- Stack C
- Screen C Notice that in larger screens, we want every screen to be inside the drawer navigator (as the sidebar would be persistent)
- Stack A
- Drawer Navigator
The first thing we can would be to do a conditional rendering (based on the dimensions), but several problems arises:
- How would we type this in the screens?
- The structure is different, how would we navigate? (the path would be also be different right?)
I'm thinking to create some kind of navigation wrapper that will receive navigation & current screen as the params. But not sure about this. If you guys have any thoughts or ever experienced this, please do share! Thanks in advance!