fbpx

In this series, we learn how to build a mobile app for a WordPress blog using React Native. Here, we focus on how to work with the WordPress API in order to set up our app. The most prominent topics covered in this series are the dark theme, offline mode, and infinite scroll. This series is inspired by the  React Native App Templates from instamobile.

In case you want to follow this series from the beginning or learn about a specific topic, all the chapters of the series are listed below.

  1. Build WordPress Client App with React Native #1: Overview
  2. 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
  4. 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
  6. 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
  8. Build WordPress Client App with React Native #8: Implementing SinglePost Screen
  9. Build WordPress Client App with React Native #9: implement simple share
  10. 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
  12. Build WordPress Client App with React Native #12: Categories screen
  13. 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
  15. 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
  17. 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
  19. 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
  21. 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
  23. Build WordPress Client App with React Native #23 : Setup Firebase Push notification [iOS]

In this chapter, we build a Firebase Cloud Messaging Android app using FirebaseMessaging API and Android Studio 1.4 or higher with Gradle. The instructions on this page assume that you have already added Firebase to your android app following these instructions.

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

Set up Firebase and the FCM SDK

  1. Make sure to include Google’s Maven repository in both your buildscript and allprojectssections inside the project-level build.gradle file.
  2. Add the dependency for the cloud messaging android library to your app-level Gradle file (usually, app/build.gradle) as shown below.

 

implementation 'com.google.firebase:firebase-messaging:20.1.0'

Edit your App Manifest File

We need to create a service that extends the  FirebaseMessagingService. This is required if you want to do any message handling beyond receiving notifications to apps working in the background. That is, you should extend this service in order to receive notifications to foreground apps, receive data payload, send upstream messages, and so on.

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

Install the RNFirebase Messaging package

Add the RNFirebaseMessagingPackageMessaging Package to your android/app/src/main/java/com/[app name]/MainApplication.java.

import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;

Now activate the package as the following code snippet show.

@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;
   }

 

Summary

In this tutorial, we learned how to add Firebase Cloud Messaging Service to an android app. Now that we have activated Firebase messaging, we can utilize the service to add notification and massaging features to our app.


Also published on Medium.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Shares