reactjsreact-nativenpmiconsreact-native-vector-icons

React Native - Importing @rneui (or react-native-vector-icons) always creates error and breaks projects with safe-area

I am quite new to react native, but I have a lot of experience with other languages. I am having tons of issues with projects breaking due to excessive errors. The errors usually pop up when installing new packages. Often I can bypass the errors by using '--force' or '--legacy-peer-deps' but mostly this just breaks the project more.

(BTW I create apps for mobile)

For instance I started a project with 'react-native init Name' and created a basic native navigation stack with a Home Screen. I wanted to add icons so I followed this website https://reactnativeelements.com/docs/installation which seems to be the newest docs for react elements, but right from the very first command 'npm install @rneui/themed @rneui/base' I get this error:

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: Sessler2022@0.0.1 npm ERR! Found: react-native-safe-area-context@4.3.1 npm ERR! node_modules/react-native-safe-area-context npm ERR! react-native-safe-area-context@"^4.3.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react-native-safe-area-context@"^3.1.9" from @rneui/base@4.0.0-rc.4 npm ERR! node_modules/@rneui/base npm ERR! @rneui/base@"^4.0.0-rc.4" 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 /Users/reidtaylor/.npm/eresolve-report.txt for a full report.

Any help for this error would be helpful as well, but the bigger question is what am I doing wrong to get so many errors with packages and how can I fix them.

Thank you.

Solution

  • I had the same issue and solved it by installing older versions react-native-safe-area-context and react-native-elements.

    Firstly, you need to uninstall your current versions of these packages, and run:

    npm install react-native-elements@3.4.2
npm install react-native-safe-area-context@3.1.9

    I'm using an ios simulator, so in my case, it was required to mate pods install again to update packages versions