react-navigation - drawer navigation inside stack navigation in react native - react-navigation

Question

Image of my codes, image of error
Managed to build my first React native-navigation v2, a stack navigation from LoginScreen to HomeScreen.
The problem I have is that I tried putting a Drawer Navigation on the HomeScreen and placing it inside the stack navigation but I can't understand the way to do it.
error message: Unable to resolve ./src/components/HomeScreen" from ".//src/components/DrawerNavigator.js: The module./src/components/HomeScreen` could not be found"
Failed building JavaScript bundle
Take a look at my code below.
LoginForm.js
import React, {Component} from 'react';
import {StyleSheet, View, TextInput, TouchableOpacity, Text, StatusBar} from 'react-native';
export default class LoginForm extends Component {
render() {
return (
<View style={styles.container}>
<StatusBar
barStyle="dark-content"
/>
<TouchableOpacity style={styles.buttonContainer} onPress={() => this.props.navigation.navigate('DrawerNavigator')}>
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
</View>
);
}
}
App.js
import React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import { Header, List, ListItem, Icon } from 'react-native-elements';
import Login from './src/components/Login/Login';
import LoginForm from './src/components/Login/LoginForm';
import HomeScreen from './src/components/HomeScreen';
import DayPlanScreen from './src/components/DayPlanScreen';
import { createStackNavigator } from 'react-navigation';
import DrawerNavigator from './src/components/DrawerNavigator'
export default class App extends React.Component {
static navigationOptions = {
header: null
}
render() {
return (
<View style={styles.container}>
{
<AppStackNavigator />
}
</View>
);
}
}
const AppStackNavigator = createStackNavigator ({
Login: Login,
Home: HomeScreen,
DrawerNavigator: DrawerNavigator
})
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#fff',
},
addBtn: {
position: 'absolute',
bottom: 10,
right: 0
},
});
DrawerNavigator.js
import React, { Component } from "react";
import {
View,
Text,
StyleSheet
} from "react-native";
import HomeScreen from './src/components/HomeScreen';
import { createDrawerNavigator } from 'react-navigation'
const DrawerNavigator = createDrawerNavigator({
Home: HomeScreen,
DayPlan: DayPlanScreen
})
export default DrawerNavigator;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
HomeScreen
import React, { Component } from "react";
import {
View,
Text,
StyleSheet
} from "react-native";
import { Button } from 'react-native-elements';
class HomeScreen extends Component {
render(){
return (
<View style={styles.container}>
<Text style={{color: 'white'}}>HomeScreen</Text>
<Button
title='LOGIN SCREEN'
onPress={()=>this.props.navigation.goBack()}
fontWeight='700'
backgroundColor='#3AD7FF'
color='#424242'
/>
</View>
);
}
}
export default HomeScreen;
const styles = StyleSheet.create({
container:{
flex:1,
alignItems:'center',
justifyContent:'center',
backgroundColor: '#424242'
}
});