I am trying to set up react-native-drawer with react-native-router-flux.
I have set up the Drawer as in the flux OTHER INFO doc as below
import React from 'react-native';
import Drawer from 'react-native-drawer';
import SideMenu from './SideMenu';
import {Actions, DefaultRenderer} from 'react-native-router-flux';
export default class NavigationDrawer extends Component {
render(){
const state = this.props.navigationState;
const children = state.children;
return (
<Drawer
ref="navigation"
open={state.open}
onOpen={()=>Actions.refresh({key:state.key, open: true})}
onClose={()=>Actions.refresh({key:state.key, open: false})}
type="displace"
content={<SideMenu />}
tapToClose={true}
openDrawerOffset={0.2}
panCloseMask={0.2}
negotiatePan={true}
tweenHandler={(ratio) => ({
main: { opacity:Math.max(0.54,1-ratio) }
})}>
<DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
</Drawer>
);
}
}
Then I put the drawer scenes inside Router component as below
render() {
return (
<Router>
<Scene key="choice" component={ServiceChoice} title="" hideNavBar />
// some scenes go here
<Scene key="drawer" component={NavigationDrawer} open={false} >
<Scene key="main" tabs={true} >
<Scene
key="map"
component={MapScreen}
title=""
hideNavBar
initial
/>
</Scene>
</Scene>
//some other scenes go here
</Router>
);
}
Now the problem is that from another component e.g. ServiceChoice, if I do Actions.map()
, nothing happens.
Can anyone pls point me to what i am doing wrong? I can provide any other information needed. All imports are also correct.
Thanks
So the solution i finally used was to have the Drawer component surround the Routes
I use Redux so the ref helps me to send a reference of the Drawer to an Action where I use it to update a state element/variable called appDrawer. Then I can control (open/close) the Drawer by
or
My application use case was better with the
tapToClose
option on the Drawer component instead of close() function though - that is usually more used in real life for closing side drawers though.