Problem when placing a Stacknavigator inside the Drawernavigator

Question

I have a problem when creating a browser Stack on the screen Home. I put a button and wanted you to navigate to the other screen "Map". But it gives this error when opening the program:

Creating a Navigator doesn’t take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5?

I noticed this message when I create two browsers in App.js. Drawer and Stack. I’ve tried everything, but I don’t know how to fix it...

App.js

import React from "react";

import { createAppContainer } from "react-navigation";
import { createDrawerNavigator } from "react-navigation-drawer";
import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from "@react-navigation/native";
import { Dimensions } from "react-native";

import { Feather } from "@expo/vector-icons";

import Home from './screens/HomeScreen';
import MapScreen from './screens/MapScreen';

//import HomeNavegador from './screens/HomeNavegador';



import {
 //  HomeScreen,
   PerfilScreen,
   PetScreen,
   AnuncioScreen,
   EmpresaScreen,
   SignOutScreen
} from "./screens";

import SideBar from "./components/SideBar";


const HomeNavegador = createStackNavigator({
   Home: {
     navigationOptions: {
        header: null,
        title: 'Home'
     },
     screen: Home
   },
   Map: {
     navigationOptions: {
        header: null,
        title: 'Map'
      },
     screen: MapScreen
    }
 }, { initialRouteName: Home});


const DrawerNavigator = createDrawerNavigator({
   HomeScreen: {
      screen: HomeNavegador,
      navigationOptions: {
         title: "Home,",
         drawerIcon: ({ tintColor }) => <Feather name="home" size={16} color={tintColor} />
      }
   },
   PerfilScreen: {
      screen: PerfilScreen,
      navigationOptions: {
         title: "Perfil",
         drawerIcon: ({ tintColor }) => <Feather name="user" size={16} color={tintColor} />
      }
   },
   PetScreen: {
      screen: PetScreen,
      navigationOptions: {
         title: "Pets",
         drawerIcon: ({ tintColor }) => <Feather name="github" size={16} color={tintColor} />
      }
   },
   AnuncioScreen: {
      screen: AnuncioScreen,
      navigationOptions: {
         title: "Anúncios",
         drawerIcon: ({ tintColor }) => <Feather name="file" size={16} color={tintColor} />
      }
   },
   EmpresaScreen: {
      screen: EmpresaScreen,
      navigationOptions: {
         title: "Empresas",
         drawerIcon: ({ tintColor }) => <Feather name="briefcase" size={16} color={tintColor} />
      }
   },
   SignOutScreen: {
      screen: SignOutScreen,
      navigationOptions: {
         title: "Sair",
         drawerIcon: ({ tintColor }) => <Feather name="log-out" size={16} color={tintColor} />
      }
   },
},
{
   contentComponent: props => <SideBar {...props} />,

   drawerWidth: Dimensions.get("window").width * 0.85,
   hideStatusBar: true,

   contentOptions: {
      activeBackgroundColor: "rgba(190, 254, 205, 1)",
      activeTintColor: "#004100",
      itemsContainerStyle: {
          marginTop: 16,
          marginHorizontal: 8
      },
      itemStyle: {
          borderRadius: 4
      }
   }
}
);


export default createAppContainer(DrawerNavigator);

Homescreen.js

import React from 'react';
import { View, Text, StyleSheet, SafeAreaView, TouchableOpacity,
         ImageBackground, TextInput , Icon, Button, Alert } from "react-native";
import { FontAwesome5 } from "@expo/vector-icons";
import MapScreen from './MapScreen';
import { NavigationContainer, navigation } from "@react-navigation/native";


const img = '../assets/img/Prancheta_3.png';

export default class HomeScreen extends React.Component {
   render() {
      //const { navigate } = this.props.navigation;
      return (
       <View style={styles.container}>
            <SafeAreaView style={{flex: 1}}>
               <TouchableOpacity style={{ alignItems: "flex-end",margin: 16 }} onPress={this.props.navigation.openDrawer}>           
                   <FontAwesome5 name="bars" size={24} color="#161924"></FontAwesome5>
               </TouchableOpacity>
               <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
                 <ImageBackground style = {{width :  '100%' , height :  '100%', alignItems: "center",
                    justifyContent: "center", textAlign: "center" }} source = { require ( '../assets/img/Prancheta_3.png' )}>
                   <View style={styles.container2}>  
                      <TextInput style={styles.input} placeholder="   Insira a sua localização" />
                      <TouchableOpacity style={styles.botao} onPress={() => this.props.navigation.navigate("Map")}>
                          <Text>Procurar</Text>
                      </TouchableOpacity>

                   </View>
                 </ImageBackground>

               </View>
            </SafeAreaView>
         </View>
      )

    }
}


const styles = StyleSheet.create({
   container: {
        flex: 1,
        backgroundColor: "#FFF" 
   },  
   text: {
      color: "#161924",
      fontSize: 20,
      fontWeight: "500"
   },
   container2: {
      alignItems: "center",
      justifyContent: "center",
      textAlign: "center",
      position: "absolute",
      bottom: 20,
      width: "90%"
   },
   input: {
      height: 40, 
      textAlign: "center",
      width: "90%", 
      borderColor: "gray", 
      borderWidth: 2, 
      borderRadius: 20,  
      marginBottom: 20, 
      fontSize: 12,
      fontWeight:"bold",
      color: "red"
   },
   botao: {
      borderColor: "gray", 
      borderWidth: 2, 
      borderRadius: 20,  
      marginBottom: 20,
      padding: 5,
      alignItems: "center",
      width: "30%",
      backgroundColor:"#008000"
   }
})

Answer 1

I’ll give you an example of a project of mine, ok?

import { createStackNavigator } from 'react-navigation-stack'
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer'

const AppStack = createStackNavigator(
    {
        Home: HomeScreen,
        Time: TimeLineScreen,
        Know: KnowScreen,
    },
    {
        initialRouteName: 'Home',
        headerMode: "none"
    }
)

const LoginStack = createStackNavigator(
    {
        Login: LoginScreen,
        Register: RegisterScreen,
    },
    {
        initialRouteName: 'Login',
        headerMode: "none"
    }
)

const Navigator = createSwitchNavigator(
    {
        LoginSwitch: LoginStack,
        AuthLoading: SplashScreen
    },
    {
        initialRouteName: 'AuthLoading',
        headerMode: 'none'
    }
)

export default createAppContainer(Navigator)

All my screens I export in a way...

import { withNavigation } from 'react-navigation'

class Login extends Component { ... }

export default withNavigation(Login)

And I’ll also show you my tab, where I change routes

<TouchableWithoutFeedback onPress = {() => this.props.navigation.navigate('Home')}>
    <IconHome name='home' size={30} color='white' />
</TouchableWithoutFeedback >
<TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Notification')}>
    <Icon name='heart' size={30} color='white' />
</TouchableWithoutFeedback>

I don’t use the

import { NavigationContainer, navigation } from "@react-navigation/native";