🔥 Integrate Firebase Crashlytics in React Native (Expo)

💡 What is Firebase Crashlytics?

Firebase Crashlytics is a real-time crash reporting tool that helps developers:

• 📉 Track and diagnose app crashes and errors
• 🔍 Understand the root causes using detailed stack traces
• 📊 Monitor the stability of your app in production

It's essential for maintaining a stable and reliable user experience post-deployment.

---

❓ Why Should You Use Crashlytics?

🚫 Without Crashlytics:

• You won't know if your app crashes in production
• Users are unlikely to report every crash manually

✅ With Crashlytics:

• Get real-time crash reports
• See detailed logs, device info, and contextual data
• Prioritize and fix high-impact issues quickly

---

🛠️ Step-by-Step Integration Guide

---

✅ 1. Create a Firebase Project

1. Go to Firebase Console and sign in or create an account.

2. Click on "Get started by setting up a Firebase project"
   

3. Enter your project name → Click Continue
   
   

4. Allow Analytics
   
   

5. Enable Google Analytics (optional) → Accept terms
   
   

6. Click "Create Project"
   
   

7. Wait for project creation
   
   

8. Click "Continue" to see the project overview
   
   

---

📱 2. Register Your App in Firebase Console

Click on the Android or iOS icon to add your app.

🔹 For Android:

• Enter your Package Name (e.g., com.mycorp.myapp)

🔹 For iOS:

• Enter your Bundle ID (must match the ID in Xcode)

---

📥 Download Configuration Files:

• Android: google-services.json
• iOS: GoogleService-Info.plist

💡 To add another platform later, click "Add App" in Firebase Console and repeat the steps.

---

⚛️ 3. Configure React Native App (Expo + EAS)

Install Firebase and Crashlytics Dependencies

npx expo install @react-native-firebase/app
npx expo install @react-native-firebase/crashlytics

🧩 4. Update app.json or app.config.js

Add Firebase configuration and plugins:

{
  "expo": {
    "android": {
      "googleServicesFile": "./google-services.json",
      "package": "com.mycorp.myapp"
    },
    "ios": {
      "googleServicesFile": "./GoogleService-Info.plist",
      "bundleIdentifier": "com.mycorp.myapp"
    },
    "plugins": [
      "@react-native-firebase/app",
      "@react-native-firebase/auth",
      "@react-native-firebase/crashlytics",
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ]
    ]
  }
}

⚙️ 5. Prebuild Native Code

Run this to generate native iOS and Android code:

npx expo prebuild --clean

🔁 Always do this after adding or removing native packages like Firebase modules.

🚀 6. Build or Run the App

Using EAS Build:

eas build --platform android
eas build --platform ios

Or Run Locally:

npx expo run:android
npx expo run:ios

🧪 7. Test Crashlytics Integration

To test a crash, add this to your code:

import crashlytics from '@react-native-firebase/crashlytics';

crashlytics().log('Manually testing crash');
crashlytics().crash(); // This will cause a test crash

⚠️ Important Notes & Limitations

🚫 Crashlytics does NOT work in Expo Go

• Expo Go does not support native Firebase modules like Crashlytics.
• You must use EAS Build, a custom development client, or run a local native build to use Crashlytics.

Comments

[rudresh1]

👍