CODEWITHSUNDEEP
react-nativebabeljsnavigation-drawerreact-native-reanimated
noname6842
noname6842

Reputation: 19

how to fix error when using the React Navigation?

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

Upvotes: 0

Views: 2497

Answers (4)

NIZEYIMANA Jean de Dieu
NIZEYIMANA Jean de Dieu

Reputation: 61

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

Upvotes: 0

NIZEYIMANA Jean de Dieu
NIZEYIMANA Jean de Dieu

Reputation: 61

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

Upvotes: 4

noname6842
noname6842

Reputation: 19

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

Upvotes: 0

Naroto-Hasaka
Naroto-Hasaka

Reputation: 47

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

Upvotes: 1

Related Questions