Hackernoon logoComplete Guide: Receive Push Notifications in React-Native iOS app by@oleg2014

Complete Guide: Receive Push Notifications in React-Native iOS app

Author profile picture

@oleg2014Oleg Kalyta

Image from OneSignal
App publishers can send push notifications at any time; users don’t have to be in the app or using their devices to receive them. They can do a lot of things; for example, they can show the latest sports scores, get a user to take an action, such as downloading a coupon or let a user know about an event, such as a flash sale. (by Urbanairship)

Adding push notifications to your app is not only a great way to improve the user experience. If used smart, it also helps to:

  • Stimulate user engagement
  • Retain users
  • Increase conversion rates

Recently our team implemented push-notifications for React-Native iOS app.

We spent a couple days to get this fully working for most common scenarios. The goal of this article is to save this time forΒ you.
Apple Push Notification service (APNs) is the centerpiece of the remote notifications feature. It is a service for app developers to propagate information to iOS devices.

Application backend developer is indicated as the Provider on scheme above. We use APNs to propagate notifications to target devices. To achieve it, we need to ask user’s permission. When the user allows a permission request, the mobile app subscribes to notifications on APN. As a result, APN sends to the client a unique device token.

Now, this token has to be transferred to the backend and stored. When the backend decides to send a push notification, it should pass this token to the APN.

In this article, we implement push-notifications sending and handling in React-Native iOS app (RN 0.57)

Part I: MobileΒ App

Our current project is built with native code, using react-native init command. Although these instructions may be applied to the ejected Expo project. We use PushNotificationIOS package from the official RN API.

Step 1: Manually Link PushNoficationIOS library

Regarding official docs, you need to:

  1. Find node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj

2. Drag this file to your project on Xcode (usually under the Libraries group on Xcode)

3. Click on your main project file (the one that represents theΒ .xcodeproj), select Build Phases and drag the static library from the Products folder inside the Library you are importing to Link Binary With Libraries

Step 2: Augment AppDelegate content

At the top of your AppDelegate.m:
#import <React/RCTPushNotificationManager.h>

And then in AppDelegate.m implementation add the following:

Step 3: Adjust the Xcode projectΒ settings

Open project in settings Xcode, choose Capabilities settings

Step 4: Finally write some codeΒ :)

This component handles all received push notifications when the app is opened or closed.Β 
Now you may put <PushNotificationHandler /> in root component of your app to make sure it will be mounted when the app is started.

Part II: ServerΒ Side

Requirement: You should have a valid Apple Developer Program Membership (100$/year).

Step 1: Ensure the correct Bundle Identifier

Check in XCode/General project settings if the, Bundle Identifier is the same as you have in Apple Store Connect/App Information

Step 2: Generate APNs AuthΒ Key

To be able to use APN, you need to create and use app key for authorization.
In your Apple Developer Account, open Keys:

Click on + Icon

In the next page, enter a name for your key, enable APNs and click Continue at the bottom of the page.

Apple will generate aΒ .p8 key file containing your APNs Auth Key.

Save Key ID, you will need it for the next step.

Now, click on Certificates/All and download your certificate withΒ .cer extension. Save this file as ios_development.cer and put to repo’s root folder.

Also find and save Team ID. To get it, login to developer.apple.com. In the top right corner click under your name -> View Account.

Step 3: Send a Push notification

In the sample repo you will find pushServer.js.Β 
Launch it with params:
node pushServer.js keyId teamId token appId message

Complimentary repo for the article:

Used article:
https://eladnava.com/send-push-notifications-to-ios-devices-using-xcode-8-and-swift-3/

πŸš€ My team uses JS and React and React Native to build production apps over 3 years. We help US startup founders to bring their ideas to life. If you need some help, send a message βœ‰οΈ oleg@productcrafters.io

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.