React-native-navigation: BottomTabs in Modals

[joshuaflores]

Issue Description

I apologize for asking a question through Github Issues but being the case that Navigation in react-native is a mess this seems like the most appropriate place.

What I am trying to do is have a secondary Tab application within/or having modal like capabilities (dismiss, preserve navigation state).

Basically I would call 'navigator.showModal(...)' and within the modal I could have a tab based application.

To clarify I don't need the Modal to be above the root BottomTabs, rather I need a new set of BottomTabs within the Modal.

What I've tried

1. 'startTabBasedApp' call within the modal. The issue is that the experience feels like a hack.
2. 'startTabBasedApp' call instead of using modal. The issue is that navigation state is lost when trying to go back to the old application.
3. Starting ReactNavigation (JS solution) within the modal. This by far works/looks the best, and I was able to preserve state and some performance by passing navigator as a prop. The only caveat is that I will have to consolidate UX/UI differences between ReactNavigation and RNN which can be jarring at times.

Any help is appreciated. Also if this feature requires a pull request I would be willing to investigate it and submit, any direction on this would also be appreciated.

Native apps with similar requirements.

1. Beam reddit client

Root | Modal
------------ | -------------
|

---

Environment

• React Native Navigation version: 1.1.165
• React Native version: 0.46
• Platform(s) (iOS, Android, or both?): Both

[guyca]

Hey
We differentiate between two types of tabbed navigation. BottomTabs are used as main navigation, while TopTabs are used a secondary navigation.
BottomTabs (main form of navigation) are used only in the application's main screen.
TopTabs can be used any where. We officially support TopTabs on Android, but on iOS you can use this

RNN doesn't support the use case you've described. This navigation solution seems very complex and I'd advise against it. You can implement the second BottomTabs in JSX.

[brunolemos]

@joshuaflores what's this A-to-Z component you are using? Looks native

[joshuaflores]

@brunolemos the screenshots are from beam reddit client, so yes they're native.

[brunolemos]

@joshuaflores oh, didn't notice the title. thanks

[guyca]

Should be supported in v2 already.