Build WordPress Client App with React Native #24 : Setup Firebase Push notification [iOS]

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

for setup push notification in iOS require apple developer account (99$/year) first we get a certificate from developer dashboard then add the certificate to firebase then add Firebase messaging pod then activate push notification on iOS

Configuring APNs with FCM

The Firebase Cloud Messaging APNs interface uses the Apple Push Notification service (APNs) to send messages up to 4KB in size to your iOS app, including when it is in the background.

To enable sending Push Notifications through APNs, you need:

An Apple Push Notification Authentication Key for your Apple Developer account. Firebase Cloud Messaging uses this token to send Push Notifications to the application identified by the App ID. A provisioning profile for that App ID. You create both in the Apple Developer Member Center.

Create the authentication key

This section describes how to generate an authentication key for an App ID enabled for Push Notifications. If you have an existing key, you can use that key instead of generating a new one.

To create an authentication key:

In your developer account, go to Certificates, Identifiers & Profiles, and under Keys, select All.

Click the Add button (+) in the upper-right corner.

Enter a description for the APNs Auth Key and under Key Services, select the APNs checkbox, and click Continue.

Click Confirm and then Download. Save your key in a secure place. This is a one-time download, and the key cannot be retrieved later.

If you’d like to verify that your APNs authentication key is set up properly and is accepted by APNs, try sending a test push notification.

add the certificate to firebase

next step we add certificate to Firebase console goto cloud messaging setting

upload certificate to app that we want then add Key ID same with Team ID

we all done on Firebase side now Firebase server can send message to APN

Setup in Device

next we goto setup our app to handle push notification

first add firebase messaging pod to Pod file

pod 'Firebase/Messaging'

then run cd ios ; pod install

activate push notification in Xcode

next we open our app on XCode then activate push notification in Signing & Capability hit + Capability

then search and add push notification

last step we activate messaging on Appdelegate.m first import Firebase Notification lib

#import "RNFirebaseNotifications.h"

then we activate lib .by add code below near Firebase lib

if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
    **[RNFirebaseNotifications configure];**
  };
    **[[UNUserNotificationCenter currentNotificationCenter] setDelegate:self];**
  return YES;
}
**- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification {
  [[RNFirebaseNotifications instance] didReceiveLocalNotification:notification];
}**

Summary

in this chapter, we learn how to setup Firebase push notification on iOS also set up a certificate and finish everything on Xcode

The post Build WordPress Client App with React Native #24 : Setup Firebase Push notification [iOS] appeared first on Kriss.