React Native — Nativebase drawer not open in my project

Question

i am working on react native nativebase drawer component in my application so i follow all steps as below

package.json

"dependencies": {
"@expo/vector-icons": "^6.2.2",
"native-base": "^2.3.7",
"react": "16.0.0",
"react-native": "0.51.0",
"react-native-device-info": "^0.13.0",
"react-native-router-flux": "^4.0.0-beta.28",
"react-navigation": "^1.0.0-beta.27"
},

Menuscreen.js

render(){

return(

  <Drawer
      ref={(comp) => {this.drawer = comp}}
      content={this.drawerContent()}
      type={'overlay'}
      panThreshold={0.30}
      panOpenMask={this.state.panOpenMask}
      onClose={() => this.closeDrawer()}
      >
      {this.setView(this.state.viewID)}

  </Drawer>
)
}

setView Method

setView(id) {
console.log("setView id;"+ id);
BackHandler.removeEventListener('hardwareBackPress', this._handleBackPressInDrawer);
switch (id){

  case 0:
    return(
      <HomeScreen drawer={this.drawer}/>
    )

  case 1:
    return(
      <ScreenOne drawer={this.drawer}/>
    )
  case 2:
    return(
      <ScreenTwo drawer={this.drawer}/>
    )
    case 3:
    return(
      <ScreenThree drawer={this.drawer}/>
    )
    case 4:
    return(
      <ScreenContacts drawer={this.drawer}/>
    )
  case 5:
    return(
      <ScreenNotes />
    )
    case 6:
    return(
      <FourScreen drawer={this.drawer}/>
    )
     break;
  default:

}
}

Homescreen.js

render() {

return (
  <Container>
    <Header style={{ alignItems:'center',paddingTop: 0, paddingBottom: 0 }}>
      <Left>
        <Button transparent onPress={()=>{this.props.drawer._root.open()}}>
          <Icon name='menu' />
        </Button>
      </Left>
      <Body style={{alignItems:'flex-start'}} >
        <Title>HOME</Title>
      </Body>
    </Header>

  </Container>

)
}

When I run above code and click on menu icon on the home screen I get an error message in homescreen.js like

Undefined is not an object (evaluating _this2.propsdrawer.root)

Any idea how can I solve this? your all suggestions are appreciable

Answer 1

render() {
var that = this;
return (
  <Container>
    <Header style={{ alignItems:'center',paddingTop: 0, paddingBottom: 0 }}>
      <Left>
        <Button transparent onPress={()=>{that.props.drawer._root.open()}}>
          <Icon name='menu' />
        </Button>
      </Left>
      <Body style={{alignItems:'flex-start'}} >
        <Title>HOME</Title>
      </Body>
    </Header>

  </Container>

)
}

If this doesn't works try using this.props.navigation.navigate("DrawerOpen"), if you have react-navigation implemented.

Answer 2

I solved my issue by below way

global.drawer =  null;

**SetView function**

setView(id) {
console.log(TAG + "setView id;"+ id);

switch (id){

  case 0:       
    return(
      <HomeScreen />          
    )

  case 1:
    return(
      <ScreenOne />
    )
  case 2:
    return(
      <ScreenTwo/>
    )
    case 3:
    return(
      <ScreenThree />
    )
    case 4:
    return(
      <ScreenContacts />
    )
  case 5:
    return(
      <ScreenNotes />
    )
    case 6:
    return(
      <FourScreen />
    )

  default:
  this.logout();

    }
  }


render(){

return(

  <Drawer

      ref={(ref) => { global.drawer = ref; }}
      content={this.drawerContent() }
      type={'overlay'}
      panThreshold={0.30}
      panOpenMask={this.state.panOpenMask}
      onClose={() => MenuScreen.closeDrawer()}
      >
      {this.setView(this.state.viewID)}
  </Drawer>
  )
 }

static closeDrawer = () => {
//this.drawer._root.close()
console.log(TAG + "-----closeDrawer------")
if(global.drawer != null){
  global.drawer._root.close()}
 };

static openDrawer = () => {
console.log(TAG + "-----openDrawer------")
//this.drawer._root.open()
if(global.drawer != null)
global.drawer._root.open()
};

In Homescreen.js

componentWillMount() {
   MenuScreen.closeDrawer()
 }

render() {
var that = this;
return (
  <Container>
    <Header style={Styles.header}>
      <Left style={Styles.headerLeftIcon}>
        <Button transparent onPress={()=>MenuScreen.openDrawer()}>
          <Icon name='menu' style={{color:'white'}} />
        </Button>
      </Left>
      <Body style={{flex:1,alignItems:'flex-start'}} >
        <Title style={Styles.headerTitle}>HOME</Title>
      </Body>
    </Header>
   </Container>

    )
 }

React Native — Nativebase drawer not open in my project

Question

2 answers

solution1
0 2018-01-30 08:39:24

solution2
0 2018-01-31 13:28:49

React Native — Nativebase drawer not open in my project

Question

2 answers

solution1 0 2018-01-30 08:39:24

solution2 0 2018-01-31 13:28:49

solution1
0 2018-01-30 08:39:24

solution2
0 2018-01-31 13:28:49