Installing styled components failed in react native - react-native

I'm using react native 0.63.4 and react 16.13.1.
I try to install 'styled-components' with
npm install --save styled-components
and failed with these messages:
`code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: myproject#0.0.1
npm ERR! Found: react#16.13.1
npm ERR! node_modules/react
npm ERR! react#"16.13.1" from the root project
npm ERR! peer react#">= 16.8.0" from styled-components#5.2.1
npm ERR! node_modules/styled-components
npm ERR! styled-components#"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"17.0.1" from react-dom#17.0.1
npm ERR! node_modules/react-dom
npm ERR! peer react-dom#">= 16.8.0" from styled-components#5.2.1
npm ERR! node_modules/styled-components
npm ERR! styled-components#"*" 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! `
I was not sure what the problems are.
Please if anyone can help me. Thanks.

UPDATE
https://github.com/npm/cli/issues/2120
Also there is a issue with npm resolving peer-dependencies, npm-CLI currently breaks standard NPM7 installs of several major dependencies, such as for example styled-component, your npm version is 7.+ also
Try downgrading to npm 6 or install another version of styled-components
or you can use yarn to install styled-components
yarn add styled-components

I ended up using yarn to instal styled-components, and it works.
yarn add styled-components

Have you tried using yarn instead of npm?

Related

Fix the upstream dependency conflict, React Native Expo

I have a React Native Expo application, and I am trying to install expo-splash-screen with running npx expo install expo-splash-screen
As a result I get the following error message:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-navigation-drawer#2.7.2
npm ERR! Found: react-native-gesture-handler#2.5.0
npm ERR! node_modules/react-native-gesture-handler
npm ERR! peer react-native-gesture-handler#">= 1.0.0" from #react-navigation/drawer#6.5.0
npm ERR! node_modules/#react-navigation/drawer
npm ERR! #react-navigation/drawer#"^6.5.0" from the root project
npm ERR! peer react-native-gesture-handler#">= 1.5.0" from react-navigation-stack#2.10.4
npm ERR! node_modules/react-navigation-stack
npm ERR! react-navigation-stack#"^2.10.4" from the root project
npm ERR! 1 more (the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-native-gesture-handler#"^1.0.12" from react-navigation-drawer#2.7.2
npm ERR! node_modules/react-navigation-drawer
npm ERR! react-navigation-drawer#"^2.7.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react-native-gesture-handler#1.10.3
npm ERR! node_modules/react-native-gesture-handler
npm ERR! peer react-native-gesture-handler#"^1.0.12" from react-navigation-drawer#2.7.2
npm ERR! node_modules/react-navigation-drawer
npm ERR! react-navigation-drawer#"^2.7.2" 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.
While running npm -v react-native-gessture-handler it says: 8.15.0.
I have also tried using npm i react-native-splash-screen --force but it is not good for an expo application, and I am pretty sure that installing react-navigation-drawer with --force resulted the problem.
I am not really experienced with package managing so I do not really get the point of the error message. How can I install expo-splash-screen, and can somebody explain the error message?
It looks you have libraries that use different versions of react-native-gesture-handler. react-navigation-drawer is using and older react-native-gesture-handler version and this package is deprecated so you cannot update it to use a higher version of react-native-gesture-handler.
The best solution in my opinion is to change the package react-navigation-drawer to #react-navigation/drawer as it says in the documentation of the package.
The other alternative but at your own risk is to specify in the package.json a resolution with the react-native-gesture-handler you need in expo-splash-screen and every library that have as peer dependecy react-native-gesture-handler will use this specific version.
"resolutions": {
"react-native-gesture-handler": "x.x.x"
}
Let me know if it helps

Install AsyncStorage React Native doesnt work

If i want to add "npm install #react-native-community/async-storage" in the terminal.
There is this error and i dont know why.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined#undefined
npm ERR! Found: react#16.14.0
npm ERR! node_modules/react
npm ERR! react#"^16.13.0" from the root project
npm ERR! peer react#"^16.8" from #react-native-community/async-storage#1.12.1
npm ERR! node_modules/#react-native-community/async-storage
npm ERR! #react-native-community/async-storage#"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"18.1.0" from react-native#0.70.6
npm ERR! node_modules/react-native
npm ERR! peer react-native#">=0.59" from #react-native-community/async-storage#1.12.1
kjf Is it maybe of my react version. If yes how can I change my version
you have to change your react version to resolve this error.
using npm install react#[version] --save cmmand you can change your react Version.
Try using this #react-native-async-storage/async-storage package

Install Pinia with Quasar v2

I'm using Quasar v2, Vue 3 and I'm trying to install Pinia.
Whenever I try to run: npm install pinia or also npm install pinia#next,
it gives me this error:
code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: ui#0.0.1
npm ERR! Found: vue#3.1.5
npm ERR! node_modules/vue
npm ERR! vue#"3.1.5" from #quasar/app#3.0.4
npm ERR! node_modules/#quasar/app
npm ERR! dev #quasar/app#"^3.0.4" from the root project
npm ERR! peer vue#"3.1.5" from #vue/compiler-sfc#3.1.5
npm ERR! node_modules/#vue/compiler-sfc
npm ERR! #vue/compiler-sfc#"3.1.5" from #quasar/app#3.0.4
npm ERR! node_modules/#quasar/app
npm ERR! dev #quasar/app#"^3.0.4" from the root project
npm ERR! peerOptional #vue/compiler-sfc#"^3.0.8" from vue-loader#16.4.1
npm ERR! node_modules/vue-loader
npm ERR! vue-loader#"16.4.1" from #quasar/app#3.0.4
npm ERR! node_modules/#quasar/app
npm ERR! dev #quasar/app#"^3.0.4" from the root project
npm ERR! 5 more (#vue/server-renderer, #vue/test-utils, vue-i18n, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! pinia#"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vue#2.6.14
npm ERR! node_modules/vue
npm ERR! peer vue#"^2.6.14 || ^3.2.0" from pinia#2.0.2
npm ERR! node_modules/pinia
npm ERR! pinia#"*" 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 /home/gii/.npm/eresolve-report.txt for a full report.
Does anyone know how to make this work?
Moreover, since I'm using Typescript, is there a way to configure it already with it via this initial npm command?
You can install Pinia if you remove Vuex first.
Just delete Vuex from your package.json and then you are free to install Pinia.
Faced the same problem while installing pinia from npm having vuex configured in my vue3 app , after couple of try i uninstalled vuex and reinstalled pinia and then it worked fine
If you just want to get everything installed and are not concerned about possibly running incompatible versions: npm install --legacy-peer-deps.
Beyond that, your options get much more involved. You can try updating everything and cross your fingers that all the most up-to-date versions are compatible with each other. You can downgrade dependencies that require newer versions of peer dependencies. And so on.

#react-native-community/datetimepicker install throwing error

I tried to install datetime picker for my react-native (expo) project but, when i try to install it;
expo install #react-native-community/picker
It throws error;
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined#undefined
npm ERR! Found: react#16.13.1
npm ERR! node_modules/react
npm ERR! react#"16.13.1" from the root project
npm ERR! peer react#">=16.8.3" from #react-native-community/datetimepicker#3.2.0
npm ERR! node_modules/#react-native-community/datetimepicker
npm ERR! #react-native-community/datetimepicker#"3.2.0" from the root project
npm ERR! 1 more (react-native)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"17.0.1" from react-native-windows#0.64.12
npm ERR! node_modules/react-native-windows
npm ERR! peer react-native-windows#">=0.62" from #react-native-community/datetimepicker#3.2.0
npm ERR! node_modules/#react-native-community/datetimepicker
npm ERR! #react-native-community/datetimepicker#"3.2.0" 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\irfan\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\irfan\AppData\Local\npm-cache\_logs\2021-06-30T13_38_37_968Z-debug.log
As per this error (if i got it right), this requires a different version of react (17.0.1) which when installed solves the problem but this version of the react is not supported by expo.
Please provide a solution which will be compatible with expo.
After searching for a whole day, i thought to post it here. But just after posting, i got an answer in my mind.
Why not to clone it directly from the github instead of installing it with expo or npm.
Did the same thing and now working fine.
This issue was also raised on github but it had no solutions.

React-navigation- dependencies (Error while install NPM navigation dependencies package installation)

when I install this package
1 . npm install #react-native-community/masked-view .
it shows error like this
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: Sample_pro#0.0.1
npm ERR! Found: react#17.0.1
npm ERR! node_modules/react
npm ERR! react#"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.0" from #react-native-community/masked-view#0.1.10
npm ERR! node_modules/#react-native-community/masked-view
npm ERR! #react-native-community/masked-view#"*" 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\HP\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\HP\AppData\Local\npm-cache_logs\2021-04-21T03_52_51_024Z-debug.log
-----How should I solve this problem-----
Ther error message is telling you that
your proj is using react # 17.0.1 version while #react-native-community/masked-view 0.1.10 has a dependency of react # 16.
To solve it, you can choose one of the followings:
upgrade #react-native-community/masked-view to the latest package which is accepting react#16 and react#17
downgrade your root project's react version to 16
please remove package-lock.json file and try to install again hope it will work.