React18 is not supporting styled-component - reactjs

Can anyone help me out to solve this problem.
As I am learning React Native, I was going through styled components but was facing an error related to styled components not compatible with react18 version. and same works in react#16 and below
I was trying to install styled-components for styling components in react-native. And i was receiving error saying that react18 is not compatible. I just want styled components to work

Try to install it with this command
npm install styled-components --force

I sorted the solution as styled-component was not working for react 18.0.2.
So I decided to uninstall react 18.0.2 by using npm uninstall react#18.0.2
and then
I reinstalled npm install react#17.0.2 and then I read the documentation of Styled Component
and installed styled-components using yarn add styled-components and successfully sorted out my problem.

npx expo install react-dom
This fixed it for me (using expo managed react-native app)
https://github.com/styled-components/styled-components/issues/3788#issuecomment-1335191911

I had same problem when taking Udemy course about React Native. This course provides git with complete code, so what I did was:
Downloaded packages.json file from git url provided with course (last version),
Deleted my project node_modules folder,
Deleted my project packages-lock.json file,
Executed npm install

Related

Upgrading react: is it really this simple?

I'm following this page to upgrade React on our just-released react app, project started last November, react currently sitting at 16.0.
So naively, I do npm install react react-dom as suggested, and it bumps my React up to 16.14.0. So where is my React 18? Am I right to think I want the hottest, newest. What is the upgrade page not telling me?
Try latest tag or giving directly the version that you want
npm install react#latest react-dom#latest
or
npm install react#^18.0.0 react-dom#^18.0.0

loading sass in a create-react-app with typescript

I recently migrated a create-react-app to typescript. After migration my scss files are being ignored in the .tsx components. I'm importing the files like so:
import './styles/scss/style.scss';
this was working fine in js. I've already installed node-sass and even tried installing #types/node-sass. I'd like to do this without ejecting. Would appreciate any help.
According with this documentation https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav
If you use react-scripts#2.0.0 or higher just
npm install node-sass
restart and enjoy.

Is Shrinkwrap preventing me from updating react and react-dom?

I am trying to update react from 15.4.2 to 16.2.0. Main dependencies I am concerned about is React and React-Dom. I am trying to run: npm uninstall --save react react-dom and then npm install --save react react-dom however I keep getting the message: UNMET PEER DEPENDENCY react#16.2.0 react-dom#16.2.0 so this makes me think it's a shrink or tied down dependency but can't seem to find it. I have tried to even remove react and react-dom from the dependencies in package.json. Still no avail.
Issue:
My root issue is I coudn't run material ui components with tap react and more specifically the Tabs and it's touch/tap feature. Real problem is I believe I had other node_modules,package.jsons in root folder where my app/components were in so more than one node_module and package.json files and folders which caused the clash.
To resolve:
Make a copy of your business logic from app where you cannot update
Then navigate into/create new directory and
Scaffolded new react project in there (react-app or in my case Yo #microsoft/sharepoint)
Checked the react, reactdom versions in node_modules folder and package.json from within the application that's not updating to see if they're latest versions...they weren't so I did the following updates:
3.2. npm install --save react react-dom (you may have to run npm uninstall react react-dom first)
3.3. npm install material-ui#latest
3.4 npm i --save react-tap-event-plugin#3.0.2
Check if versions have updated in folders above in step 3...they have now.
Try to import and create tap react app components again e.g. Tabs and now it should work
Conclusion:
It was not Shrinkwrap itself that was causing the issue but the duplication of node_module files and/or package.json files. See Material-UI Tabs have stopped working for more info.
Also remember Create React app will not work with some versions of React and React Dom. So be wary of this.
Some things you could try:
check the version of react and react-dom inside the node_modules/ folder
remove node_modules/ and reinstall it again to remove any stall dependencies

Updating react typings; Unable to find 'react' in the registry

I noticed my react typings dont seem to be the right version, ie #types/react (15.0.35) but using react (15.6.1) in my project so I'm trying to update the typings. I tried:
typings install react#15.6.1
but got the err: Unable to find 'react' ('npm') in the registry
I'd like to update the typings to the version of react that I'm using (15.6.1) not to the latest typings, and I don't really want to update my project to the latest version of react.
Please stop using typings it's deprecated https://github.com/typings/typings as you can see in the github project.
Please use #types scope...
npm install --save #types/react#15.6
If you have problems using this approach please show your tsconfig.json

Installed react dom rather than react-dom. What's the difference?

kind of new at this and typed in "install react dom" instead of "install react-dom" in my command prompt. What exactly is the difference and what did I install?
Well, it means you installed the react package and dom package instead of the react-dom package. That dom package is not related to React or React-DOM in any way. You probably want both React and React-DOM:
npm install react react-dom

Resources