React native this.props.navigation.navigate undefined

Question

navigation.js

       import React,{ Component} from 'react'
import { createStackNavigator,createAppContainer } from 'react-navigation'
import  Login  from './screens/login'
import  SplashScreen  from './screens/splashScreen'

// export const Nav = createStackNavigator({
//     splashScreen: {  screen: SplashScreen  },
//     loginScreen: {  screen:Login  },
// },{ initialRouteName: 'splashScreen' })

// export default createAppContainer(Nav);

const Nav = createStackNavigator({
    loginScreen: { screen: Login },
     splashScreen: {screen: SplashScreen},
    { 
        initialRouteName: 'splashScreen',
    }
})
export default createAppContainer(Nav);

splashscreen.js

 import React, { Component } from "react";
 import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { appContainer  } from '../styleSheet'
import { Nav }  from  '../navigations'
import { createStackNavigator,createAppContainer } from 'react-navigation'

class SplashScreen extends Component {

componentWillMount(){
    setTimeout(() => {
       // alert('I will redirect')
        this.props.navigation.navigate("loginScreen");
    }, 3000);
}

    render() {
        return (
            <View style={appContainer.AppContainer}>
               <Text style={appContainer.splashSC}> Who Around Me  </Text>
            </View>
        )
    }
}

 export default SplashScreen

login.js

import React, { Component } from "react";
import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { appContainer,buttons } from '../styleSheet'

class Login extends Component {
    render() {
        return (
                <View style={appContainer.AppContainer}>

                    <Text style={buttons.loginBtnText}>
                        Login with Sim
                    </Text>
                </View>
        )
    }
}
export default Login

App.js

  /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import  SplashScreen  from './screens/splashScreen'
import { createStackNavigator,createAppContainer } from 'react-navigation'
import  Login  from './screens/login'
import { Nav }  from  './navigations'

const App = () => (
  <Nav  />
);

export default App;

index.android.js

import React, { Component } from "react";
 import { AppRegistry } from "react-native";
import { createStackNavigator,createAppContainer } from 'react-navigation'
import App from "./src/App";

 AppRegistry.registerComponent("WhoAroundMe", () => App);

this.props.navigation.navigate("loginScreen"); throws error

this.props.navigation.navigate undefined

Could not able to resolve by doing alot google.

Any help appreciated. Thanks

Answer 1

I can't clearly understand the problem well, but you can try adding SplashScreen in createStackNavigator() in navigation.js file

const StackNavigator = createStackNavigator({
    loginScreen: { screen: Login },
    splashScreen: {screen: SplashScreen},
    { 
        initialRouteName: 'splashScreen',
    }
})
export default createAppContainer(StackNavigator);

In your App.js file replace with this:

const App = () => (
  <Nav />  //instead of SplashScreen
);

Answer 2

It is because your SplashScreen Component is not declared as a route in react-navigation. when you create route, you can put SplashScreen as route and set it as initial route name.

 export const Nav = createStackNavigator( { splashScreen: { screen: SplashScreen }, loginScreen: { screen:Login } }, { initialRouteName: 'splashScreen' } ) 

Answer 3

Pass the {...props} when calling SplashScreen component

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import  SplashScreen  from './screens/splashScreen'
import { createStackNavigator,createAppContainer } from 'react-navigation'
import  Login  from './screens/login'
import { Nav }  from  './navigations'

const App = () => (
  <SplashScreen {...props} />
);

export default App;

Answer 4

Try to implement this

App.js

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
import SplashScreen from "./splashScreen";
import { createStackNavigator, createAppContainer } from "react-navigation";
import Nav from "./navigations";<----changes-----

export default class App extends Component {
  render() {
    return (
      <Nav />
    );
  }
}

Nav.js

import React, { Component } from "react";
import { createStackNavigator, createAppContainer } from "react-navigation";
import Login from "./login";
import SplashScreen from "./splashScreen";

//<------replace your code from here
const Nav = createStackNavigator(
  {
    loginScreen: { screen: Login },
    splashScreen: { screen: SplashScreen }
  },
  {
    initialRouteName: "splashScreen"
  }
);
export default createAppContainer(Nav);

Answer 5

The main issue was I was importing navigations.js in screen files.

Thanks all for your valuable comments I learned lots of things from you brothers