React Native(v0.73) Firebase Cloud Messaging(Notifee) / Analytics / Crashlytics Latest
Tags: reactnative, javascript, firebase, frontend
Published: 2023-12-13 07:08:21

## Firebase Cloud Messaging (FCM):
Firebase Cloud Messaging is a cloud solution for messages on iOS, Android, and web applications. It allows you to send messages to devices in a reliable, efficient, and scalable way. This can include messages to single devices, groups of devices, or devices subscribed to topics.

## Firebase Analytics:
Firebase Analytics helps you understand how users interact with your app. It provides insights into user behavior, user engagement, and more.

## Firebase Crashlytics:
Firebase Crashlytics helps you track and diagnose crashes in your application, providing insights into why they occurred.

---

## Installation:
[Analytics](https://rnfirebase.io/analytics/usage#installation), [Cloud messaging](https://rnfirebase.io/messaging/usage#installation), [Crashlytics](https://rnfirebase.io/crashlytics/usage#installation), [React Native Permissions](https://www.npmjs.com/package/react-native-permissions)

```
yarn add @react-native-firebase/app @react-native-firebase/analytics @react-native-firebase/messaging @react-native-firebase/crashlytics react-native-permissions @notifee/react-native && cd ios && pod install 
```
or
```
npm i @react-native-firebase/app && @react-native-firebase/analytics && @react-native-firebase/messaging && @react-native-firebase/crashlytics && react-native-permissions && @notifee/react-native && cd ios && pod install
```

> Run `pod install --repo-update` if `pod install` fails.

---

## New Project Setup in Firebase:

Go to the [Firebase console](https://console.firebase.google.com/u/0/) to create a new project. Follow the prompts and modify them according to your needs. A new Firebase project can be initiated with three simple steps illustrated in the Firebase screenshots below.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mk85do8lsedhcerp93e7.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8iu0f82dp77b5zmnek3k.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/izmldml90d0wb7f63fpu.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uuflgqh550mdm2c0vnnq.png)
The final step is to select a Google Analytics account to be linked with the project, select settings, and accept the terms. Then, click ‘create project.’

---

## Register Your Application on Firebase Android

In the Firebase dashboard, register your Android application.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkfca8dxtsyflrjo95ko.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kz07xiok3xir8re28leg.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tptbowa8hstzsd1e2ei4.png)

---

## Android Native Configuration:

a) In [android/build.gradle](https://github.com/Ajmal0197/RNDevLearnNew/blob/main/android/build.gradle): 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikthezzb8562kwmkj9mg.png)

b) In [android/app/build.gradle](https://github.com/Ajmal0197/RNDevLearnNew/blob/main/android/app/build.gradle):
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w74e684msmo9c430rnov.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w18n6zbtzt2gg0i835kz.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6ajou0ma65bzi6lvs8e.png)

c) In [main/AndroidManifest.xml](https://github.com/Ajmal0197/RNDevLearnNew/blob/main/android/app/src/main/AndroidManifest.xml):
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y48bz10h64f1sj34tbem.png)

---
## Register Your Application on Firebase iOS
In the Firebase dashboard, register your iOS application.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkfca8dxtsyflrjo95ko.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8p680f7znv60ig3wbpck.png)

**Then Follow these steps:**
https://rnfirebase.io/messaging/usage/ios-setup

---
## iOS Native Configuration:

[AppDelegate.h](https://github.com/Ajmal0197/RNDevLearnNew/blob/main/ios/RNDevLearnNew/AppDelegate.h):
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3tsxe4mpq0366gehuhgc.png)

[AppDelegate.mm](https://github.com/Ajmal0197/RNDevLearnNew/blob/main/ios/RNDevLearnNew/AppDelegate.mm):
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vaq0ovinl6c0dkqw9y5o.png)

[Podfile](https://github.com/Ajmal0197/RNDevLearnNew/blob/main/ios/Podfile):
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eb9euiqjny6glw62a0e7.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yi9mwdc0fnne3pbnabff.png)

---

## Enabling server key from firebase dashboard:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8c90i68fcmo9vy6p6fs.png)

---

## Add [`firebase.json`](https://github.com/Ajmal0197/RNDevLearnNew/blob/main/firebase.json) configuration in root-level directory:
> You can refer [firebase_json_temp.js](https://github.com/Ajmal0197/RNDevLearnNew/blob/main/firebase_json_temp.js) to change boolean value as per requirement.

---

## USAGE [ref:](https://github1s.com/Ajmal0197/RNDevLearnNew/blob/main/src/srcFirebase/App.jsx):

[index.js](https://github.com/Ajmal0197/RNDevLearnNew/blob/main/index.js):
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8idqkbcq10wpdpr1gz1.png)

[App.jsx](https://github.com/Ajmal0197/RNDevLearnNew/blob/main/src/srcFirebase/App.jsx):
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/piqy5jojyy87kk7c6a8t.png)

Finally, add this [NotificationService.js](https://github.com/Ajmal0197/RNDevLearnNew/blob/main/src/srcFirebase/firebase/notificationConfiguration/index.js) util.

> Note: You can test cloud messaging on this [site](https://testfcm.com/) also