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:
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
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
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
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:
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
Launch it with params:
node pushServer.js keyId teamId token appId message
Complimentary repo for the article: