Nativebase: this2.props.openDrawer is not a function(Drawer)

Created on 23 Dec 2017 · 6Comments · Source: GeekyAnts/NativeBase

I am running sample drawer example.
But i am getting error like this: this2.props.openDrawer is not a function. Please give me any suggestion. Thank you.
sideBar.js file:

import React, { Component } from 'react';
import {
  Text,
} from 'react-native';

import styles from './styles';
import {Content} from 'native-base';

export default class Sidebar extends Component {
  render() {
    return (
          <Content style={{backgroundColor:'#FFFFFF'}}>
            <Text>Drawer</Text>
          </Content>
    );
  }
}

module.exports = Sidebar;

Main.js file:

import React, { Component } from 'react';
import {
  AppRegistry,
  Text
} from 'react-native';

import {Drawer} from 'native-base';

import AppHeader from './appHeader';
import AppBody from './appBody';
import AppFooter from './appFooter';

import Sidebar from './sidebar';

export default class Main extends Component {
  closeDrawer = () => {
    this.drawer._root.close()
  };
  openDrawer = () => {
    this.drawer._root.open()
  };
  render() {
    return (
              <Drawer
                ref={(ref) => { this.drawer = ref; }}
                content={<Sidebar/>}
                onClose={() => this.closeDrawer()} >

                <AppHeader
                    openDrawer={this.openDrawer.bind(this)}
                />
                <AppBody/>
                </Drawer>
    );
  }
}

module.exports = Main;

AppHeader.js file:

import React, { Component } from 'react';
import {
  Text,
} from 'react-native';

import {Header,Left,Button,Icon,Right,Body,Title} from 'native-base';

export default class AppHeader extends Component {
  render() {
    return (
      <Header>
       <Left>
       <Button transparent
              onPress={()=>this.props.openDrawer()}
       >
         <Icon name='menu' />
       </Button>
       </Left>
       <Body>
         <Title>SDCC Wallet</Title>
       </Body>
       <Right>
         <Button transparent>
           <Icon name='bulb' />
         </Button>
       </Right>
     </Header>
    );
  }
}

module.exports = AppHeader;

Here is my screenshot:
screen shot 2017-12-23 at 4 22 45 pm

awaiting response

Source

harikanammi

Most helpful comment

You should use onPress={ () =>this.props.navigation.openDrawer() instead of onPress={()=>this.props.openDrawer()} this way working for me

atultiwari1996 on 3 Oct 2018

👎4 👀1 🚀1 ❤1 😕1 🎉1 😄1 👍1

All 6 comments

@harikanammi tried your code. It was working fine for me. Attaching a Gif

Gif

drawer

akhil-geekyants on 27 Dec 2017

👎3

Closing the issue due to no response

akhil-geekyants on 5 Jan 2018

You should use onPress={ () =>this.props.navigation.openDrawer() instead of onPress={()=>this.props.openDrawer()} this way working for me

atultiwari1996 on 3 Oct 2018

👎4 👀1 🚀1 ❤1 😕1 🎉1 😄1 👍1

@atultiwari1996 Hi,
I am trying to access the Drawer using onPress: () => this.props.navigation.navigate.openDrawer().
I'm facing the same error..

minulmindula on 14 Mar 2019

I got a similar error and I think my solution might help you a little. The navigation prop is being injected by the React Navigation library; or at least that's what happens in the NativeBase examples. The openDrawer function will only be provided if you use createDrawerNavigator when you define your routes (instead of createStackNavigator for example). See here an example.