React Native: Cannot read property 'navigation' of undefined

Question

I am trying to make an onPress function such that when the menu icon is clicked, my drawer navigation will open. However, I am getting this error: Unhandled JS Exception: Cannot read property 'navigation' of undefined.

Here's my code for HeaderComponent.js

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

const HeaderComponent = (props) => {
const { menuIconStyle } = styles;

return (
    <Header>
        <Left>
            <Icon
                style={menuIconStyle}
                name="menu"
                onPress={() => this.props.navigation.openDrawer()}
            />
        </Left>
        <Body>
            <Title>{props.headerText}</Title>
        </Body>
        <Right>

        </Right>
    </Header>
);
}

export default HeaderComponent;

const styles = StyleSheet.create({
menuIconStyle: {
    paddingLeft: 15,
},
});

Would appreciate a solution. Thanks!

Seem like the parameter is undefined. How do you render this component? — nikos fotiadis, Dec 11 '18 at 03:14
@nikosfotiadis I imported it into HomeScreen.js and rendered it there like this — user7381027, Dec 11 '18 at 03:19
@user7381027 I assume `HomeScreen` has `navigation` in props. If that is the case, you need to pass `navigation` to HeaderComponent too: `` — blaz, Dec 11 '18 at 03:23

score 1 · Answer 1 · answered Dec 11 '18 at 05:52

1

You should pass navigation props from parent to child,like this:

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

then you can use navigation in your child component

answered Dec 11 '18 at 05:52

Reza Madani

354
1
5

score 0 · Answer 2 · answered Dec 11 '18 at 06:04

0

Your component is not a ES6 class but a function. So, you cannot use this.props because it doesn't exist.

onPress={() => props.navigation.openDrawer()}

use this instead.

answered Dec 11 '18 at 06:04

Krishna Chaitanya Kornepati

701
4
12

React Native: Cannot read property 'navigation' of undefined

2 Answers2