sideMenu is not working in react-native-navigation version 2? - reactjs

Question

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 !!

Answer 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.