React-native-navigation: [V2] Ability to add a stack to an overlay

[steve228uk]

Issue Description

Currently it's only possible to present a single component as an overlay on RNN v2. It would be great to be able to include a navigation stack within the overlay. This would make non-fullscreen modals easy to implement.

This is certainly possible natively on iOS but I'm not 100% it's viable on Android yet.

Steps to Reproduce / Code Snippets / Screenshots

Current:

Navigation.showOverlay({
    component: {
        name: componentName,
        passProps: passProps,
        options: options
    }
});

Proposed:

Navigation.showOverlay({
    stack: {
        children: [{
            component: {
                name: componentName,
                passProps: passProps,
                options: options
            }
        }]
    }
});

This replicates the existing modal API.

---

Environment

• React Native Navigation version: 2.0.2521
• React Native version: 0.56.0
• Platform(s) (iOS, Android, or both?): Both
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator + Debug

[guyca]

Overlay doesn't make any assumptions on the layout - this should be possible. Have you confirmed it doesn't indeed work on both platforms?

[steve228uk]

@guyca It looks like it sorta works on Android but the top bar remains and is not within the section and on iOS it throws an error.

[yogevbd]

Solved for iOS here #3962

[steve228uk]

@yogevbd It looks like these changes have since been reverted. WIll they be coming back in a future release?

[steve228uk]

I believe this is now fixed, are you able to confirm @yogevbd @guyca

[steve228uk]

While I can add a stack to the overlay it doesn't seem possible to dismiss with Navigation.dismissOverlay(this.props.componentId);

[guyca]

@steve228uk Would be cool if you add an e2e, to confirm this is indeed fixed, to ComplexLayout.js.
If dismissing the overlay doesn't work - then please add a failing e2e and we'll address this ASAP.

[steve228uk]

Thanks @guyca, I'll look to get this done asap.

[steve228uk]

Apologies for the delay @guyca! I can confirm that this is indeed fixed on iOS. On Android when attempting to push a new screen it fails. I will attempt to provide an e2e.

[ericketts]

@steve228uk did you ever get anywhere with providing an e2e for ios failure? I have a use case that requires a stack nested within an overlay, I could take a stab at implementing but don't want to duplicate any work that might've already been done 🙂

[steve228uk]

@ericketts I haven't had time unfortunately and moved on to a different project so please do if you have time!