Using stack and bottom navigator together react native - react-native

Question

I am trying to add a drawer navigation to my Home screen how can i do that? Here's my code.
class Navigation extends React.Component {
render() {
return (
<NavigationContainer>
<StatusBar barStyle="light-content" />
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} options={{ title: this.state.name, }} />
<Stack.Screen name="DrawerScreen" options={{ title: 'DrawerScreen' }} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
How can I get use DrawerScreen in my Navigation class? I tried THAT^ but it gives me error saying couldn't find a component for DrawerScreen.
function DrawerScreen() {
return (
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Home" component={Home} />
</Drawer.Navigator>
</NavigationContainer>
);
}

Answer 1

You can do something like this:
import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator, DrawerItems } from 'react-navigation-drawer';
import { View, Text, StyleSheet,Button, SafeAreaView, ScrollView, Image } from "react-native";
import Load from './components/Load';
import Home from './components/Homescreen'
import SignIn from './components/SignIn'
import SignUp from './components/SignOut'
const MainDrawer = createDrawerNavigator({
SignUp:SignUp,
},
);
const App = createStackNavigator({
Load: {
screen: Load,
navigationOptions: {
headerShown:false
},
},
Home: {
screen: Home,
navigationOptions: {
headerShown:false,
},
},
SignIn: {
screen: SignIn,
navigationOptions: {
headerShown:false,
},
},
SignUp: {
screen: MainDrawer,
navigationOptions: {
headerShown:false,
},
},
});
export default createAppContainer(App);
Hope this helps!