Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 6 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

14reactions

atultiwari1996commented, Oct 3, 2018

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

4reactions

akhil-gacommented, Dec 27, 2017

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

Gif

drawer

Top Results From Across the Web

Why navigation.closeDrawer is not a function? - Stack Overflow

closeDrawer is not a function . So i try to console.log(this.props); ,i can see openDrawer and closeDrawer under navigation ...

Drawer navigation

This is documentation for React Navigation 2.x, which is no longer actively maintained. For up-to-date documentation, see the latest version (6.x).

navigation.opendrawer is not a function v3

_this.props.navigation.opendrawer is not a function. This problem is because the component that you're trying implement is not defined on stackNavigation, and ...

undefined is not a function (near '...(0,_reactNavigationStack ...

Coding example for the question TypeError: undefined is not a function (near '. ... import { createDrawerNavigator } from '@react-navigation/drawer';.

undefined is not an object (evaluating 'navigation.navigate')

You can pass it down from a parent which has the prop. function MyBooks(props) { ...