undefined is not an object (evaluating '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