React 18 support

[shawnkelleydev]

Ask your Question

Hello! I was hoping to integrate this into my react native project, but encountered errors on install due to peer dependency conflicts regarding my use of React 18.

Am I doing something wrong? If not, will support be coming for React 18 anytime soon?

Thanks in advance for your thoughts!

[mdjastrzebski]

RNTL works with React 18. Make sure that your react and react-test-render versions are the same (for RN 0.74, that should be 18.2.0).

What errors are you getting?

[shawnkelleydev]

Thank you for your response, @mdjastrzebski !

I did not have react-test-renderer installed, so I went ahead and did that at 18.2.0.

After closing that gap, I am seeing this:

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: @cvg/react-native-components@0.1.0 npm ERR! Found: react@18.2.0 npm ERR! node_modules/react npm ERR! peer react@"^18.2.0" from the root project npm ERR! peer react@">=16.8.0" from @testing-library/react-native@12.5.0 npm ERR! node_modules/@testing-library/react-native npm ERR! dev @testing-library/react-native@"" from the root project npm ERR! 1 more (react-native) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^18.3.1" from react-test-renderer@18.3.1 npm ERR! node_modules/react-test-renderer npm ERR! dev react-test-renderer@"^18.2.0" from the root project npm ERR! peer react-test-renderer@">=16.8.0" from @testing-library/react-native@12.5.0 npm ERR! node_modules/@testing-library/react-native npm ERR! dev @testing-library/react-native@"" 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! npm ERR! For a full report see: npm ERR! /Users/skelley/.npm/_logs/2024-05-02T15_13_43_381Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/skelley/.npm/_logs/2024-05-02T15_13_43_381Z-debug-0.log

Thank you again for your kind help!

[mdjastrzebski]

You should use react-test-renderer 18.2.0 (the same version as react package).

Please follow carefully our getting started guide. For working reference you should consult our example app.

[shawnkelleydev]

Thank you for your response!

Here are my dependencies when the installation fails:

"devDependencies": {
    "@babel/cli": "^7.24.1",
    "@babel/core": "^7.24.3",
    "@babel/eslint-parser": "^7.24.1",
    "@babel/preset-env": "^7.24.3",
    "@babel/preset-react": "^7.24.1",
    "@babel/preset-typescript": "^7.24.1",
    "@babel/runtime": "^7.24.1",
    "@tsconfig/react-native": "^3.0.3",
    "@types/react": "^18.2.67",
    "@types/react-dom": "^18.2.22",
    "core-js": "^3.36.1",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "^3.2.5",
    "react-test-renderer": "^18.2.0",
    "ts-loader": "^9.4.4",
    "typescript": "^5.4.3"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-native": "^0.73.7"
  }

Disclaimer: this is for a bare-bones component library and doesn't have a lot of react native things that might otherwise be there.

Do you see anything that would cause the problem? I'm stumped, but will continue poking around...

P.S. I just tried the same thing with react-native@0.74.0 and still no dice.

[mdjastrzebski]

If you are writing a library then this should be:

"devDependencies": {
   "react": "18.2.0",
   "react-test-renderer": "18.2.0",
   "react-native": "^0.73.7",
   // ...
},
"peerDependencies": {
    "react": "^18.2.0",
    "react-native": "^0.73.7",
    // ...
  }

Notice that:

1. devDeps should include react, react-native and react-test-renderer (including them just in peerDeps is not enough.
2. devDeps of react and react-test-renderer are pinned to exact version 18.2.0 not ^18.2.0.

On the other hand if you were to create an app, instead of a library, that would be:

"dependencies": {
   "react": "18.2.0",
   "react-native": "^0.73.7",
    // ...
},
"devDependencies": {
    "react-test-renderer": "18.2.0",
    // ...
  }

[shawnkelleydev]

Got it - I'll give that a try. Thank you very much!

[shawnkelleydev]

update - pegging the react version worked. thank you again!