Using drawer navigation and stack navigation at the same time - react-native

Question

I am trying to nest a stack navigation inside a drawer navigation on snack expo. I asked this question before and was told to do it all over again. I did and still got errors. Initially I used a class, so I tried using a function instead . I would really appreciate if someone could explain what am I doing wrong? I can also post the link to my project if this helps https://snack.expo.io/#andreeam/it-in-the-valley
The error I get is
Device: (0:0) Cannot assign to read only property 'exports' of object '#<Object>'
Evaluating module://react-native-screens.js
Evaluating module://#react-navigation/drawer.js
Evaluating module://App.js.js
Loading module://App.js
Thank you
This is my code
import * as React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import SignIn from './components/SignIn';
import ForgotPassword from './components/ForgotPassword';
import Dashboard from './components/Dashboard';
import Advertisers from './components/advertisers';
import Adverts from './components/Adverts';
import Stats from './components/Stats';
import Plans from './components/Plans';
import About from './components/about';
import ManageAdvert from './components/ManageAdvert';
const Stack = createStackNavigator();
function Root () {
return (
<Stack.Navigator
initialRouteName="SignIn"
screenOptions={{
headerTitleAlign: 'center',
headerStyle: { backgroundColor: '#2d3436'},
headerTintColor: '#fff',
headerTitleStyle: { fontWeight: 'bold'}
}}>
<Stack.Screen
name="Reset your password"
component={ForgotPassword}
options={
{title: 'Reset your password'},
{headerLeft: null}
}
/>
<Stack.Screen
name="SignIn"
component={SignIn}
options = {
{headerShown: false,
title: 'SignOut'}
}
/>
<Stack.Screen
name="Dashboard"
component={Dashboard}
/>
<Stack.Screen
name="Advertisers"
component={Advertisers}
options={
{title: 'Advertisers'}
}
/>
<Stack.Screen
name="Adverts"
component={Adverts}
options={
{title: 'Adverts'}
}
/>
<Stack.Screen
name="Stats"
component={Stats}
options={
{title: 'Stats'}
}
/>
<Stack.Screen
name="Plans"
component={Plans}
options={
{title: 'Plans'}
}
/>
<Stack.Screen
name="Manage Adverts"
component={ManageAdvert}
options={
{title: 'Manage Adverts'}
}
/>
</Stack.Navigator>
);
}
const Drawer = createDrawerNavigator();
export default function App () {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Root">
<Drawer.Screen name="Root" component={Root} />
<Drawer.Screen name="About" component={About} />
</Drawer.Navigator>
</NavigationContainer>
);
}

Answer 1

Fixed that, see snack here => https://snack.expo.io/#mustafaskir/ee857b
just updated packages in package.json, should fix that
here's what packages i updated, and i have to republish in my acc
"react-native-paper": "^3.10.1",
"react-native-screens": "^2.4.0",
"#react-navigation/stack": "^5.3.7",
"react-native-reanimated": "^1.8.0",
"#react-navigation/drawer": "^5.7.5",
"#react-navigation/native": "^5.4.0",
"react-native-safe-area-context": "^0.7.3",
"#react-native-community/masked-view": "^0.1.7"