I need some help for navigation between screens - react-native

Question

I don't know why I can't import my screen, or I just can't find my mistake. I have another screen like this one. The import and the stack navigator screens is like here, but there isn't error there.
Here is my code:
import React, {Component} from 'react';
import * as firebase from 'firebase';
import {Container, Content, Header, Text, Form, Input, Item, Button} from 'native-base';
import Icon from 'react-native-vector-icons/Ionicons';
import {createAppContainer, createStackNavigator} from 'react-navigation';
import {StyleSheet, ImageBackground, Dimensions, Image, View} from 'react-native';
import MainNavigator from './LoginScreen';
// Some Code
const MainNavigator1 = createStackNavigator({
SignUp: {
screen: SignUpScreen,
navigationOptions: {
header: null,
}
},
Login: {
screen: MainNavigator,
navigationOptions: {
header: null,
}
}
})
export default createAppContainer(MainNavigator1);
const styles = StyleSheet.create ({
container:{
flex: 1,
backgroundColor: null,
justifyContent: 'center',
padding: 10
},
profileImg: {
height: 80,
width: 80,
overflow: 'hidden',
}
})
LogInScreen:
import React, {Component} from 'react';
import * as firebase from 'firebase';
import {Container, Content, Header, Text, Form, Input, Item, Button} from 'native-base';
import Icon from 'react-native-vector-icons/Ionicons';
import {createAppContainer, createStackNavigator} from 'react-navigation';
import {StyleSheet, ImageBackground, Dimensions, Image, View} from 'react-native';
import AppContainer22 from './DrawerNavigatorNew';
import MainNavigator1 from './SignUpScreen';
const firebaseConfig = {
apiKey:
authDomain:
databaseURL:
projectId:
storageBucket:
};
firebase.initializeApp(firebaseConfig);
class LoginScreen extends React.Component {
constructor (props) {
super(props)
this.state =({
email:'',
password:'',
error:'',
})
}
/*
signUpUser = (email, password) => {
try {
if(this.state.password.length <6)
{
alert("Please enter atleast 6 characters")
return;
}
firebase.auth().createUserWithEmailAndPassword(email, password)
}
catch (error){
console.log(error.toString())
}
}
*/
onSignInPress() {
this.setState({error:''})
const {email, password} = this.state;
firebase.auth().signInWithEmailAndPassword(email, password)
.then(() => {
this.setState({error:''})
this.props.navigation.navigate('Drawer');
})
.catch(() => {
this.setState({error:'Authentication failed'})
})
}
render(){
let { height, width } = Dimensions.get('window');
return (
<ImageBackground source={{uri:'https://guidetoiceland.is/image/437199/x/0/northern-lights-in-all-the-colors-of-the-rainbow-dance-across-the-sky-in-iceland-6.jpg'}}
style={{height, width}}>
<Container style={styles.container}>
<View style={{justifyContent:'center', alignItems:'center'}}>
<Image source={{uri:'https://image.flaticon.com/icons/png/512/10/10155.png'}}
style={styles.profileImg}/>
</View>
<Form>
<Item rounded>
<Icon active name='md-mail' size={20} color={'white'}/>
<Input
name='email'
placeholder='YourEmail#gmail.com'
autoCorrect={false}
autoCapitalize='none'
onChangeText={(email)=> this.setState({email})}
keyboardType='email-address'
style={{marginTop: 10}}
/>
</Item>
<Item rounded>
<Icon active name='md-key' size={25} color={'white'}/>
<Input
name='password'
placeholder='******'
secureTextEntry={true}
autoCorrect={false}
autoCapitalize='none'
onChangeText={(password)=> this.setState({password})}
style={{marginTop: 10}}
/>
</Item>
<Text style={{color: 'red'}}>{this.state.error}</Text>
<Button style={{marginTop: 10}}
full
rounded
success
onPress = {this.onSignInPress.bind(this)}
>
<Text> Login </Text>
</Button>
<Button style={{marginTop: 10}}
full
rounded
primary
onPress = {this.props.navigation.navigate('SignUp')}
>
<Text style={{color: 'white' }}> Sign Up </Text>
</Button>
</Form>
</Container>
</ImageBackground>
);
}
}
const MainNavigator = createStackNavigator({
Home: {
screen: LoginScreen,
navigationOptions: {
header: null,
}
},
Drawer: {
screen: AppContainer22,
navigationOptions: {
header: null,
}
},
SignUp: {
screen: MainNavigator1,
navigationOptions: {
header: null,
}
}
});
export default createAppContainer(MainNavigator);
const styles = StyleSheet.create ({
container:{
flex: 1,
backgroundColor: null,
justifyContent: 'center',
padding: 10
},
profileImg: {
height: 80,
width: 80,
overflow: 'hidden',
}
})
And here is the Error: