Nesting Navigators with React Navigators - "Home" should declare a screen

Question

I am currently working with React Native and the new React Navigation. There I try to follow the tutorial on nesting navigators , but there is always an error:

Route 'Home' should declare a screen. For example: import MyScreen from './MyScreen'; ... Home: { screen: MyScreen, } 

I'm not sure what I'm doing wrong. When I launch the navigators separately, they work. But, unfortunately, are not combined.

This is the App.js I created using the tutorial:

 import React from 'react'; import { AppRegistry, Text, View, Button } from 'react-native'; import { StackNavigator, TabNavigator } from 'react-navigation'; class HomeScreen extends React.Component { static navigationOptions = { title: 'Welcome', }; render() { const { navigate } = this.props.navigation; return <View> <Text>Hello!</Text> <Button onPress={() => this.props.navigation.navigate('Chat', { user: 'Daniel' })} title="ReactNavigation Test" /> </View>; } } class ChatScreen extends React.Component { static navigationOptions = { title: 'ReactNavigation Test', }; render() { const { params } = this.props.navigation.state; return ( <View> <Text>Neue Seite für den Navigator. Hallo {params.user}!</Text> </View> ); } } class RecentChatsScreen extends React.Component { render() { return <Text>List of recent chats</Text> } } class AllContactsScreen extends React.Component { render() { return <Text>List of all contacts</Text> } } const ReactNativeTest = StackNavigator({ Home: { screen: MainScreenNavigator }, Chat: { screen: ChatScreen }, }); const MainScreenNavigator = TabNavigator({ Recent: { screen: RecentChatsScreen }, All: { screen: AllContactsScreen }, }); AppRegistry.registerComponent('ReactNativeTest', () => ReactNativeTest); 

Maybe you can help me. I asked the same question here , but maybe this is the best place for the question.

Thanks in advance!

Answer 1

I made this mistake when I started too ...

Put MainScreenNavigator above ReactNativeTest .

As you do now, MainScreenNavigator does not exist when it calls.

 const MainScreenNavigator = TabNavigator({ Recent: { screen: RecentChatsScreen }, All: { screen: AllContactsScreen }, }); const ReactNativeTest = StackNavigator({ Home: { screen: MainScreenNavigator }, Chat: { screen: ChatScreen }, });