Tab based menu with side menu on one page

Question

I am trying to put both a tab-based menu and sidebar menu on one page for a react-native application. For now only one of them shows up, either a tab-based menu or a sidebar menu. Here is my navigation code. I have used wix react-native-navigation. The goal is to make both menus work on single screen. Kindly Help.

Navigation.setRoot({
  root: {
    bottomTabs: {
      id: 'BottomTabsId',
      children: [
        {
          component: {
            name: 'SignIn',
            options: {
              bottomTab: {
                fontSize: 12,
                text: 'Sign In',
                icon: require('./signin.png')
              }
            }
          },
        },
        {
          component: {
            name: 'SignUp',
            options: {
              bottomTab: {
                text: 'Sign Up',
                fontSize: 12,
                icon: require('./signup.png')
              }
            }
          },
        },
      ],
    },
    sideMenu: {
      left: {
        component: {
          name: 'reactNativeInit.SideDrawer',
          passProps: {
            side: 'left'
          }
        }
      },
      center: {
        stack: {
          id: "stack1",
          children: [
            {
              component: {
                name: 'reactNativeInit.main'
              }
            }
          ]
        }
      },
      leftButtons: [
        {
          id: 'sideMenu'
        }
      ]
    }
  }
});

Answer 1

In RNN bottomTabs and sideMenu are layouts , that can be combined together . So instead of using bottomTabs nav as main layout use sideMenu

Navigation.setRoot({
  root: {
    sideMenu: {
      left: {
        component: {
          name: 'reactNativeInit.SideDrawer',
          passProps: {
            side: 'left'
          }
        }
      },
      center: {
        stack: {
          id: "stack1",
          children: [
            {

              bottomTabs : {
                id: "bottomTabs",

                children: [
                  {
                    component: {
                      id: 0,
                      name: "navigation.DashboardScreen",
                      options: {
                        bottomTab: {
                          text: "Dashboard",
                          icon: require("../assets/icons/icon-check.png"),
                          iconColor: "#8b8b8b",
                          selectedIconColor: "rgb(35, 128, 187)"
                        }
                      }
                    }
                  },
                  {
                    component: {
                      id: 1,
                      name: "navigation.NotificationsScreen",
                      options: {
                        bottomTab: {
                          text: "Notifications",
                          icon: require("../assets/icons/icon-check.png"),
                          iconColor: "#8b8b8b",
                          selectedIconColor: "rgb(35, 128, 187)"
                        }
                      }
                    }
                  },
                  {
                    component: {
                      id: 2,
                      name: "navigation.MessagesScreen",
                      options: {
                        bottomTab: {
                          text: "Messages",
                          icon: require("../assets/icons/icon-check.png"),
                          iconColor: "#8b8b8b",
                          selectedIconColor: "rgb(35, 128, 187)"
                        }
                      }
                    }
                  },
                  {
                    component: {
                      id: 3,
                      name: "navigation.UsersScreen",
                      options: {
                        bottomTab: {
                          text: "Contacts",
                          icon: require("../assets/icons/icon-check.png"),
                          iconColor: "#8b8b8b",
                          selectedIconColor: "rgb(35, 128, 187)"
                        }
                      }
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    }
  }
});