React navigator not showing two route or all route - reactjs

Question

** I wanna to use react navigator on my app. Here I try to making two route and i want to see these. But i only see first route component. Theirs no button about 'def'. But copy those code from react navigator. i also found in snack emulator there also showing one route. does my code is wrong?? Advance thanks **
import { StatusBar } from 'expo-status-bar';
import React,{useState} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MultipleDateEntrys from './UI/Pages/MultipleDateEntrys.js'
import MaxCountrysEntry from './UI/Pages/MaxCountryData'
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator();
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>abc</Text>
</View>
);
}
function def() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>cde</Text>
</View>
);
}
export default function App() {
const title = useState('Corona Highlight')
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'Overview' }}/>
<Stack.Screen
name="Mon"
component={def}
options={{ title: 'def' }}/>
</Stack.Navigator>
{/* <Text style={styles.title}>{title}</Text> */}
</NavigationContainer>
);
}

Answer 1

When using a stack navigator only one screen would be shown which is the intended behavior.
You will have to navigate to the other screen using a button or some similar component.
All screens get a navigation prop you can use it to navigate.
In order to navigate to a screen you have to use the navigation.navigate("ScreenName"). Here the screen name would be the name that you provide in the stack when you initialize.
function HomeScreen({navigation}) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button title="Navigate" onPress={()=>navigation.navigate("Mon")}/>
<Text>abc</Text>
</View>
);
}
If you want both the screen in the same view you can use a tab navigator, which would allow you to switch screen using a tab
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home"
component={HomeScreen}
options={{ title: 'Overview' }} />
<Tab.Screen name="Mon"
component={def}
options={{ title: 'def' }}/>
</Tab.Navigator>
);
}