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. (APNs) is the centerpiece of the remote notifications feature. It is a service for app developers to propagate information to iOS devices. Apple Push Notification service Application backend developer is indicated as the 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 . Provider 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 command. Although these instructions may be applied to the Expo project. We use package from the . react-native init ejected PushNotificationIOS official RN API Step 1: Manually Link PushNoficationIOS library Regarding official docs, you need to: Find node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj 2. Drag this file to your project on Xcode (usually under the group on Xcode) Libraries 3. Click on your main project file (the one that represents the ), select and drag the static library from the folder inside the Library you are importing to .xcodeproj Build Phases Products Link Binary With Libraries Step 2: Augment AppDelegate content At the top of your : AppDelegate.m #import <React/RCTPushNotificationManager.h> And then in implementation add the following: AppDelegate.m Step 3: Adjust the Xcode project settings Open project in settings Xcode, choose Capabilities settings Step 4: Finally write some code :) Now you may put in root component of your app to make sure it will be mounted when the app is started. This component handles all received push notifications when the app is opened or closed. <PushNotificationHandler /> Part II: Server Side Requirement: You should have a valid (100$/year). Apple Developer Program Membership 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 and click at the bottom of the page. APNs Continue Apple will generate a key file containing your APNs Auth Key. .p8 Save , you will need it for the next step. Key ID Now, click on Certificates/All and download your certificate with extension. Save this file as and put to repo’s root folder. .cer ios_development.cer Also find and save To get it, login to . In the top right corner click under your name -> View Account. Team ID. developer.apple.com Step 3: Send a Push notification In the sample repo you will find . Launch it with params: pushServer.js node pushServer.js keyId teamId token appId message Complimentary repo for the article: github.com ProductCrafters/react-native-ios-push-notifications-example Sample iOS app and server script to send and receive push notifications on React-Native Used article: https://eladnava.com/send-push-notifications-to-ios-devices-using-xcode-8-and-swift-3/ 🚀 . We help US startup founders to bring their ideas to life. If you need some help, send a message ✉️ My team uses JS and React and React Native to build production apps over 3 years oleg@productcrafters.io

Apple

Facebook

OneSignal

Target

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

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

Too Long; Didn't Read

Companies Mentioned

Oleg Kalyta

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Companies Mentioned

Oleg Kalyta

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES