react native navigation nested screen - react-native

Question

i have screen with 2 tabs
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Main" component={Main}/>
<Tab.Screen name="Chat" component={Chat}/>
</Tab.Navigator>
</NavigationContainer>
Screen Chat very simple and it works :
const Chat = () => {
return (
<View>
<Text>Chat</Text>
</View>
);
};
export default Chat;
But in first screen Main i have nested screen Map
const Main = () => {
return (
<Map/>
);
};
export default Main;
Tell me pls how nested screens works, because i have an error :
Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app
Component Map:
export const Map = () => {
return (
<View style={styles.container}>
<MapView
provider={PROVIDER_GOOGLE} // remove if not using Google Maps
style={styles.map}
region={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
>
<Marker
title="title"
description='descr'
coordinate={{
latitude: 37.78825,
longitude: -122.4324,
}}>
<View style={{backgroundColor: "red", padding: 10}}>
<Text>SF</Text>
</View>
</Marker>
</MapView>
</View>
);
};
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
height: '100%',
width: '100%',
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
});

Answer 1

problem was in wrong import MapView!