install react-native-reanimated and react navigation drawer

Question

I am trying to install a react-navigation drawer. on DOC instructions to install react-native-reanimated first and I installed. then I installed the drawer and got an error

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: app_mobile@0.0.1 npm ERR! Found: react-native-reanimated@2.3.0-beta.3 npm ERR! node_modules/react-native-reanimated npm ERR! react-native-reanimated@"^2.3.0-beta.2" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react-native-reanimated@">= 1.0.0" from @react-navigation/drawer@6.1.8 npm ERR! node_modules/@react-navigation/drawer npm ERR! @react-navigation/drawer@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\dell\AppData\Local\npm-cache\eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\dell\AppData\Local\npm-cache_logs\2021-10-21T08_17_02_306Z-debug.log'''

score 1 · Answer 1 · answered Oct 21 '21 at 23:38

You can't use react-native-reanimated v2.x if you are using react-navigation v6, you need to install react-native-reanimated v1.x

# remove the library
npm remove react-native-reanimated

# install 1.x
npm i react-native-reanimated@1.x

You can see the peer dependencies of Drawer from here: https://github.com/react-navigation/react-navigation/blob/e77a5ab9d342a03cd8e20b54938700dfd4e23f42/packages/drawer/package.json#L68

score 0 · Answer 2 · answered Aug 30 '22 at 14:31

By using React navigation drawer in version to you can make sure that you have enabled useLegacyImplementation to true let me show you how you are going to implement it by coding

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

Then after you have to add plugin in babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

install react-native-reanimated and react navigation drawer

2 Answers2