The component for route 'AuthLogin' must be a React componet - react-native

Question

Hello am developing app in React-Native and got below error :
Error : The component for route 'AuthLogin' must be a React componet.
My Navigation flow is as below :
const AppStack = createStackNavigator(
{
Home: HomeScreen,
ImageDetails: ImageDetailsScreen,
},
{
initialRouteName: 'Home',
/* The header config from HomeScreen is now here */
navigationOptions: {
headerStyle: {
backgroundColor: '#000',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
});
const AuthTabStack =createTabNavigator(
{
AuthLogin : AuthStack,
InstaLogin: InstagramLoginScreen,
FacebookLogin: FacebookLoginScreen,
}
);
const AuthStack = createStackNavigator(
{
Login: LoginScreen,
Register: RegisterScreen,
},
{
initialRouteName: 'Login',
/* The header config from HomeScreen is now here */
navigationOptions: {
headerStyle: {
backgroundColor: '#000',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
});
const RootStack = createSwitchNavigator(
{
Splash: SplashScreen,//Checking user Authntication
App: AppStack,
Auth: AuthTabStack,
},
{
initialRouteName: 'Splash',
}
);
export default class App extends React.Component {
render() {
return <RootStack />;
}
}
The navigation starts from the RootStack. Contains Splash screen first.
Checking for user login in this screen and accordingly navigating user to either AppStack or AuthTabStack.
Why this error am I getting ?
Is there any issue with TabNavigator ?
Thanks.
EDIT :
==> This is working :
const AuthTabStack = createTabNavigator(
{
//AuthLogin: AuthStack,
Login: LoginScreen,
InstaLogin: InstagramLoginScreen,
FacebookLogin: FacebookLoginScreen
}
);
But, StackNavigator inside TabNavigator has an issue :
const AuthTabStack = createTabNavigator(
{
AuthLogin: AuthStack,
//Login: LoginScreen,
InstaLogin: InstagramLoginScreen,
FacebookLogin: FacebookLoginScreen
}
);
===================================================

Answer 1

You have a space after AuthLogin, AuthLogin : AuthStack, instead of AuthLogin: AuthStack,. This could be causing the error.
If this doesn't fix, try AuthLogin: { screen: AuthStack },