how to fix error when using the React Navigation?

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

"react-native-reanimated": "^2.2.0", solved my issue – Mohan Gopi Oct 18 '22 at 10:36 — Mohan Gopi, Oct 18 '22 at 10:36

score 4 · Answer 1 · answered Jul 16 '22 at 09:58

4

//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'],
  };
};

answered Jul 16 '22 at 09:58

NIZEYIMANA Jean de Dieu

61
4

score 1 · Answer 2 · answered Jul 09 '22 at 19:47

1

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

answered Jul 09 '22 at 19:47

Naroto-Hasaka

49
4

It doesn't help, and Im not use expo – jafonin Jul 09 '22 at 20:02
https://reactnavigation.org/docs/getting-started Read Through this dec and you will find what exactly you should do. – Naroto-Hasaka Jul 10 '22 at 17:53

score 0 · Accepted Answer · answered Jul 10 '22 at 18:34

0

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

answered Jul 10 '22 at 18:34

jafonin

19
5

A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](https://meta.stackexchange.com/a/8259) so your fellow users will have some idea what it is and why it is there, then quote the most relevant part of the page you are linking to in case the target page is unavailable. – cursorrux Jul 12 '22 at 10:11

score 0 · Answer 4 · answered Jul 16 '22 at 10:02

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

how to fix error when using the React Navigation?

4 Answers4

Linked