Nesting navigators in React Navigation - reactjs

Question

I'm making an app in which I have more than one type of navigation, but I'm not sure how to implement it until now, my apps only had one type of navigation. I tried to read the react-navigation docs that talked about this particular implementation, but I couldn't do it. Can someone help me?
So you guys understand, I'm trying to implement a Stack navigator inside a Tab navigator so that when the user clicks on a point in a map, a details page shows up to him.
Here's what I tried to do
import React from 'react'
import { NavigationContainer } from '#react-navigation/native'
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs'
import { createStackNavigator } from '#react-navigation/stack'
import { Map } from '../pages/Map'
import { Detail } from '../pages/Detail'
import FiIcon from '#expo/vector-icons/Feather'
const Tab = createBottomTabNavigator()
const Stack = createStackNavigator()
export const UsersRoutes = () => {
return (
<>
<NavigationContainer>
<Tab.Navigator
initialRouteName='Mapa'
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Mapa') {
iconName = 'map'
} else if (route.name === 'Pesquisar') {
iconName = 'search'
} else {
iconName = 'user'
}
return <FiIcon name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: 'black',
inactiveTintColor: 'gray',
}}
>
<Tab.Screen name='Mapa' component={Map} />
<Tab.Screen name='Pesquisar' component={() => <Text>Search</Text>} />
<Tab.Screen name='Perfil' component={() => <Text>Profile</Text>} />
</Tab.Navigator>
</NavigationContainer>
<NavigationContainer>
<Stack.Navigator headerMode='none'>
<Stack.Screen name='Mapa' component={Map} />
<Stack.Screen name='Detalhes' component={Detail} />
</Stack.Navigator>
</NavigationContainer>
</>
)
}

Answer 1

What you can do is:
const MapaStack = () => (
<Stack.Navigator>
<Stack.Screen name="Mapa" component={MapaScreen} />
<Stack.Screen name="AnyScreen" componnent="AnyScreen" />
</Stack.Navigator>
);
const Tabs = () => (
<Tab.Navigator>
<Tab.Screen name="Mapa" component={MapaStack} />
<Tab.Screen name="Pesquisar" component={PesquisarScreen} />
</Tab.Navigator>
);
// you could use Tabs directly instead of AppStack but there can be more requirements...
const AppStack = () => (
<Stack.Navigator>
<Stack.Screen name="Tabs" component="Tabs" />
</Stack.Navigator>
);
Basically, you can pass Navigators instead of Screens as component prop. And you need to use AppStack inside NavigationContainer. You need to think carefully before implementing the navigators because hierarchy is important as it states here.