How to Set Up Push Notifications on React Native Cross-Platform Apps?

Set Up Push Notifications

Push notifications play a crucial role in marketing your product and making a connection with your customers. So, you must understand how react native push notifications are placed in native cross-platform apps. In this article, we are going to discuss the whole process step-by-step.

In This Article, You Will Learn


Step 1:

There are two stages: “If you own a project, or you don’t own a project”.

If you are in the former stage then all you have to do is go to the settings and add the IOS or Android platforms to any prevailing project and select the first tab that is named after your project and click on the option edit. You will see a form that will permit you to add a platform.

In the latter stage, where you don’t have a project at all, then you gotta start from scratch. You have to decide a name for your project and then choose platforms like Android, or IOS and select the option “Create”.

wonderpush push notifications

Also Read : Marketing Strategies, Tools and Entrepreneurship Advice to Grow your Business

Step 2:

The second step is different for both platforms, i.e. Android and IOS.

First, we will discuss the Android platform. If you are dealing with an Android system, then search for your server key and Sender ID in the settings of Firebase project Cloud Messaging. Then you need to visit the settings where you choose the platforms tab in your WonderPush dashboard and select Android application. Then simply paste the server key and save it.

If you are dealing with the IOS platform, then first you need to add a new certificate. For doing so, go to the website of apple developer, then head to Accounts where you need to go to Certificates, then Identifiers & Profiles and select the plus button. You need to choose Apple Push Notifications service SSL(Sandbox & Production).

Now select your app Id, then head to platforms, and choose the IOS application section title option and top up your push certificate and password by selecting the Browse option.

Make sure to check out how to operate WonderPush push notifications in both Sandbox & Production.

Step 3:

In the third step, choose the main target for your app, select the “+ Capability” from the Signing and Capabilities option. Now add the two capabilities one followed by the other that are Background Modes and Push notifications. Assure that the Remote notifications background mode is checked.

After checking the remote notifications background mode, build an extension for the push notifications service. For doing so, select File For your new target name, type WonderPushNotificationServiceExtension.

To keep Xcode and continue debugging your app, cancel Xcode activation of the new scheme instead of the extension.

Set your Deployment Target of the Notification Service Extension to 10.0

push notifications

Step 4:

After completion of step 3, you need to add the required code for step 4.

For the Android platform, you are required to configure the WonderPush Android SDK from your android app build.gradle file by opening the Android Studio.

You need to restore YOUR_CLIENT_ID and YOUR_CLIENT_SECRET with the relevant values that you will find on the Settings page.

From step 2, supersede YOUR_SENDER_ID with the Firebase Sender ID.

Ensure that your project needs Android SDK 21, as WonderPush needs it too. Now you are required to open the android/build.gradle and look for the line containing minSdkVersion.

After that, select the Sync now in the banner that is visible in your editor, or you can also click the Sync Project with Gradle files button in the toolbar and after that, you can work on your project.

For the iOS platform, you need to open up your AppDelegate and add YOUR_CLIENT_ID and YOUR_CLIENT_SECRET.

At last, your code of the Notification Service Extension that you created in Step 3 will be modified. Now you have to select YOUR_CLIENT_ID and YOUR_CLIENT_SECRET with the exact values you’ve provided to your AppDelegat.

The final step is to build and run your application and get the permission prompt you’ve configured to make use of XCode or Android Studio.

You need to wait a couple more minutes and you will receive the default welcome notification.


Setting react push notifications on your app is a great step in the world of marketing. Once you understand its importance and usage, you will be able to progress in retaining your customers and target potential ones.


WonderPush is a pre-eminent platform that provides fast and reliable push notification services for your website or applications. The react native push notification developer platform aims to support their clients to get the best user-friendly push notifications services on your website and mobile apps for Android phones, or tablets, iPhones, and iPad. WonderPush is developing powerful and well-documented SDKs that allow you to start in a few minutes.

You may also like...

Show your love by commenting!

%d bloggers like this: