The component of route "WelcomeScreen" must be react component - react-native

Question

I am having a problem with this little piece of code. I have almost searched about this error everywhere but it did not solved my problem. I have used all the methods given by experts regarding tenter image description herehat problem. Please If anyone can help.
///app.js
import {
createStackNavigator,
createAppContainer
} from 'react-navigation';
import React, {Component} from 'react';
import {AppRegistry} from 'react-native';
import WelcomeScreen from './Components/Welcome/Welcome';
import SignInScreen from './Components/SingIn/SingIn';
import SignUpScreen from './Components/SingUp/SingUp';
import ContinueAsGuestScreen from './Components/ContinueAsGuest/ContinueAsGuest';
const RootStack = createStackNavigator({
WelcomeScreen: {
WelcomeScreen: WelcomeScreen
},
SignInScreen: {
SignInScreen: SignInScreen
},
SignUpScreen: {
SignUpScreen: SignUpScreen
},
ContinueAsGuestScreen: {
ContinueAsGuestScreen: ContinueAsGuestScreen
},
});
const App = createAppContainer(RootStack);
export default App;
**I have used all the techniques specially exporting things I found but of no help*
Here is Welcom.js
import React, { Component } from 'react';
import { Platform, AppRegistry, StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import symbolicateStackTrace from 'react-native/Libraries/Core/Devtools/symbolicateStackTrace';
import { ScrollView } from 'react-native-gesture-handler';
export default class Welcome extends Component {
static navigatonOptions =
{ title: 'Welcome Screen' };
constructor(props) {
super(props);
this.handleButton = this.handleButton.bind(this);
state =
{
Firstname: '',
Lastname: '',
EmailAddress: '',
PhoneNumber: '',
CompanyName: '',
OtherEmailAddress: ''
}
}
handleFirstName = (text) => {
this.setState({ FirstName: text })
}
handleLastName = (text) => {
this.setState({ Lastname: text })
}
handleEmailAddress = (text) => {
this.setState({ EmailAddress: text })
}
handlePhoneNumber = (text) => {
this.setState({ PhoneNumber: text })
}
handleCompanyName = (text) => {
this.setState({ CompanyName: text })
}
handleOtherEmailAddress = (text) => {
this.setState({ OtherEmailAddress: text })
}
handleButton = () => {
this.props.navigation.navigate("SignInScreen");
}
render() {
return (
<ScrollView style={styles.container} >
<View style={styles.header}>
<Text style={{ fontSize: 20 }}> Profile </Text>
</View>
<View>
<Text style={{ fontSize: 20, alignSelf: "center" }}> Welcome here </Text>
</View>
<Text>FIRST NAME *</Text>
<TextInput style={styles.input}
placeholder="Firstname"
placeholderTextColor="#9a73ef"
AutoCapitalization="none"
onChangeText={this.handleFirstName}
/>
<Text>LAST NAME *</Text>
<TextInput style={styles.input}
placeholder="LastName"
placeholderTextColor="#9a73ef"
AutoCapitalization="none"
onChangeText={this.handleLastName}
/>
<Text>Email Address *</Text>
<TextInput style={styles.input}
placeholder="Email Address"
placeholderTextColor="#9a73ef"
AutoCapitalization="none"
onChangeText={this.handleEmailAddress}
/>
<Text>PHONE NUMBER *</Text>
<TextInput style={styles.input}
placeholder="Phone Number"
placeholderTextColor="#9a73ef"
AutoCapitalization="none"
onChangeText={this.handlePhoneNumber}
/>
<Text>COMPANY NAME *</Text>
<TextInput style={styles.input}
placeholder="Company Name"
placeholderTextColor="#9a73ef"
AutoCapitalization="none"
onChangeText={this.handleCompanyName}
/>
<Text>OTHER EMAIL ADDRESS *</Text>
<TextInput style={styles.input}
placeholder="Other Email Address"
placeholderTextColor="#9a73ef"
AutoCapitalization="none"
onChangeText={this.handleOtherEmailAddress}
/>
<TouchableOpacity style={styles.submitButton2} onPress={() => this.handleButton} >
<Text style={styles.submitButtonText}> Save </Text>
</TouchableOpacity>
</ScrollView>
);
}
}

Answer 1

I think you're creating the navigator uncorrectly in createStackNavigator(). Try this:
const RootStack = createStackNavigator({
WelcomeScreen: {
screen: WelcomeScreen
},
SignInScreen: {
screen: SignInScreen
},
SignUpScreen: {
screen: SignUpScreen
},
ContinueAsGuestScreen: {
screen: ContinueAsGuestScreen
},
});