how to fix error when using the React Navigation? - react-native

Question

Im getting this error
BUNDLE ./index.js
error: node_modules\react-native-reanimated\src\index.ts: C:\Work\WordHunt\node_modules\react-native-reanimated\src\index.ts: Export namespace should be first transformed by `#babel/plugin-proposal-export-namespace-from`.
5 | export * from './reanimated1';
6 | export * from './reanimated2';
> 7 | export * as default from './Animated';
| ^^^^^^^^^^^^
8 |
What Im getting on the phone:
[1]: https://i.stack.imgur.com/suoug.jpg
when I try to use createDrawerNavigator:
import React, { Component } from 'react'
import { createDrawerNavigator } from '#react-navigation/drawer';
import Main from './Screens/Main';
const Drawer = createDrawerNavigator();
export default function MyDrawer() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Main" component={Main} />
</Drawer.Navigator>
);
}
This is my App.js file:
import React from 'react';
import Main from './src/Components/Screens/Main';
import MyDrawer from './src/Components/SideMenu';
function App() {
return (
<MyDrawer />
)
}
export default App;
IM using react native cli, not expo

Answer 1

//firstly you need to configure your babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
//add this plugins
plugins: ['react-native-reanimated/plugin'],
};
};

Answer 2

First run this to make sure everything compatible:
expo update
npm install react-native-screens react-native-safe-area-context
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
npx pod-install ios

Answer 3

I found the answer. This helps me: https://github.com/software-mansion/react-native-reanimated/issues/846#issuecomment-944115333

Answer 4

import React, { Component } from 'react'
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from "#react-navigation/native";
import Main from './Screens/Main';
const Drawer = createDrawerNavigator();
export default function MyDrawer() {
return (
<NavigationContainer>
<Drawer.Navigator useLegacyImplementation={true} initialRouteName="Main">
<Drawer.Screen name="Main" component={Main} />
</Drawer.Navigator>
</NavigationContainer>
);
}