Firebase Crashlytics : Integration in React Native App

Crashlytics is one of the powerful tool from the Firebase that helps us to track and analyze the crashes in real-time, by enabling the Crashlytics in your App you can determine the root cause of the crash and you can understand the impact on your users hence you can keep your app stable authentic.
In this article you can check the steps for configuration and the sample code to test the crash in real-time

Setting Up Crashlytics in Your React Native App
Step 1 : Install Firebase SDK
npm install @react-native-firebase/app
npm install @react-native-firebase/crashlytics

Step 2 : Setup Firebase Project
Next, you need to go to firebase console and create a new project and follow the instructions to generate a google-services.json file for Android or a GoogleService-Info.plist file for iOS.
if you have already has a project running in firebase you can just download the google-services.json for Android and GoogleService-Info.plist for iOS

Step 3: Integrate Crashlytics in your app
This is one of the important and exciting part of integration
copy the google-services.json fie you downloaded in firebase to the following path
/android/app/.
Next open android/build.gradle file and add the following dependency:

// ..
buildscript {
// ..
dependencies {
// ..
classpath 'com.google.firebase:firebase-crashlytics-gradle:3.0.0'
}
// ..
}
Next open android/app/build.gradle file and add the following plugins

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // apply after this line
apply plugin: 'com.google.firebase.crashlytics'
// ..

Step 4 : Add a file to the base folder of your project with the name firebase.json and copy the following content

{
"react-native": {
"crashlytics_debug_enabled": true
}
}

Step 5 : Rebuild the project

npx react-native run-android

Step 6 : Force a test crash

Add the following code in your app :

`import React, { useEffect } from 'react';
import { View, Button } from 'react-native';
import crashlytics from '@react-native-firebase/crashlytics';

async function onSignIn(user) {
crashlytics().log('User signed in.');
await Promise.all([
crashlytics().setUserId(user.uid),
crashlytics().setAttribute('credits', String(user.credits)),
crashlytics().setAttributes({
role: 'admin',
followers: '13',
email: user.email,
username: user.username,
}),
]);
}

export default function App() {
useEffect(() => {
crashlytics().log('App mounted.');
}, []);

return (

title="Sign In"
onPress={() =>
onSignIn({
uid: 'Aa0Bb1Cc2Dd3Ee4Ff5Gg6Hh7Ii8Jj9',
username: 'Pradeep',
email: '[e-mail]',
credits: 42,
})
}
/>
crashlytics().crash()} />

);
}`

Happy Coding !!