This is a test version of Biostars. For the public version, visit https://www.biostars.org.
ERROR TypeError: undefined is not an object (evaluating '_this.props.navigation.navigate')

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.

react-native navigation

Hello shalinikaushik1293!

We believe that this post does not fit the main topic of this site.

Out of scope for the forum

For this reason we have closed your question. This allows us to keep the site focused on the topics that the community can help with.

If you disagree please tell us why in a reply below, we'll be happy to talk about it.

Cheers!

0 answers

No answers yet.

Log in to answer this question.