Ufdjrw

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

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
);

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'
 
)

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;

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);

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