0

I am new in world of react native and i want to show side menu from left in my application and i am using react-native-navigation to do so but i am facing sum problem with this

firstly i set the navigation root like below :-

Navigation.setRoot({
        root: {

            bottomTabs: {
                children: [
                    {
                        stack: {
                            children: [
                                {
                                    component: {
                                        name: "FindPlace",
                                        options: {
                                            bottomTab: {
                                                text: "find place",
                                                icon: response[0],
                                            },
                                            topBar: {
                                                title: {
                                                    text: "find place"
                                                },
                                                leftButtons: [
                                                    {
                                                        icon: response[2],
                                                        id: 'leftSideDrawer',
                                                    },
                                                ],
                                            }
                                        }
                                    }
                                }
                            ]
                        }
                    },

                ],
            },
            sideMenu: {
                left: {
                    component: {
                        name: 'SideDrawer',
                        id: 'leftSideDrawer'
                    }
                },

            },

        }
    })

where i declare both bottomTabs and sideMenu and i add a button which trigger event on findPlace component where i add an Navigation.event() listner that toggle visiblity of my left sideMenu like below :-

 constructor(props) {
    super(props);
    Navigation.events().bindComponent(this)
}

navigationButtonPressed({ buttonId }) {

    Navigation.mergeOptions('leftSideDrawer', {
        sideMenu: {
          left: {
            visible: true
          }
        }
  });


}

but this is not working at all and it just show an blank screnn and if iremove the sideMenu section from setRoot it will show me the bottomTabs and when i add sideMenu again it show me a blank scrennd.

there is no examples regariding this on RNN version 2 docs i search alot by i didn't find anything that help me with this so please let me know what i am doing wrong so i can get out of this stuff

thanks in advance !!

Ali Asgher Badshah
  • 811
  • 1
  • 11
  • 34

1 Answers1

1

It works by putting the bottomTabs inside the sideMenu which is at the root of the hierachy. Also the sideMenu has a center field which is required. The docs says:

center is required and contains the main application, which requires to have a topBar aka stack.

The code must be implemented like the following:

Navigation.setRoot({
    root: {
        sideMenu: {
            left: {
                component: {
                    id: "leftSideDrawer",
                    name: "SideDrawer"
                }
            },
            center: {
                bottomTabs: {
                    children: [
                        {
                            component: {
                                name: "FindPlace",
                                options: {
                                    bottomTab: {
                                        text: "find place",
                                        icon: response[0]
                                    },
                                    topBar: {
                                            title: {
                                            text: "find place"
                                        },
                                        leftButtons: [
                                            {
                                                icon: response[2],
                                                id: "leftSideDrawer",
                                            },
                                        ],
                                    }
                                }

                            }
                        }

                    ],
                }
            }

        }
    }
});

Use this structure to make it works. Please, notice that if you need to push other screens then you need to use a stack.

bitsmanent
  • 154
  • 1
  • 10