Firebase Push Notifications for React Native Android Apps with ExpoKit

How to setup FCM in React Native android apps plus additional steps to make it work with ExpoKit

React Native makes mobile development a lot easier than it used to be and Expo made it even easier by taking care of the native Android and iOS code and implementing a lot of features out of the box. However, some features are not available in Expo and require detaching to ExpoKit. One of those features is Firebase Cloud Messaging (FCM) which cannot be implemented in iOS using Expo. FCM is essential for marketing purposes and for notifications, hence, the feature was required for multiple projects at WebOps. In this article, I will explain why FCM was used for push notifications, how it was implemented and since many errors were encountered implementing the feature for Android, I will explain some modifications to avoid those errors.

Expo Push Notifications

Expo provides 2 ways of implementing push notifications without detaching:

1. Expo Push Notifications.
2. FCM Push Notifications for Android (Does not work on iOS)

• For the first option, the notifications could be sent with a simple HTTP request containing the device’s token without a key for the sender, which was a security issue since anybody who has the token can send the notification.
• The second option would work only for Android and it uses the normal Expo Notifications API on the client side. Hence, using it would mean that different APIs would be used for Android and iOS to do the same thing and that is why we decided not to use it.

Why FCM?

So far, we have decided not to use Expo’s push notifications service but there are still a lot of options. However, FCM was the best option for the following reasons:

1. It is free.
2. It is cross-platform.
3. It is highly customizable.
4. It is maintained by google.

Now let’s move to the implementation.

Setting up FCM

This guide was tested using a detached expo project using SDK v27.0.0. The guide will explain:

1. Setting up an android app on firebase console.
2. Downloading and setting up npm package “react-native-fcm”.
3. Additional steps required to make the app work on Andorid with ExpoKit.

1. Setting Up an Android App on Firebase Console

The first step is to setup an android app which is done as follows:

1. Go to Firebase Console
2. Click on “Add Project”
3. A new popup will appear. Type the project’s name and click “Create Project”
4. In the following screen, click on “Add Firebase to your Android app”
5. Enter your app’s package name (Found in app.json expo.android.package)
6. Click on “Register App” and download the google-services.json file into ./android/app

You can skip adding firebase SDKs as we will do that later.

2. Setting up react-native-fcm

react-native-fcm is an npm package for FCM. The package can be found here.

1. Go to the Package’s releases here. We will use the latest release (v16.0.0 at the time of writing this article).
2. Copy the link of the tar.gz file of the chosen release.
3. Open your package.json and add "react-native-fcm": "[RELEASE-URL]" to your dependencies replacing the [RELEASE-URL] with the link copied in the previous step.
4. Open your terminal inside the project’s root directory and run npm install
5. After the installation is finished, run react-native link react-native-fcm
6. Make sure that the Android Configutaion steps in the package’s readme are fulfilled.

This would have been enough to make it work if we have not been using Expokit. The next section includes some extra modifications required to make it work on Expokit.

3. Additional Modifications to make FCM Work With ExpoKit

That’s it! Now FCM should work fine on your app. I hope this guide helps you and save your time and effort.

FCM is a powerful tool for marketing and managing notifications and eventhough Expo does not provide it out of the box, it can still be implemented with some effort and Expo still provides a lot of other important tools that would otherwise require more work on the developer’s side.