React-native-navigation: [V2] sidemenu cannot overlay on content

[archived-prf1le]

Hi,
I have sidemenu with bottomtabs. when drawer right or left is visible, it pushes margin left or right to whole content. I want sidemenu open overlay content.

  Navigation.events().registerAppLaunchedListener(() => {
        Navigation.setDefaultOptions({
            statusBar: {
                visible: false,
                drawBehind: true,
            },
            topBar: {
                visible: false,
                drawBehind: true,
                animate: false,
            },
            bottomTabs: {
                titleDisplayMode: "alwaysHide",
            },
        });
        Navigation.setRoot({
            root: {
                sideMenu: {
                    center: {
                        bottomTabs: {
                            id: "bottomTab",
                            children: [
                                {
                                    stack: {
                                        children: [
                                            {
                                                component: {
                                                    name: "navigation.profile.RegisterScreen",
                                                    passProps: {
                                                        text: "This is tab 1",
                                                    },
                                                },
                                            },
                                        ],
                                        options: {
                                            bottomTab: {
                                                icon: require("./assets/images/home.png"),
                                                testID: "FIRST_TAB_BAR_BUTTON",
                                            },
                                        },
                                    },
                                },
                                {
                                    component: {
                                        name: "navigation.profile.FormScreen",
                                        passProps: {
                                            text: "This is tab 2",
                                        },
                                        options: {
                                            bottomTab: {
                                                icon: require("./assets/images/search.png"),
                                                testID: "SECOND_TAB_BAR_BUTTON",
                                            },
                                        },
                                    },
                                },
                                {
                                    component: {
                                        name: "navigation.profile.CommentScreen",
                                        passProps: {
                                            text: "This is tab 2",
                                        },
                                        options: {
                                            bottomTab: {
                                                icon: require("./assets/images/jobs.png"),
                                                testID: "SECOND_TAB_BAR_BUTTON",
                                            },
                                        },
                                    },
                                },
                                {
                                    component: {
                                        name: "navigation.profile.NotificationScreen",
                                        passProps: {
                                            text: "This is tab 2",
                                        },
                                        options: {
                                            bottomTab: {
                                                icon: require("./assets/images/notifications.png"),
                                                testID: "SECOND_TAB_BAR_BUTTON",
                                            },
                                        },
                                    },
                                },
                                {
                                    component: {
                                        name: "navigation.profile.ProfileScreen",
                                        passProps: {
                                            text: "This is tab 2",
                                        },
                                        options: {
                                            bottomTab: {
                                                icon: require("./assets/images/menu.png"),
                                                testID: "SECOND_TAB_BAR_BUTTON",
                                            },
                                        },
                                    },
                                },
                            ],
                        },
                    }
                }

            },
        });
    });

---

Environment

• React Native Navigation version: 2.0.2538
• React Native version: 0.56.0
• Platform(s) (iOS, Android, or both?): IOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator/Iphone 6 ios 11.3

[mammad2c]

+1

[anonrig]

+1

[svenjens]

+1

[sergiulucaci]

+1

@guyca, when you said that this is supported in v2 you referred to Android only?

Because on iOS (v2.0.2586) the whole component is pushed to left/right.

[kyledmellander]

Pretty frustrating when looking at feature parity between V1 and V2 as there is no indication that the drawer/sideMenu functionality is so far out of sync. Halfway through moving over to V2 and discovered this.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[anonrig]

This issue still exists

[sure2win]

Yes the same issue(with v2.0.2569) on IOS, the whole component is pushed to left/right. Any help or resolution in pipeline?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[anonrig]

I hate this bot.

[FinHead]

We'd also like to have this updated for iOS.
Thanks

[lukebrandonfarrell]

Hey everyone, (@sure2win, @FinHead, @kyledmellander, @anonrig, @sergiulucaci, @Profileir)

Guyca says "This is what's currently available and we have no plans or intentions to develop additional features. That being said, PR's are always welcome." in relation to the side menu feature.

That being said, I've build an implementation for a drawer, which uses showOverlay under the hood but provides a simple API for styling and animating the drawer inline with how other RNN features work.

Check it out:
https://github.com/lukebrandonfarrell/react-native-navigation-drawer-extension

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.