导入react-native-google-signin时出现TypeError: Cannot read property 'number' of undefined错误

Hey there, I’ve run into this exact error before and here are the steps that fixed it for me and many others—it’s almost always related to version mismatches, incomplete linking, or missing configuration. Let’s walk through the fixes one by one:

1. Verify Version Compatibility #

First, make sure your react-native-google-signin version plays nice with your React Native (RN) version. The newer, maintained package (@react-native-google-signin/google-signin) has strict compatibility rules:

• Run this command to check your current versions:

  npm list react-native @react-native-google-signin/google-signin
  

• Check the library’s README for the exact RN version it supports (e.g., RN 0.60+ is required for recent releases). If your RN is outdated, either upgrade RN or use an older version of the sign-in library that matches your setup.

2. Reinstall and Relink the Dependency #

Broken installations or failed auto-linking are common triggers. Let’s start fresh:

• Uninstall the existing package(s):

  npm uninstall react-native-google-signin @react-native-google-signin/google-signin
  

• Install the official maintained package (note the new scope):

  npm install @react-native-google-signin/google-signin
  

• For RN < 0.60 (manual linking required):

  react-native link @react-native-google-signin/google-signin
  

• For RN 0.60+ (auto-linking):
  • On iOS, run pod install to ensure native dependencies are properly set up:

    cd ios && rm -rf Pods Podfile.lock && pod install && cd ..
    

3. Clear All Caches and Build Files #

Stale cache or build artifacts often cause weird errors like this. Clear everything and rebuild from scratch:

• Clear npm cache:

  npm cache clean --force
  

• Reset Metro bundler cache:

  npx react-native start --reset-cache
  

• iOS: Delete the build folder to remove stale artifacts:

  rm -rf ios/build
  

• Android: Delete the app build folder:

  rm -rf android/app/build
  

4. Double-Check Native Configuration #

Missing or incorrect native setup can also trigger this error:

• Android:
  • Ensure the Google Maven repository is added to android/build.gradle:

    repositories {
        google()
        // ... other repositories
    }
    

  • Verify your android/app/build.gradle includes the sign-in dependency (auto-linking should handle this, but it’s worth a quick check).
  • Make sure your AndroidManifest.xml has the correct client ID meta-data if required.
• iOS:
  • Add the Google Sign-In URL scheme to Info.plist:

    <key>CFBundleURLTypes</key>
    <array>
      <dict>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>com.googleusercontent.apps.YOUR_CLIENT_ID</string>
        </array>
      </dict>
    </array>
    

5. Ensure Proper Initialization #

Don’t call sign-in methods before initializing the library. Set up the config early in your app:

import { GoogleSignin } from '@react-native-google-signin/google-signin';

// Initialize in your root App component or a dedicated config file
GoogleSignin.configure({
  scopes: ['email', 'profile'],
  webClientId: 'YOUR_WEB_CLIENT_ID_FROM_GOOGLE_CLOUD',
  iosClientId: 'YOUR_IOS_CLIENT_ID_FROM_GOOGLE_CLOUD', // Only needed for iOS
});

• Initialize this before rendering components that use Google Sign-In—for example, in useEffect (functional components) or componentDidMount (class components).

6. Check for Conflicting Dependencies #

If you have other Google-related libraries (like react-native-firebase with Google auth), they might conflict with react-native-google-signin. Try temporarily removing other Google packages to see if the error goes away.

If none of these steps work, consider upgrading your React Native version to match the sign-in library’s requirements, or open an issue on the library’s GitHub repo with your exact version details and full error logs.

内容的提问来源于stack exchange，提问作者Anamul Haque