[Lack of Docs:- Easy Example] Can someone please help me with side-menu (drawer)?

[themakerman]

This is what my Router looks like now. I am really struggling with the docs. I have implemented my own toolbar using views which has hamburger icon. The toolbar is at mainscreen.

Due to lack of Documentation i am really struggling to use navDrawer in my code. The app is in production so i feel very reluctant to make changes to the code as it can break it if i don't use it correctly. Debugging again will be a pain.

This is how my file with Router component looks like.

<Router getSceneStyle={() => ({ backgroundColor: 'transparent' })}>
                  <Scene key="root">
                    <Scene key="splash" component={SplashScreen} hideNavBar initial />
                    <Scene key="mainscreen" component={MainScreen} type="reset" hideNavBar />
                    <Scene key="settingsScreen" component={SettingsScreen} hideNavBar />
                  </Scene>
                </Router>

What should i do so that on my component={MainScreen} i can trigger the navDrawer on <TouchableOpacity onPress={ () => ?} />. Hamburger icon is nested inside TouchableOpacity component.

Would really be grateful if someone can help me out on this.

[aksonov]

Have you tried Example project from this repo?

[mkayswork]

@themakerman you could call the drawer via Actions.drawerOpen(). @aksonov within the example there is nothing about to read or see about the drawer.

[themakerman]

@mkayswork Yes but i am more like confused towards defining the view itself. Where should i define it as a component? Should it be nested inside ....... ?

[mkayswork]

You mean the view that should be displayed as drawer a.k.a. side menu? You could define a Scene which contains the drawer like so ( version 4 of this project, not version 3):

<Scene key='drawer' drawer contentComponent={YourSideMenu} hideNavBar> </Scene>

And within this tag you nest in the the views which should access the side menu. Let's assume you have a view which contains a button on the left side of the navBar:

<Scene key='sampleView' onLeft={() => this.openSideMenu()} leftButtonImage={require('your image source'}/>
Somewhere inside your component's class you have this function
openSideMenu() { Actions.drawerOpen() }

Hope this helps you.

[themakerman]

@mkayswork Great. Thank you so much :). Gonna try it tonight.