Reputation: 4596
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
Upvotes: 0
Views: 1011
Reputation: 4596
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
Upvotes: 1
Reputation: 2065
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);
Upvotes: 1
Reputation: 1377
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;
Upvotes: 2
Reputation: 468
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
);
Upvotes: 3
Reputation: 1095
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'
}
)
Upvotes: 2