Native Base Drawer not working

Question

I tried to create drawer in my react native application. I've followed the example given but still not working for me to open drawer.

Below are my code :

 #drawer.js export default class TalentDrawer extends Component { closeDrawer = () => { this.drawer._root.close() }; openDrawer = () => { this.drawer._root.open() }; render() { return ( <Drawer ref={(ref) => { this.drawer = ref; }} content={<Sidebar/>} panOpenMask={0.80} onClose={this.closeDrawer.bind(this)} onOpen={this.openDrawer.bind(this)} captureGestures="open" side="right" > <Dashboard openDrawer={this.openDrawer.bind(this)}/> </Drawer> ); } }

 #dashboard.js export default class Dashboard extends Component { render() { return ( <View style={{flex:1, alignItems:'center', justifyContent: 'center'}}> <Button onPress={()=>this.props.openDrawer()}> <Text>Hello</Text> </Button> </View> ); } }

I also follow instruction given for issues Github and still cannot get this drawer working for me. Anyone experience same issues with me? The example given at native-base website are not showing fully working example.

Answer 1

Need some changes in your code,

Since dashboard.js does not deal with the state, we can change class to function.

drawer.js

 export default class TalentDrawer extends Component { closeDrawer = () => { this.drawer._root.close() }; openDrawer = () => { this.drawer._root.open() }; render() { return ( <Drawer ref={(ref) => { this.drawer = ref; }} content={<Sidebar/>} panOpenMask={0.80} onClose={this.closeDrawer} onOpen={this.openDrawe} captureGestures="open" side="right" > <Dashboard openDrawer={this.openDrawer}/> </Drawer> ); } }

dashboard.js

 const Dashboard = (props) => { return ( <View style={{flex:1, alignItems:'center', justifyContent: 'center'}}> <Button onPress={props.openDrawer}> <Text>Hello</Text> </Button> </View> ); } }

Answer 2

you should do

closeDrawer = () => {
  this.refs.drawer.close()
};
openDrawer = () => {
  this.refs.drawer.open()
};