NativeBase: Cannot install NativeBase due to dependencies

Description

i cannot install native-base in my expo app and it gives out the error mentioned below

CodeSandbox/Snack link


Steps to reproduce

  1. type in terminal expo install native-base or npm install native-base
  2. It gives out the error
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: ***********@1.0.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"18.0.0" from the root project
npm ERR!   peer react@"*" from native-base@3.4.16
npm ERR!   node_modules/native-base
npm ERR!     native-base@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.2.0" from react-dom@18.2.0
npm ERR! node_modules/react-dom
npm ERR!   peer react-dom@"*" from native-base@3.4.16
npm ERR!   node_modules/native-base
npm ERR!     native-base@"*" 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\user\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\user\AppData\Local\npm-cache\_logs\2022-09-20T20_36_36_193Z-debug-0.log

NativeBase Version

3.4.16

Platform

  • Android
  • CRA
  • Expo
  • iOS
  • Next

Other Platform

No response

Additional Information

eresolve-report.txt

# npm resolution error report

2022-09-20T20:37:52.850Z

While resolving: ******@1.0.0
Found: react@18.0.0
node_modules/react
  react@"18.0.0" from the root project
  peer react@"*" from native-base@3.4.16
  node_modules/native-base
    native-base@"3.4.16" from the root project

Could not resolve dependency:
peer react@"^18.2.0" from react-dom@18.2.0
node_modules/react-dom
  peer react-dom@"*" from native-base@3.4.16
  node_modules/native-base
    native-base@"3.4.16" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
  "code": "ERESOLVE",
  "current": {
    "name": "react",
    "version": "18.0.0",
    "whileInstalling": {
      "name": "******",
      "version": "1.0.0",
      "path": "C:\\Users\\user\\******\\******\\******"
    },
    "location": "node_modules/react",
    "isWorkspace": false,
    "dependents": [
      {
        "type": "prod",
        "name": "react",
        "spec": "18.0.0",
        "from": {
          "location": "C:\\Users\\user\\******\\******\\******"
        }
      },
      {
        "type": "peer",
        "name": "react",
        "spec": "*",
        "from": {
          "name": "native-base",
          "version": "3.4.16",
          "whileInstalling": {
            "name": "******",
            "version": "1.0.0",
            "path": "C:\\Users\\user\\******\\******\\******"
          },
          "location": "node_modules/native-base",
          "isWorkspace": false,
          "dependents": [
            {
              "type": "prod",
              "name": "native-base",
              "spec": "3.4.16",
              "from": {
                "location": "C:\\Users\\user\\******\\******\\******"
              }
            }
          ]
        }
      }
    ]
  },
  "currentEdge": {
    "type": "prod",
    "name": "react",
    "spec": "18.0.0",
    "from": {
      "location": "C:\\Users\\user\\******\\******\\******"
    }
  },
  "edge": {
    "type": "peer",
    "name": "react",
    "spec": "^18.2.0",
    "error": "INVALID",
    "from": {
      "name": "react-dom",
      "version": "18.2.0",
      "whileInstalling": {
        "name": "******",
        "version": "1.0.0",
        "path": "C:\\Users\\user\\******\\******\\******"
      },
      "location": "node_modules/react-dom",
      "isWorkspace": false,
      "dependents": [
        {
          "type": "peer",
          "name": "react-dom",
          "spec": "*",
          "from": {
            "name": "native-base",
            "version": "3.4.16",
            "whileInstalling": {
              "name": "******",
              "version": "1.0.0",
              "path": "C:\\Users\\user\\******\\******\\******"
            },
            "location": "node_modules/native-base",
            "isWorkspace": false,
            "dependents": [
              {
                "type": "prod",
                "name": "native-base",
                "spec": "3.4.16",
                "from": {
                  "location": "C:\\Users\\user\\******\\******\\******"
                }
              }
            ]
          }
        }
      ]
    }
  },
  "strictPeerDeps": false,
  "force": false
}

i starred all locations to keep it a secret but it gives out basically the project’s location

About this issue

Most upvoted comments

I had to add "react-dom": "18.0.0" to my package.json and then install as described in the docs.

Hi @R4Y-repo, we currently don’t support react@18 and expo 46. we are working on the fix.

Add the follow lines in your package.json file:

"overrides": {
    "react": "18.0.0"
  },

@Viraj-10 when running: npx react-native init TSProject --template react-native-template-typescript react@18.1.0 is installed

"dependencies": {
    "react": "18.1.0",
    "react-native": "0.70.3"
  },

So then when running: npm install native-base react-native-svg@12.1.1 react-native-safe-area-context@3.3.2 We get a similar error as described above.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: TSProject@0.0.1
npm ERR! Found: react@18.1.0
npm ERR! node_modules/react
npm ERR!   react@"18.1.0" from the root project
npm ERR!   peer react@"*" from native-base@3.4.19
npm ERR!   node_modules/native-base
npm ERR!     native-base@"*" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.2.0" from react-dom@18.2.0
npm ERR! node_modules/react-dom
npm ERR!   peer react-dom@"*" from native-base@3.4.19
npm ERR!   node_modules/native-base
npm ERR!     native-base@"*" 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.

Hi @Foohx, Thanks for sharing the logs seems like the issue is coming from react-native-aria. we will fix this warning soon.

Hi, @nicolinho22 @hayate I tried installing native-base in the expo project and I was able to do it. Please follow the steps:-

  1. nvm use v16.13.0.
  2. expo init my-project choose the template JS/TS
  3. cd my-project
  4. npm install native-base
  5. npx expo install react-native-svg@12.1.1
  6. npx expo install react-native-safe-area-context@3.3.2
  7. expo install @expo/webpack-config@^0.17.0 (for web support).
  8. npm start

if you still face an error please run npx native-base-info and comment the log here.

I confirm It’s working now, but still have a lot of npm warn due to native-base dependencies :

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-aria/tabs@3.0.0-alpha.2
npm WARN Found: react@18.0.0
npm WARN node_modules/react
npm WARN   react@"18.0.0" from the root project
npm WARN   84 more (@react-aria/checkbox, @react-aria/focus, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-aria/tabs@3.0.0-alpha.2
npm WARN node_modules/@react-native-aria/tabs/node_modules/@react-aria/tabs
npm WARN   @react-aria/tabs@"3.0.0-alpha.2" from @react-native-aria/tabs@0.2.8
npm WARN   node_modules/@react-native-aria/tabs
npm WARN 
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-aria/tabs@3.0.0-alpha.2
npm WARN   node_modules/@react-native-aria/tabs/node_modules/@react-aria/tabs
npm WARN     @react-aria/tabs@"3.0.0-alpha.2" from @react-native-aria/tabs@0.2.8
npm WARN     node_modules/@react-native-aria/tabs
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-stately/tabs@3.0.0-alpha.1
npm WARN Found: react@18.0.0
npm WARN node_modules/react
npm WARN   react@"18.0.0" from the root project
npm WARN   84 more (@react-aria/checkbox, @react-aria/focus, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-stately/tabs@3.0.0-alpha.1
npm WARN node_modules/@react-native-aria/tabs/node_modules/@react-stately/tabs
npm WARN   @react-stately/tabs@"3.0.0-alpha.1" from @react-native-aria/tabs@0.2.8
npm WARN   node_modules/@react-native-aria/tabs
npm WARN 
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-stately/tabs@3.0.0-alpha.1
npm WARN   node_modules/@react-native-aria/tabs/node_modules/@react-stately/tabs
npm WARN     @react-stately/tabs@"3.0.0-alpha.1" from @react-native-aria/tabs@0.2.8
npm WARN     node_modules/@react-native-aria/tabs
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/tabs@3.0.0-alpha.2
npm WARN Found: react@18.0.0
npm WARN node_modules/react
npm WARN   react@"18.0.0" from the root project
npm WARN   84 more (@react-aria/checkbox, @react-aria/focus, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/tabs@3.0.0-alpha.2
npm WARN node_modules/@react-native-aria/tabs/node_modules/@react-types/tabs
npm WARN   @react-types/tabs@"3.0.0-alpha.2" from @react-native-aria/tabs@0.2.8
npm WARN   node_modules/@react-native-aria/tabs
npm WARN   3 more (@react-aria/tabs, @react-stately/tabs, @react-stately/tabs)
npm WARN 
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/tabs@3.0.0-alpha.2
npm WARN   node_modules/@react-native-aria/tabs/node_modules/@react-types/tabs
npm WARN     @react-types/tabs@"3.0.0-alpha.2" from @react-native-aria/tabs@0.2.8
npm WARN     node_modules/@react-native-aria/tabs
npm WARN     3 more (@react-aria/tabs, @react-stately/tabs, @react-stately/tabs)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-aria/focus@3.2.3
npm WARN Found: react@18.0.0
npm WARN node_modules/react
npm WARN   react@"18.0.0" from the root project
npm WARN   84 more (@react-aria/checkbox, @react-aria/focus, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-aria/focus@3.2.3
npm WARN node_modules/native-base/node_modules/@react-aria/focus
npm WARN   @react-aria/focus@"3.2.3" from native-base@3.4.19
npm WARN   node_modules/native-base
npm WARN 
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-aria/focus@3.2.3
npm WARN   node_modules/native-base/node_modules/@react-aria/focus
npm WARN     @react-aria/focus@"3.2.3" from native-base@3.4.19
npm WARN     node_modules/native-base
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-stately/checkbox@3.0.3
npm WARN Found: react@18.0.0
npm WARN node_modules/react
npm WARN   react@"18.0.0" from the root project
npm WARN   84 more (@react-aria/checkbox, @react-aria/focus, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-stately/checkbox@3.0.3
npm WARN node_modules/native-base/node_modules/@react-stately/checkbox
npm WARN   @react-stately/checkbox@"3.0.3" from native-base@3.4.19
npm WARN   node_modules/native-base
...

I am having similar logs with react 18.1

Hi, @nicolinho22 @hayate I tried installing native-base in the expo project and I was able to do it.

Please follow the steps:-

  1. nvm use v16.13.0.
  2. expo init my-project choose the template JS/TS
  3. cd my-project
  4. npm install native-base
  5. npx expo install react-native-svg@12.1.1
  6. npx expo install react-native-safe-area-context@3.3.2
  7. expo install @expo/webpack-config@^0.17.0 (for web support).
  8. npm start

if you still face an error please run npx native-base-info and comment the log here.