React Native Navigation v2 sideMenu not able to navigate to screen

Question

I'm trying to call Navigate.push from sideMenu but nothing happens.

Navigation.setRoot({
    root: {
      sideMenu: {
        left: {
          component: {
            name: 'app.SideMenu',
          },
          children: [
           {
             stack: {
             children: [
                {
                  component: {
                    name: TERMS_SCREEN.id,
                  }
                },
             ]
           }
        }
      ]
        },
        center: {
          bottomTabs: {
            id: 'BottomTabsId',
            options: {
              topbar: {
                visible: true,
              }
            },
            children: [
              {
                stack: {
                  id: 'Tabs',
                  children: [
                    {

..and I'm trying to push a screen in sideMenu like this

console.log(this.props.componentId);
Navigation.push(this.props.componentId, {
  component: {
    name: 'app.Terms',
  }
})

I am getting the log but nothing happens. I'm positive that I need to do something with my layout but I don't see an example or explanation in docs.

score 2 · Answer 1 · answered Sep 02 '18 at 08:57

There's something wrong with how you structure the components in the menu. The issue is that you must have a stack to be able to push other screens, and from what it looks - this is not the case for your side menu screen.

This is how you would set a left sideMenu component which is a stack; once you do that, you'll be able to push screens exactly as you did with Navigation.push(this.props.componentId...:

left: {
  stack: {
    children: [
      {
        component: {
          name: 'app.SideMenu',
        }
      }
    ]
  }
}

score 2 · Accepted Answer · answered Sep 27 '18 at 06:23

What I was doing wrong is actually because I'm passing the sidemenu componentId when in fact I need to pass the id of the current tab. Something like this.

    Navigation.push(`Tab${this.props.activeTabIndex + 1}`,{
        component: {
            name: Screens.ACCOUNTS,
        }
      }
    )

also sidemenu layout is this

root: {
  sideMenu: {
    id: 'SideMenu',
    left: {
      component: {
        id: 'SideMenu.left',
        name: Screens.SIDEMENU,
      }
    },

score 0 · Answer 3 · answered Mar 15 '19 at 13:23

while having children and stack in sidemenu object might be one solution. but you could do this as well. Consider following

Navigation.setRoot({
        root: {
            sideMenu: {
                left: {
                    id: "AppSideMenu",
                    component: {
                        id: "HomeScreenDrawer",
                        name: "YO.HomeScreen.Drawer",
                    },
                },
                center: {
                    stack: {
                        id: "AppHomeStack",
                        children: [
                            {
                                component: {
                                    id: "AppHomeScreen",
                                    name: "YO.HomeScreen",
                                    options: {
                                        topBar: {
                                            visible: false,
                                            drawBehind: true,
                                            height: 0,
                                        },
                                        statusBar: {
                                            style: "light",
                                        },
                                    },
                                },
                            },
                        ],
                    },
                },
            },
        },
    });

This way when you are going to push just call the ID of your main stack which lies under center{stack:{}} with ID of AppHomeStack

Now anywhere in the app, this will just do the trick

Navigation.push("AppHomeStack", {
    component: {
    name: "YO.UserScreen",
    },
});

React Native Navigation v2 sideMenu not able to navigate to screen

3 Answers3