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.sstatic.net/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

Im on Windows machine

noname6842
– noname6842

2022-07-09 20:03:45 +00:00
Commented Jul 9, 2022 at 20:03 — noname6842
– noname6842, Commented Jul 9, 2022 at 20:03
"react-native-reanimated": "^2.2.0", solved my issue

Mohan Gopi
– Mohan Gopi

2022-10-18 10:36:59 +00:00
Commented Oct 18, 2022 at 10:36 — Mohan Gopi
– Mohan Gopi, Commented Oct 18, 2022 at 10:36

NIZEYIMANA Jean de Dieu · Accepted Answer · 2022-07-16 09:58:14Z

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, 2022 at 9:58

NIZEYIMANA Jean de Dieu

614 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Naroto-Hasaka · Accepted Answer · 2022-07-09 19:47:50Z

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 9, 2022 at 19:47

Naroto-Hasaka

775 bronze badges

2 Comments

noname6842 Over a year ago

It doesn't help, and Im not use expo

Naroto-Hasaka Over a year ago

reactnavigation.org/docs/getting-started Read Through this dec and you will find what exactly you should do.

noname6842 · Accepted Answer · 2022-07-10 18:34:42Z

0

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

answered Jul 10, 2022 at 18:34

noname6842

191 silver badge5 bronze badges

1 Comment

cursorrux Over a year ago

A link to a solution is welcome, but please ensure your answer is useful without it: add context around the link 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.

NIZEYIMANA Jean de Dieu · Accepted Answer · 2022-07-16 10:02:07Z

0

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

answered Jul 16, 2022 at 10:02

NIZEYIMANA Jean de Dieu

614 bronze badges

Collectives™ on Stack Overflow

how to fix error when using the React Navigation?

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related