The route should announce the screen. [Real navigation error]

Question

Hi, I'm new to reacting to my native language, and I ran into a problem with routing. I'm doing something wrong, but I need someone to guide me.

index.android.js

import { LandingScreen } from './src/components/landing_screen.js' import HomeScreen from './src/app_component.js' import { StackNavigator } from 'react-navigation'; const SimpleApp = StackNavigator({ Home: { screen: HomeScreen }, Landing: { screen: LandingScreen}, }); AppRegistry.registerComponent('HomeScreen', () => SimpleApp); 

app_component.js

 // Other imports ... export default class HomeScreen extends Component { static navigationOptions = { title: 'Home Screen', }; render() { const { navigate } = this.props.navigation; return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> Hello CHannoo!!!</Text> <Text style={styles.instructions}> To get started, edit index.android.js </Text> <Text style={styles.instructions}> Double tap R on your keyboard to reload,{'\n'} Shake or press menu button for dev menu </Text> <Button title="Go to 2nd Page" onPress={() => // alert('hello'); navigate('LandingScreen') // navigate('Home', { name: 'Jane' }) } /> </View> ); } componentDidMount () { SplashScreen.close({ animationType: SplashScreen.animationType.scale, duration: 850, delay: 500, }) } } 

landing_screen.js

 export default class LandingScreen extends Component { static navigationOptions = { title: 'Landing Screen Title', }; render() { return (........) } 

It works great if we remove the Landing route. But when we add this route, we get an error.

The "Landing" route should announce the screen. For instance...

Answer 1

Your LandingScreen has been exported as default , but you imported it by name.

your import statement is as follows:

 import { LandingScreen } from './src/components/landing_screen.js' 

replace it with the line below (without curly braces):

 import LandingScreen from './src/components/landing_screen.js' 

he must solve the problem.

BUT you are likely to get a new error, as @Medet noted, because you need to change this line:

 navigate('LandingScreen') 

to:

 navigate('Landing') 

since your screen name is Landing.

Answer 2

You call navigate('LandingScreen')
But the screen name is Landing
+ @Dusk answer should solve