Firebase Notification Integration in React Native 0.60+

On July 3, the RN Team announced the release of version 0.60 of RN. This release came with some beautiful changes, including AndroidX and autolinking support. If you don’t know about anything I just said take a look at this post and this changelog first.

When I saw myself lost and looking for tutorials about integrating Firebase with this new version of react native I thought to share my steps with everyone after successfully integrating it.

The initial configuration of firebase is out of scope of this tutorial so please read this post first. If you are migrating and already have everything setup, go to the next step. So let’s start!

The Invertase team released the v5.5.5 which add support to RN autolinking feature. So first add v5.5.5 to your project with npm of yarn.

npm install — save react-native-firebase@5.5.5

or

yarn add react-native-firebase@5.5.5

Android

React Native CLI automatically runs “jetifier” to migrate your Android dependencies to AndroidX before building the app, therefore use ‘react-native run-android’ on the first time you build the app instead of using android studio.

On your build.gradle file add

On your app/build.gradle add the following lines to your dependencies

In order to have notifications you need to import RNFirebaseMessagingPackage and RNFirebaseNotificationsPackage in your MainApplication.java. On v5.5.5 the RNFirebasePackage is automatically linked, so there is no need to import it like previous react native versions ( < 0.60).

At last but not least add the following lines to your AndroidManifest.xml

iOS

Add Firebase Core and Firebase Messaging on your PodFile.

There is no need to add this RNFirebase from node modules on your Podfile anymore, because it’s auto linked, so if you are migrating your app to 0.60+, remove it. Then go to your ios folder and run ‘pod install’.

On your AppDelegate.m import Firebase, RNFirebaseNotifications and RNFirebaseMessaging, add the lines inside didFinishLaunchingWithOptions to configure Firebase and notifications, and then add the methods to register notification events.

Javascript

Now that everything is setup, go to your App.js and add the following javascript code

So that’s it! If you’ve done the initial setup and followed this tutorial you will be able to test your notifications on devices and android simulators. Unfortunately testing notifications on iOS simulator isn’t supported yet. If I missed something or it not clear enough and you are still confused you can try the react native firebase docs, read this post or leave a comment at this post!

If this tutorial helped you in anyway, please recommend and share it!