undefined is not an object (evalating 'this.props.navigation.navigate') error in react native

Question

I read the some of the solutions related to this error, but didn't made use of that. Most of them are getting same error because of different reasons. I am kind of beginner to React-Native. So please help me out!

App.js

import loginScreen from './components/Login';
import React from 'react'
import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';
import homeScreen from "./HomeScreen";
import LoadingScreen from "./components/LoadingScreen";
import SignUpScreen from "./components/SignUpScreen";
import StarterScreen from "./components/starter";
import ShoppingCartIconScreen from './components/ShoppingCartIcon';
import SummeryScreen from './components/summery'

const MainNavigator=createStackNavigator(
    {
      signup:{screen:SignUpScreen},
      login:{screen:loginScreen},
      Loading: {screen: LoadingScreen },
      Summery:{screen:SummeryScreen}, //exporting the Summery component
      Starter:{screen:StarterScreen,
      navigationOptions:{
        title:'Starters',
        headerRight:<ShoppingCartIconScreen/>,//using as a icon on the navigation header.
        headerStyle:{
          backgroundColor:'#694fad'
        },
        headerTitleStyle:{
          color:'white'
        }
      }},
      Home: { screen: homeScreen,
      navigationOptions:{
        headerTitle:'Home',
        headerRight:<ShoppingCartIconScreen/>,
        headerStyle:{
          backgroundColor:'#694fad',
        },
        headerTitleStyle:{
          color:'white'
        }
      }}
      },
    {
      initialRouteName:"Home"  //set home as a default screen
    }
  );
  const App=createAppContainer(MainNavigator);
  export default App; //exporting App.js with stack navigator

ShoppingCartIcon.js

import React from 'react';
import {View,Text,StyleSheet,Platform} from 'react-native';
import Icon from '@expo/vector-icons/Ionicons'

//creating a constant
const ShoppingCartIcon = (props) => (
        <View style={[{ padding: 5 }, Platform.OS == 'android' ? styles.iconContainer : null]}>
        <View style={{
            position: 'absolute', height: 20, width: 20, borderRadius: 15, backgroundColor: '#e3e3e3', right: 6, bottom: 29, alignItems: 'center', justifyContent: 'center', zIndex: 2500,

        }}>
            <Text style={{ color: 'black', fontWeight: 'bold' }}>0</Text>
        </View>
        <View style={{top:3}}>
        <Icon onPress={()=>props.navigation.navigate("Summery")}  name="ios-cart" size={35} color='yellow' /> //navigate to summery screen on icon press
        </View>
    </View>
)

export default ShoppingCartIcon; //exporting shoppingcarticon

Summery.js //just a dummy file import React from 'react' import {View,Text,StyleSheet} from 'react-native'

//nothing special here
export default class summery extends React.Component {
    render() {
        return (
            <View style={styles.container}>
            <Text>summery page</Text>
            </View>
        )
    }
}

Answer 1

this.props.navigation is only available in Components that are directly assigned as screens in a navigator, such as the stack navigator generated by createStackNavigator .

If you want access to navigation outside of those Components, either directly pass the navigation prop (which I would not recommend), or follow this tutorial to navigate without the navigation prop: https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html

Answer 2

Well, I think your error is because you didn't add ShoppingCartIcon as part of your StackNavigator, for this reason, you cannot query navigator properties from props. What you can do is pass navigator properties of App through props of ShoppingCartIcon, I mean you should write something like this

// App.js
import LoginScreen from './components/Login';
import React from 'react'
import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';
import HomeScreen from "./HomeScreen";
import LoadingScreen from "./components/LoadingScreen";
import SignUpScreen from "./components/SignUpScreen";
import StarterScreen from "./components/starter";
import ShoppingCartIconScreen from './components/ShoppingCartIcon';
import SummeryScreen from './components/summery'

const MainNavigator=createStackNavigator(
    {
      Signup:SignUpScreen,
      Login:LoginScreen, //Name of components have to start with Uppercase Letter
      Loading: LoadingScreen,
      Summery: SummeryScreen, //exporting the Summery component
      Starter:StarterScreen,
      Home: HomeScreen,
    },
    {
      initialRouteName:"Home"  //set home as a default screen
    }
  );
  const AppContainer=createAppContainer(MainNavigator);
  class App extends React.Component{
      constructor(props){
          super(props)
      }
      render(){
          return(
            <AppContainer/>
          )
      }
  }
  export default App; //exporting App.js with stack navigator


  //ShoppingCartIcon.js
import React from 'react';
import {View,Text,StyleSheet,Platform} from 'react-native';
import Icon from '@expo/vector-icons/Ionicons'

//creating a constant
const ShoppingCartIcon = (navigation) => (
        <View style={[{ padding: 5 }, Platform.OS == 'android' ? styles.iconContainer : null]}>
        <View style={{
            position: 'absolute', height: 20, width: 20, borderRadius: 15, backgroundColor: '#e3e3e3', right: 6, bottom: 29, alignItems: 'center', justifyContent: 'center', zIndex: 2500,

        }}>
            <Text style={{ color: 'black', fontWeight: 'bold' }}>0</Text>
        </View>
        <View style={{top:3}}>
        <Icon onPress={()=> navigation.navigate("Summery")}  name="ios-cart" size={35} color='yellow' /> //navigate to summery screen on icon press
        </View>
    </View>
)

export default ShoppingCartIcon; //exporting shoppingcarticon

//Home.js or Starter.js
class Name extends React.Component{
    //Add this
    static navigationOptions = ({ navigation }) => { //Configuración de pantalla
        return {
            title:'Name',
            headerRight:(<ShoppingCartIconScreen navigation = {navigation}/>),//using as a icon on the navigation header.
            headerStyle:{
              backgroundColor:'#694fad'
            },
            headerTitleStyle:{
              color:'white'
            }
        };
      };
}

It´sa better approach to define navigationOptions for every single screen in this case. Just like I describe on the code above. Furthermore, I advise to use this approach to define react components:

class App extends React.Component{
      constructor(props){
          super(props)
      }
      //Some functions ...
      render(){ return(//.... what you want)}

I hope this helps you:)