React navigator not showing two route or all route

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>
  );
}