React-native-navigation: [v2] [Question/Feature] Push sidemenu root

[bogdan0083]

Issue Description

Hello guys! Thank you for this amazing stuff you do!

Is there a way to push sidemenu layout as a root? I have the following structure for the app:

1. Login page
2. If login is successful, navigate to SideMenu layout 
3. Otherwise show error

As you can see the steps are quite simple, but I can't seem to push SideMenu layout as a root. Navigation.setRoot works just fine, but I need the same push animation like Navigation.setStackRoot does. (when {animations: {setStackRoot: {enabled: true}}} is used).

Is there a way to achieve that? Would be cool if we'd have something like Navigation.pushSideMenuRoot. Thanks!

Environment

• React Native Navigation version: 2.11.0
• React Native version: 0.58.3
• Platform(s) (iOS, Android, or both?): both
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator IPhone 8.

[barclayd]

Hey @bogdan0083, I had a similar problem to you and solved it using the following code.

I had the default login screen (no side menus) call setDefaultSettings and welcomePageRoot.

After successful user login (handled by Redux using Sagas), I called setMainAppSettings and setMainApp which allowed, in this case, a side menu to be accessible from both left and right only after successfully logging in.

const setDefaultSettings = () => {
    Navigation.setDefaultOptions({
        topBar: {
            visible: false
        },
        statusBar: {
            style: "light"
        },
        sideMenu: {
            openGestureMode: 'bezel',
            left: {
                visible: false,
                enabled: false
            },
            right: {
                visible: false,
                enabled: false
            }
        }
    });
};

const setWelcomePageRoot = () => {
    Navigation.setRoot({
        root: {
            sideMenu: {
                left: {
                    component: {
                        name: screens.SideDrawer,
                        id: 'SideDrawer'
                    },
                },
                center: {
                    stack: {
                        options: {
                            topBar: {
                                visible: false
                            }
                        },
                        id: 'WelcomeScreen',
                        children: [
                            {
                                component: {
                                    name: screens.WelcomeScreen,
                                },
                            },
                        ],
                    },
                },
                right: {
                    component: {
                        name: screens.Settings,
                        id: 'Settings',
                    },
                },
            },
        }
    });
};

const setMainAppSettings = (image1, image2) => {
    Navigation.setDefaultOptions({
        sideMenu: {
            openGestureMode: 'bezel',
            left: {
                enabled: true,
                visible: true,
            },
            right: {
                visible: true,
                enabled: true,
                disableOpenGesture: false
            }
        },
        statusBar: {
            hideWithTopBar: false,
        },
        topBar: {
            leftButtons: [
                {
                    id: 'menuButton',
                    icon: image1,
                    color: colours.white
                }
            ],
            barStyle: 'black',
            rightButtons: [
                {
                    id: 'profileButton',
                    icon: image2,
                    color: colours.white
                }
            ]
        }
    });
};

const setMainApp = (componentId, barName) => {
    Navigation.setStackRoot(componentId, {
        component: {
            name: screens.ViewMenus,
            options: {
                animations: {
                    setStackRoot: {
                        enabled: true
                    }
                },
                topBar: {
                    visible: true,
                    title: {
                        text: barName ? barName : 'The Taff'
                    }
                }
            }
        }
    });
};

[bogdan0083]

@barclayd Wow, thank you very much for your solution! Nice and simple. I wish I had thought of it 😄

[barclayd]

@bogdan0083 No problem at all, I hope it helps with future projects 😊