CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation
Adnan Ali
Adnan Ali

Reputation: 2960

Route should declare a screen. [ React Native Navigation Error]

Hi I am new to react native and I am facing strange issue with routing. I am doing something wrong but 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 fine if we remove route Landing. But when we add this route we get error.

Route 'Landing' should declare a screen. For example ......

Upvotes: 2

Views: 1423

Answers (2)

Dusk
Dusk

Reputation: 1897

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

your import statement is like this:

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

replace it with line below (without curly brackets):

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

it should solve the problem.

BUT you will probably get a new error as @Medet pointed out because you have to change this line:

navigate('LandingScreen')

to: 

navigate('Landing')

since your screen name is Landing.

Upvotes: 5

Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11940

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

Upvotes: 1

Related Questions