react native - stack navigator seem to be stuck when nesting with drawer navigator

Question

Currently i am developing a react native app which has multiple stack navigator nested inside a drawer navigator.The stack navigator screen getting stuck when switching from one stack navigator to another

import * as React from 'react';
import {
  Button,
  View,
  Text,
  TouchableOpacity,
  Image
} from 'react-native';

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

import FirstPage from './pages/FirstPage';
import SecondPage from './pages/SecondPage';
import ThirdPage from './pages/ThirdPage';
import FourthPage from './pages/FourthPage';

const Stack = createStackNavigator();
const Stack1 = createStackNavigator();
const Drawer = createDrawerNavigator();

  

function firstScreenStack({ navigation }) {
  return (
      <Stack.Navigator initialRouteName="FirstPage">
        <Stack.Screen name="FirstPage" component={FirstPage}/>
        <Stack.Screen name="SecondPage" component={SecondPage}/>
      </Stack.Navigator>
  );
}

function secondScreenStack({ navigation }) {
  return (
    <Stack1.Navigator initialRouteName="SecondPage">
      <Stack1.Screen name="ThirdPage" component={ThirdPage}/>
      <Stack1.Screen name="FourthPage" component={FourthPage}/>
    </Stack1.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen
          name="FirstPage"
          component={firstScreenStack} />
        <Drawer.Screen
          name="SecondPage"
          component={secondScreenStack} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

export default App;

question from:https://stackoverflow.com/questions/65858478/stack-navigator-seem-to-be-stuck-when-nesting-with-drawer-navigator

Answer 1

Waitting for answers