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

Question

I am new to React Native and implementing react-navigation to understand this concept but getting error.
I searched for it through different links as The component for route 'Feed' must be a React component and I changed import and export according to the answer of this question but same error is still there. My code as below,
MainScreenNavigation.js
import { createAppContainer, createSwitchNavigator, createStackNavigator } from "react-navigation";
import Splash from '../screens/Splash/Splash';
import Signin from '../screens/Signin/Signin';
// import HomeScreen from '../screens/Home/HomeScreen';
// import Profile from '../screens/Profile/Profile'
export const MainScreenNavigation = createAppContainer(createSwitchNavigator({
Splash: Splash,
Main: SigninNavigator,
}, {
initialRouteName: 'Splash'
},
)
);
const SigninNavigator = createSwitchNavigator({
Signin: Signin,
// Home: HomeNavigator,
}, {
initialRouteName: 'Signin'
},
);
// const HomeNavigator = createStackNavigator({
// Profile: Profile,
// HomeScreen: HomeScreen,
// },
// {
// initialRouteName: 'HomeScreen'
// }
// );
App.js
import React, {Component} from 'react';
import {MainScreenNavigation} from "./src/navigations/MainScreenNavigation";
class App extends Component {
render() {
return (
<MainScreenNavigation />
);
}
}
export default App;
Splash.js
import React from 'react';
import {ImageBackground, StatusBar, View, Text, TouchableOpacity} from 'react-native';
import { Logo } from '../../components/Logo';
import { styles } from './styles';
class Splash extends React.Component{
gotoSigninScreen = () => {
this.props.navigation.navigate("Main");
};
render(){
return(
<ImageBackground
source={require('../../assets/splash.png')}
style={styles.imageBackgroundStyle}>
<StatusBar backgroundColor='#3F91D6'
barStyle='light-content' />
<View style={styles.container}>
<View style={styles.upperBody}>
<View style={styles.containerInside}>
<Logo />
<Text style={styles.upperBodyText}>Track, Drive & Deliever</Text>
</View>
</View>
<View style={styles.lowerBody}>
<TouchableOpacity style={styles.buttonContainer}
onPress={() => navigate('Signin')}>
<Text style={styles.buttonText}>Get Started</Text>
</TouchableOpacity>
</View>
</View>
</ImageBackground>
)
}
}
export default Splash;
Signin.js
import React from 'react';
import {TouchableOpacity, Text, TextInput, View, KeyboardAvoidingView} from 'react-native';
import {styles} from './styles';
import {Logo} from "../../components/Logo";
import {hintColor} from "../../prefabs/colors";
class Signin extends React.Component {
gotoHomeScreen = () => {
this.props.navigation.navigate("Home");
};
render() {
return (
<KeyboardAvoidingView behavior="padding" style={styles.container}>
<Logo/>
<View style={styles.formContainer}>
<TextInput style={styles.input}
autoCapitalize="none"
onSubmitEditing={() => this.passwordInput.focus()}
autoCorrect={false}
keyboardType='email-address'
returnKeyType="next"
placeholder='Email'
placeholderTextColor={hintColor}/>
<TextInput style={styles.input}
returnKeyType="go"
ref={(input) => this.passwordInput = input}
placeholder='Password'
placeholderTextColor= {hintColor}
secureTextEntry/>
<TouchableOpacity style={styles.buttonContainer}
// onPress={this.gotoHomeScreen}
>
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
}
export default Signin;
Whats actually going wrong with this code and how to fix it?

Answer 1

I get rid of this error by changing my MainScreenNavigation.js as follows
MainScreenNavigation.js
import { createAppContainer, createSwitchNavigator, createStackNavigator } from "react-navigation";
import Splash from '../screens/Splash/Splash';
import Signin from '../screens/Signin/Signin';
import HomeScreen from '../screens/Home/HomeScreen';
import Profile from '../screens/Profile/Profile';
const HomeNavigator = createStackNavigator({
Profile: Profile,
HomeScreen: HomeScreen,
},
{
initialRouteName: 'HomeScreen'
}
);
const SigninNavigator = createSwitchNavigator({
Home: HomeNavigator,
Signin: Signin,
}, {
initialRouteName: 'Signin'
},
);
export const MainScreenNavigation = createAppContainer(createSwitchNavigator({
Main: SigninNavigator,
Splash: Splash,
}, {
initialRouteName: 'Splash'
},
)
);