Build WordPress App with React Native #25 : Setup Firebase Push Notification [Android]
Tags: firebase, reactnative, reactnativewordpress, android
Published: 2019-12-14 12:18:12

---
title: Build WordPress App with React Native #25 : Setup Firebase Push Notification [Android]
published: true
date: 2019-12-14 03:57:29 UTC
tags: Firebase,React Native,React native Wordpress,android
canonical_url: https://kriss.io/build-wordpress-client-app-with-react-native-25-setup-firebase-push-notification-android/
cover_image: https://cdn-images-1.medium.com/max/1024/1*0qWyQ1BHUL6FoFfa-uPTYg.png
series: Build Wordpress Client App with React Native
---

This series intends to show how I build app to serve content from my WordPress blog by using react native. Since, my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme , offline mode, infinite scroll and many more. You can discover much more in this series.this inspiration to do this tutorial series came from the [React Native Mobile Templates](https://www.instamobile.io) from instamobile

In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below:

1. [Build WordPress Client App with React Native #1: Overview](https://kriss.io/build-wordpress-client-app-with-react-native-1-overview/)
2. [Build WordPress Client App with React Native #2: Setting Up Your Environment](https://kriss.io/build-wordpress-client-app-with-react-native-2-setting-up-your-environment/)
3. [Build WordPress Client App with React Native #3: Handle Navigation with React navigation](https://kriss.io/build-wordpress-client-app-with-react-native-3-handle-navigation-with-react-navigation/)
4. [Build WordPress Client App with React Native #4: Add Font Icon](https://kriss.io/build-wordpress-client-app-with-react-native-4-add-font-icon/)
5. [Build WordPress Client App with React Native #5 : Home Screen with React native paper](https://kriss.io/build-wordpress-client-app-with-react-native-5-using-react-native-paper/)
6. [Build WordPress Client App with React Native #6 : Using Html renderer and Moment](https://kriss.io/build-wordpress-client-app-with-react-native-6-using-html-renderer-and-moment/)
7. [Build WordPress Client App with React Native #7: Add pull to refresh and Infinite scroll](https://kriss.io/build-wordpress-client-app-with-react-native-7-add-pull-to-refresh-and-infinite-scroll/)
8. [Build WordPress Client App with React Native #8: Implementing SinglePost Screen](https://kriss.io/build-wordpress-client-app-with-react-native-8-implementing-singlepost-screen/)
9. [Build WordPress Client App with React Native #9: implement simple share](https://kriss.io/build-wordpress-client-app-with-react-native-9-implement-simple-share/)
10. [Build WordPress Client App with React Native #10: Setup and save bookmark](https://kriss.io/build-wordpress-client-app-with-react-native-10-setup-and-save-bookmark/)
11. [Build WordPress Client App with React Native #11: Remove and Render Bookmark](https://kriss.io/build-wordpress-client-app-with-react-native-11-remove-and-render-bookmark/)
12. [Build WordPress Client App with React Native #12: Categories screen](https://kriss.io/build-wordpress-client-app-with-react-native-12-categories-screen/)
13. [Build WordPress Client App with React Native #13: Configuring firebase in contact screen](https://kriss.io/build-wordpress-client-app-with-react-native-13-configuring-firebase-in-contact-screen/)
14. [Build WordPress Client App with React Native #14 : Implementing Settings Screen](https://kriss.io/build-wordpress-client-app-with-react-native-14-implementing-settings-screen/)
15. [Build WordPress Client App with React Native #15 : Forwarding message to inbox with Cloud function](https://kriss.io/build-wordpress-client-app-with-react-native-15-forwarding-message-to-inbox-with-cloud-function/)
16. [Build WordPress Client App with React Native #16 : Dark theme](https://kriss.io/build-wordpress-client-app-with-react-native-16-dark-theme/)
17. [Build WordPress Client App with React Native #17 : Fix react-native-render-html to change theme](https://kriss.io/build-wordpress-client-app-with-react-native-17-fix-react-native-render-html-to-change-theme/)
18. [Build WordPress Client App with React Native #18 : changing Theme](https://kriss.io/build-wordpress-client-app-with-react-native-18-manually-changing-theme/)
19. [Build WordPress Client App with React Native #19 : Notify user when offline](https://kriss.io/build-wordpress-client-app-with-react-native-19-notify-user-when-offline/)
20. [Build WordPress Client App with React Native #20 : Saving data to cache](https://kriss.io/build-wordpress-client-app-with-react-native-20-saving-data-to-cache/)
21. [Build WordPress Client App with React Native #21 : Splash Screen on iOS](https://kriss.io/build-wordpress-client-app-with-react-native-21-splash-screen-on-ios/)
22. [Build WordPress Client App with React Native #22 : Splash Screen on Android](https://kriss.io/build-wordpress-client-app-with-react-native-22-splash-screen-on-android/)
23. [Build WordPress Client App with React Native #23 : Setup Firebase Push notification [iOS]](https://kriss.io/build-wordpress-client-app-with-react-native-23-setup-firebase-push-notification-ios/)

To write your Firebase Cloud Messaging Android client app, use the `FirebaseMessaging`API and [Android Studio 1.4 or higher](https://developer.android.com/sdk/index.html?authuser=0) with Gradle. The instructions in this page assume that you have completed the steps for [adding Firebase to your Android project](https://firebase.google.com/docs/android/setup?authuser=0).

FCM clients require devices running Android 4.1 or higher that also have the Google Play Store app installed, or an emulator running Android 4.1 with Google APIs. Note that you are not limited to deploying your Android apps through Google Play Store.

## Set up Firebase and the FCM SDK

1. your project-level  **`build.gradle`**  file, make sure to include Google’s Maven repository in both your  **`buildscript`**  and  **`allprojects`**  sections.
2. Add the dependency for the Cloud Messaging Android library to your module (app-level) Gradle file (usually  **`app/build.gradle`** ):
```
implementation 'com.google.firebase:firebase-messaging:20.1.0'
```

like this image

![](https://kriss.io/wp-content/uploads/2019/12/img_5df45c61c1346.png)

## Edit your app manifest

A service that extends  **`FirebaseMessagingService`**. This is required if you want to do any message handling beyond receiving notifications on apps in the background. To receive notifications in foregrounded apps, to receive data payload, to send upstream messages, and so on, you must extend this service.

```
\<service android:name=".java.MyFirebaseMessagingService" android:exported="false"\> \<intent-filter\> \<action android:name="com.google.firebase.MESSAGING\_EVENT" /\> \</intent-filter\> \</service\>
```

like this image

![](https://kriss.io/wp-content/uploads/2019/12/img_5df45d5de4924.png)

## Install the RNFirebase Messaging package

Add the `RNFirebaseMessagingPackage` to your `android/app/src/main/java/com/[app name]/MainApplication.java:`

```
import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;
```

then activate package

```
@Override protected List\<ReactPackage\> getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List\<ReactPackage\> packages = new PackageList(this).getPackages(); // Packages that cannot be autolinked yet can be added manually here, for // example: packages.add(new AsyncStoragePackage()); packages.add(new RNFirebaseDatabasePackage()); packages.add(new RNFirebaseAdMobPackage()); packages.add(new RNFirebaseMessagingPackage()); return packages; }
```

like this image

![](https://kriss.io/wp-content/uploads/2019/12/img_5df45d5de4924.png)

 

## Summary

now we did setup on Android part we learn how to activate Firebase messaging on Android part

The post [Build WordPress Client App with React Native #25 : Setup Firebase Push Notification [Android]](https://kriss.io/build-wordpress-client-app-with-react-native-25-setup-firebase-push-notification-android/) appeared first on [Kriss](https://kriss.io).