react-native-google-signin/google-signin

Dependency conflict between React and React Native versions when installing @react-native-google-signin/google-signin package

Closed this issue · 9 comments

xXDeathAbyssXx commented

Context:

This issue details challenges encountered while integrating Google Sign-in with the @react-native-google-signin/google-signin library in a React Native project targeting Android 14 (Pixel Fold emulator).

Steps to Reproduce:

  1. Attempt to install @react-native-google-signin/google-signin using:
npm install --save @react-native-google-signin/google-signin
  1. Observe the error message indicating a version conflict between react-native and @react-native-google-signin/google-signin:
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: test2@1.0.0
npm error Found: react@18.3.1
npm error node_modules/react
npm error   react@"^18.2.0" from the root project
npm error   peer react@"*" from @react-native-google-signin/google-signin@12.2.1
npm error   node_modules/@react-native-google-signin/google-signin
npm error     @react-native-google-signin/google-signin@"*" from the root project
npm error   1 more (react-dom)
npm error
npm error Could not resolve dependency:
npm error peer react@"18.2.0" from react-native@0.74.2
npm error node_modules/react-native
npm error   react-native@"^0.74.2" from the root project
npm error   peer react-native@"*" from @react-native-google-signin/google-signin@12.2.1
npm error   node_modules/@react-native-google-signin/google-signin
npm error     @react-native-google-signin/google-signin@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

Expected Behavior:

Successful installation of @react-native-google-signin/google-signin and functional Google Sign-in integration within the React Native app on the Android 14 emulator.

Actual Behavior:

Installation fails due to a version conflict between react-native and @react-native-google-signin/google-signin. Upgrading react-native might not be feasible due to potential conflicts with other dependencies.

Guidance on resolving the version conflict and successfully integrating Google Sign-in with the current setup (if possible).

Current Setup:

  • Project Name: test2
  • react-native version: 0.74.2
  • @react-native-google-signin/google-signin version: Not currently installed (Installation fails due to version conflicts)
  • Android Emulator: Pixel Fold (API 34)
  • Package.json:
{
  "name": "test2",
  "version": "1.0.0",
  "main": "expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "postinstall": "patch-package"
  },
  "dependencies": {
    "@callstack/react-theme-provider": "^3.0.9",
    "@expo/metro-runtime": "~3.2.1",
    "@react-native-community/clipboard": "^1.5.1",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/stack": "^6.3.29",
    "@twotalltotems/react-native-otp-input": "^1.3.5",
    "axios": "^1.7.2",
    "expo": "~51.0.14",
    "expo-auth-session": "^5.5.2",
    "expo-barcode-scanner": "^13.0.1",
    "expo-camera": "~15.0.11",
    "expo-location": "^17.0.1",
    "expo-secure-store": "~13.0.1",
    "expo-sms": "~12.0.1",
    "expo-status-bar": "~1.12.1",
    "formik": "^2.4.6",
    "fuse.js": "^7.0.0",
    "react": "^18.2.0",
    "react-async-hook": "^4.0.0",
    "react-dom": "^18.2.0",
    "react-native": "^0.74.2",
    "react-native-camera": "^4.2.1",
    "react-native-country-picker-modal": "^2.0.0",
    "react-native-dotenv": "^3.4.11",
    "react-native-geolocation-service": "^5.3.1",
    "react-native-phone-input": "^1.3.7",
    "react-native-phone-number-input": "^2.1.0",
    "react-native-safe-area-context": "^4.10.1",
    "react-native-screens": "^3.31.1",
    "react-native-snap-carousel": "^4.0.0-beta.6",
    "react-native-web": "^0.19.12",
    "typescript": "~5.3.3",
    "yup": "^1.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "dotenv": "^16.4.5",
    "patch-package": "^8.0.0",
    "postinstall-postinstall": "^2.1.0"
  },
  "private": true
}
NijaaConvolve commented

Any update on this?

xXDeathAbyssXx commented

no one answers

semihyagli commented

I have been dealing with this issue for a while, to unblock myself I installed an earlier version of the package:
npm install @react-native-google-signin/google-signin@11.0.1
This is the latest version that worked for me.
Hope this helps (at least for now)

xXDeathAbyssXx commented

but it gives Error: RN GoogleSignin native module is not correctly linked. Please read the readme, setup and troubleshooting instructions carefully. If you are using Expo, make sure you are using Custom dev client, not Expo go., js engine: hermes an error that seems to be giving other people more lately

semihyagli commented

This package is not compatible with expo go. If you are able to install it using npm install @react-native-google-signin/google-signin@11.0.1 what you can do now is npm run android to start it on android simulator. You can also do npm run ios depending which platform are you building your app for.

Here is what I do.

  1. npm install @react-native-google-signin/google-signin@11.0.1 and successfully install the package.
  2. open a new terminal and npm run android or npm run ios . This should build the app on android or iOS and in the terminal you should be able to see the console logs. You can run both but iOS and Android, but note that only one terminal will be logging your console (but will be logging for both android and iOS).

After installing this package, you can no longer use Expo Go to debug/run you app.

I am no expert in this thing but the above got me progress relatively quickly.

xXDeathAbyssXx commented

This package is not compatible with expo go. If you are able to install it using npm install @react-native-google-signin/google-signin@11.0.1 what you can do now is npm run android to start it on android simulator. You can also do npm run ios depending which platform are you building your app for.

Here is what I do.

  1. npm install @react-native-google-signin/google-signin@11.0.1 and successfully install the package.
  2. open a new terminal and npm run android or npm run ios . This should build the app on android or iOS and in the terminal you should be able to see the console logs. You can run both but iOS and Android, but note that only one terminal will be logging your console (but will be logging for both android and iOS).

After installing this package, you can no longer use Expo Go to debug/run you app.

I am no expert in this thing but the above got me progress relatively quickly.

So if I wanted to make my app functional for iOS and Android, won't it work with Expo? something that is in the expo documentation?

semihyagli commented

This package is not compatible with expo go. If you are able to install it using npm install @react-native-google-signin/google-signin@11.0.1 what you can do now is npm run android to start it on android simulator. You can also do npm run ios depending which platform are you building your app for.
Here is what I do.

  1. npm install @react-native-google-signin/google-signin@11.0.1 and successfully install the package.
  2. open a new terminal and npm run android or npm run ios . This should build the app on android or iOS and in the terminal you should be able to see the console logs. You can run both but iOS and Android, but note that only one terminal will be logging your console (but will be logging for both android and iOS).

After installing this package, you can no longer use Expo Go to debug/run you app.
I am no expert in this thing but the above got me progress relatively quickly.

So if I wanted to make my app functional for iOS and Android, won't it work with Expo? something that is in the expo documentation?

I am not sure if I understood your question well, but will try to respond to what I understood. Let me first set the terminology.

"Expo" and "Expo Go" are kinda two different things here.

As you can read here: https://react-native-google-signin.github.io/docs/setting-up/expo

This package contains some native code and your app will not run in the "expo go" simulator app. However, you can still use Expo to build your app (both locally or on the cloud).

When you are done developing your app, you will build a .apk file (on android) or .ipa file (on iOS) which will run on their own in their respective platform.

However, as you develop, you can no longer use Expo Go (after installing this package). To run simulation of the app, you will need to utilize npm run android or npm run ios. They will essentially simulate your app, but it will take somewhat longer to start the simulation as npm will build your app first.

People usually leave the authentication flow to the end because of this caveat, but there is nothing wrong to start with it either. In the former case, you need to do a lot of aftermath, in the second the pain point will be simulation of your app.

vonovak commented

Hello and thanks for reporting,
this library doesn't dictate specific version of react: see here.

Please create a Minimal, Reproducible Example that we can see the issue with. The most effective reproducible examples are created by starting a new project from scratch and adding in only the necessary pieces to reproduce the issue. Please open a new issue with that.
Thank you 🙂

github-actions commented

👋 @xXDeathAbyssXx, sorry you're having an issue. As the issue template explains, we require that you provide a runnable example that reproduces your issue (please read the issue template).
The reason is that maintainers do not have time to try reproduce bugs themselves. Please try to minimize the superfluous code and focus only on reproducing the bug.
Please create a new issue with this and we'll be happy to review it! If you're hitting a hard wall, you may consider paid assistance.