Off topic: ERROR TypeError: undefined is not an object (evaluating '_this.props.navigation.navigate')

Question

[shalinikaushik1293]

I want to go to the homepage after splash screen. but I am getting the error

 ERROR    TypeError: undefined is not an object (evaluating '_this.props.navigation.navigate')

My splash screen code is :

import React, {Component} from 'react';
import {View, StyleSheet, ImageBackground, Image} from 'react-native';


var logo=require('./sg.png');
export default class Splash extends Component
{
        constructor(props)
        {
            super(props);
            setTimeout(()=>
            {
                this.props.navigation.navigate('home');
            }, 3000);

        }
        render()
        {
        return(
            <ImageBackground
                style={{backgroundColor: '#F8BBD0', height:'100%', width:'100%'}}>
                <View
                style={{flex:1, justifyContent:'center', alignItems:'center'}}>
                    <Image source={logo}
                    style={{height:300, width:300}}></Image>
                </View>
            </ImageBackground>

        );
    }
}

and my app.js is :

> import React,{Component} from 'react';
> 
> import {createAppContainer} from 'react-navigation'; import
> {createStackNavigator} from 'react-navigation-stack';
> 
> import splash from './splash'; import home from './home_screen';
> import sign from './Signin';  
> 
> const App=createStackNavigator(   {
>     splash : {screen:splash},
>     home : {screen:home, navigationOptions:{header:null}},
>     sign : {screen:sign, navigationOptions:{header:null}},
>        } ); export default createAppContainer(App);

and my home screen is

>

 import React,{Component} from 'react'; 
> import {View, Text, Button, StyleSheet, TouchableOpacity,} from 'react-native';
> 
> export default class home_screen extends Component {  
> button_func=()=>  // arrow function for button functioning   {
>     //alert("welcome to SwasthGarbh")
>     this.props.navigation.navigate('sign');   }   render()   {
>     return(
>       
>       <View
>         style={{
>           backgroundColor : '#F8BBD0',
>           position : 'absolute',
>           top : 0, left: 0,
>           right : 0, bottom : 0,
>           justifyContent: 'center',
>           alignItems: 'center'
>         }}>
> 
>         <Text style={{ 
>           fontSize: 35,
>           color: 'white'
>         }} > SwasthGarbh </Text>
> 
>           <Button 
>           title= "Sign In" onPress={this.button_func}
>           color="red">
>           </Button>
>         
>   
>         <Text style={{
>           fontStyle: 'italic',
>           marginTop: 15
>         }} > ANC Assist </Text>
> 
>         <Text style={{
>           color: 'grey',
>           marginTop: 10,
>         }} > or Register as </Text>
> 
>         </View>
>     );   } }

I am stuck with the error. Kindly help me to resolve it. I will be grateful.