CODEWITHSUNDEEP
javascriptreact-native
developer
developer

Reputation: 229

react-native: undefined is not an object (evaluating '_this2.props.navigation') with react navigation

I just started developing in react native and i'm experiencing an error, i've included Drawer navigation in my app and when its tapped in the content view, the side menu bar opens up but when its tapped on there 

<TouchableOpacity onPress={() =>this.props.navigation.toggleDrawer()}
                 style={{padding:10}}>
             <Icon  size={27} name='ios-menu' color='#fff' />
             </TouchableOpacity>

it throws an error.

undefined is not an object (evaluating '_this2.props.navigation')

below is my script

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TouchableOpacity} from 'react-native';
import {Container, 
        Header, 
        Content, 
        List, 
        ListItem, 
        Left, 
        Icon, 
        Body,
        Title,
        Right} from 'native-base';

class HomeScreen extends Component{


    static navigationOptions = {
        title: 'Home',
        headerStyle: {
          backgroundColor: '#28608c',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
        headerLeft:(
          <TouchableOpacity onPress={() =>this.props.navigation.toggleDrawer()}
             style={{padding:10}}>
         <Icon  size={27} name='ios-menu' color='#fff' />
         </TouchableOpacity>

        ),
        headerRight:(
          <TouchableOpacity style={{padding:10}}>
           <Icon size={27}  name='search' color='#fff' />
          </TouchableOpacity>

        )
      };
  render() {
    return (
        <Container>
        <Content contentContainerStyle={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center'
        }}>
        <Text onPress={() =>this.props.navigation.toggleDrawer()}>HomeScreen</Text>
        </Content>
      </Container>
    );
  }
}

export default HomeScreen;

Upvotes: 1

Views: 170

Answers (1)

Eugene Pawlik
Eugene Pawlik

Reputation: 1190

From the react-navigation documentation:

It might be tempting to try to use this.props inside of navigationOptions, but because it is a static property of the component, this does not refer to an instance of the component and therefore no props are available. Instead, if we make navigationOptions a function then React Navigation will call it with an object containing { navigation, navigationOptions, screenProps }

So, you need to change your navigationOptions to look like the following:

static navigationOptions = ({ navigation }) => {
    return {
        // snip...

        headerLeft:(
          <TouchableOpacity onPress={() => navigation.toggleDrawer()} // remove "this.props" here
             style={{padding:10}}>
             <Icon  size={27} name='ios-menu' color='#fff' />
         </TouchableOpacity>
        ),

        // snip...
      };
  };

Upvotes: 1

Related Questions