Build WordPress App with React Native #25 : Setup Firebase Push Notification [Android]

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 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
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]

To write your Firebase Cloud Messaging Android client app, use the FirebaseMessagingAPI and Android Studio 1.4 or higher with Gradle. The instructions in this page assume that you have completed the steps for adding Firebase to your Android project.

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

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

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

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] appeared first on Kriss.