4 Steps to Setup Push Notifications On React Native Cross-Platform Apps

Push Notifications on React Native is an open-source mobile application framework. It is a tool that has revolutionized the field of application development for Android and iOS. One of its unique qualities is to run in the background on end-device. It allows effective communication with the native platform.

React Native Push Notifications

4 Easy StepsWithin a short time, it will surpass HTML. The combination of React Native cross-platform apps and React Native push notifications are always touching new boundaries.

If you are looking forward to expanding your business, then React Native push notifications are one of the best options.

Now, you must probably be wondering how to use this service to run your business?

Well, here are 4 steps to set up push notifications on React Native cross-platform apps.

Before we move forward with the steps, let us discuss some prerequisites.

• NodeJS, v8.3, or ulterior.
• React Native

react-native-cli >= 2.0.0

react-native >= 0.59.0

• For the Android platform: emulator with installed and updated Google play services, firebase account, android studio.
• For the iOS platform: Xcode, iOS device, iOS push certificate.

Note: expo users need to eject the app. For it goes to the project’s folder and runs “expo eject.”

Related Article: Which is more effective between Push Notifications and SMS Notification?

Step 1: Create a project

• For this, simply click on the “new project” and fill the name.
• Select the platform from the given options, as shown.

Image name: 4-steps-to-setup-react-native-push-notification-1.jpg

Image alt: Choose your platform

• Click on “Create.”

Step 2: Setup Push credentials

Android

• Add firebase credentials
• For this first, find out your “server key” and “sender ID.” For this, click the settings icon and go to “Project settings” followed by the “cloud messaging tab.”

Image name: 4-steps-to-setup-react-native-push-notification-2.jpg

Image alt: select the “cloudHGxsoi messaging tab.”

• Now go the service provider’s dashboard in the settings page and select the “platforms” tab followed by the “android application.”

Image name: 4-steps-to-setup-react-native-push-notification-3.jpg

Image alt: Click on “Android application.”

• Finally, place the server key and hit “save.”

iOS

•  For iOS, you need to upload a push certificate.
•  For this first, go to settings and click on the “iOS application.”
• Now select the “browse” option and fill your push certificate.

Image name: 4-steps-to-setup-react-native-push-notification-4.jpg

Image alt: Browse to choose push certificate

Also Read: What is a Runtime Error? Definition, Causes, and More!

Step 3: Add Software Development Kit (SDK)

• Create your React Native application.
• Now add the service provider’s React Native SDK.

npm install react-native-wonder push –save

• Now link the service provider’s React Native SDK.

react-native link react-native-wonder push

iOS

•  Open xcworkspace file of the project in Xcode

open ios/*.xcworkspace

• Now for adding device capabilities, select the main target of the app and then click on “+ capability” under “signing and capabilities.”

Image name: 4-steps-to-setup-react-native-push-notifications-5.jpg

Image alt: Select “+ capability.”

• Add “background modes” and “push notification.”

Image name: 4-steps-to-setup-react-native-push-notification-6.jpg

Image alt: Add “background modes” and “push notification.” 

• Make sure to select “remote notifications.”

Image name: 4-steps-to-setup-react-native-push-notifications-7.jpg

Image alt: Check background “Remote notifications.”

• Now create a notification service extension by going through Xcode.

Image name: 4-steps-to-setup-react-native-push-notification-8.jpg

Image alt: Click on “Notification Service Extension.”

• Now enter WonderPushNotificationServiceExtension as the name of your new target.

Image name: 4-steps-to-setup-react-native-push-notifications-9.jpg

Image alt: fill the product name

• After this, Xcode will prompt to activate a new scheme. You need to click on “cancel.”

Image name: 4-steps-to-setup-react-native-push-notifications-10.jpg

Image alt: Click ”Cancel.”

• Now set the “Deployment Target” of Notification Service Extension to 10.0.

Image name: 4-steps-to-setup-react-native-push-notification-11.jpg

Image alt: Set deployment target

• Finally, edit ios/Podfile and add the following at the bottom.

Image name: 4-steps-to-setup-react-native-push-notifications-12.jpg

Image alt: code

Also Read: What’s more Important than your Business Card?

Step 4: Add the required code

Go to the settings page and press on the “platforms tab” to take note of the Client ID and  Client Secret.

Image name: 4-steps-to-setup-react-native-push-notifications-13.jpg

Image alt: Click “platforms tab.”

Now add the code that prompts users to subscribe to service.

Image name: 4-steps-to-setup-react-native-push-notifications-14.jpg

Image alt: Add code

Android

• Go to the android studio to configure android SDK from android/app/build.gradle file.

Image name: 4-steps-to-setup-react-native-push-notifications-15.jpg

Image alt: Configure Android SDK

• Replace YOUR_CLIENT_ID and YOUR_CLIENT_SECRET with values that you found in the “settings” page.
• Replace YOUR_SENDER_ID with firebase sender ID, as presented in step 2.
• Finally, click “sync now” and start building a project.

iOS

• Go to AppDelegate to add code and adapt YOUR_CLIENT_ID and YOUR_CLIENT_SECRET with values, as noted previously.

Image name: 4-steps-to-setup-react-native-push-notifications-16.jpg

Image alt: Add the code

• Finally, the code of Notification Service Extension created in step 3 will modify by the service provider.
• Now replace the content of NotificationService.swift with the content provided below.

Image name: 4-steps-to-setup-react-native-push-notifications-17.jpg

Image alt: Replace the content

Finally, use Xcode or Android Studio to build and run an application and get the permission prompt.

Image alt: Permission prompt

Now wait for some minutes, and you will receive default welcome notification from the service provider.

Conclusion

The amalgamation of React Native, Cross-Platform Apps with React Native push notification,have become a necessity for all the businesses. If you are probably thinking of engaging or re-engaging Users, this is the best time to dive in before you lose to your competitors.

Author Bio: Wonderpush provides you React Native push notification services at an economical price. This service is fast and capable enough to give your business, a new identity