CODEWITHSUNDEEP
react-native
Bob
Bob

Reputation: 133

How to fix undefind is not an object - 'this.navigation.openDrawer'

For some reason, there is an error when you click on the opening menu and it is unclear to me why it is happening.

"react-navigation": "^3.5.1"

This is for open my menu drawer with pressing.

```
import React, { Component } from 'react';
import { Text, View, Image } from 'react-native';
import { Avatar } from 'react-native-elements';
import { Left, Icon } from 'native-base';
import { DrawerActions } from 'react-navigation';


  class Header extends Component {
    render() {
      return (
        <View style={styles.viewStyle}>
          <Left>
            <Icon
              name='menu'
              style={styles.menu}
              onPress={() => this.props.navigation.openDrawer()}
            />
          </Left>

          <Text style={styles.textStyle}>Episodes</Text>
        </View>
      );
    }
  }

export default Header;
```


```

import React, { Component } from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { Right, Left, Icon } from 'native-base';
import EpisodeList from '../components/EpisodeList';
import Header from '../components/header';

class HomeScreen extends Component {
  static navigationOptions = {
    drawerIcon: ({ tintColor }) => (
      <Icon name='home' style={{ fontSize: 24, color: tintColor }} />
    )
  };
  render() {
    return (
      <View style={styles.container}>
        <Header />
        <View>
          <Image
            source={{
              uri:
                'https://images.pexels.com/photos/754082/pexels-photo-754082.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
            }}
            style={{ width: 400, height: 700, position: 'absolute' }}
          />

          <EpisodeList />
        </View>
      </View>
    );
  }
}

export default HomeScreen;

```

I expect the drawer will open when I press the menu button

the header is a component that i pass into another component that its activated from there .

Upvotes: 1

Views: 55

Answers (3)

Vijay Pratap Singh
Vijay Pratap Singh

Reputation: 11

Please try this, in your HomeScreen

<Header {...this.props}/>

Upvotes: 0

Jaydeep Galani
Jaydeep Galani

Reputation: 4961

You need to pass navigation prop to your child components to use this kind of functionality.

<Header  navigation={this.props.navigation} />

or in header file do this,

import {withNavigation} from "react-navigation";

....
...
...

export default withNavigation(Header);

Upvotes: 1

Jebin Benny
Jebin Benny

Reputation: 951

Did you try with the following?

this.props.navigation.dispatch(DrawerActions.openDrawer());

Don't forgot to import,

import { DrawerActions } from "react-navigation";

Upvotes: 0

Related Questions