The WonderPush Developer Hub

Welcome to the WonderPush developer hub. You'll find comprehensive guides and documentation to help you start working with WonderPush as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

React Native Push Notifications

How to set up WonderPush push notifications on React Native cross-platform apps

Install push notifications in React Native apps in 4 steps.

Setting up push notifications for your React Native app is easy. Push notifications are the ideal solution to re-engage users and bring them back to your app.

Estimated setup time: 15 minutes.

Prerequisites

You'll need:

  • NodeJS, v8.3 or ulterior
  • React Native
    react-native-cli >= 2.0.0
    react-native >= 0.59.0
  • For Android:
    • A device or emulator with Google Play services installed and up-to-date.
    • A Firebase account.
    • Android Studio.
  • For iOS:
    • XCode
    • An iOS device such as an iPhone or an iPad
    • An iOS Push Certificate (here's a how to obtain it)

🚧

Expo users

If you're using expo, you'll need to "eject" your app. Simply go into your project's folder and run:

expo eject

If you haven't already, sign up for a free account on wonderpush.com.

Step 1. Create your project

Click on New Project:

Choose a name for your project and select Android and iOS as platforms then click Create:

πŸ“˜

Already have a project?

Just add the Android or iOS platforms to any existing project by going to Settings, selecting the first tab named after your project and clicking Edit. You'll be presented a form that lets you add a platform.

Step 2. Setup your push credentials

Android - Add your Firebase credentials

  1. Locate your Server Key and Sender ID in the Firebase project Cloud Messaging settings.


In your Firebase project console, click the gear icon (βš™οΈ) and select Project settings and go to the Cloud Messaging tab.

  1. Go to your WonderPush dashboard, in the Settings page, select the Platforms tab and click on Android application.
  1. Paste the Server key.
  2. Click Save.

iOS - Upload your push certificate

Go to Settings / Platforms, click the iOS application section title and fill in:

  • your push certificate by clicking the Browse button,
  • the push certificate password if appropriate.

πŸ“˜

Be sure to check how to use WonderPush in both Sandbox & Production.

Step 3. Add the SDK

Create your React Native application if you haven't already, see the official React Native guide and click React Native CLI Quickstart, for more details.

Add the WonderPush React Native SDK:

npm install react-native-wonderpush --save

Link the WonderPush React Native SDK:

react-native link react-native-wonderpush

For iOS

Open the xcworkspace file of your project in Xcode:

open ios/*.xcworkspace

Add device capabilities

Select your app's main target and, under the Signing and Capabilities tab, click β€œ+ Capability”

Add the following capabilities, one by one:

  • Background Modes,
  • Push Notifications.

Make sure the Remote notifications background mode is checked:

Create the notification service extension

In Xcode, select File / New / Target..., and choose Notification Service Extension:

Enter WonderPushNotificationServiceExtension as the name for your new target:

When Xcode prompts you to activate the new scheme, answer Cancel to keep Xcode building and debugging your app instead of the extension:

If you activate by mistake, switch back to your app's scheme from the dropdown menu located next to the play button.

Set the Deployment Target of your Notification Service Extension to 10.0:

Edit the file ios/Podfile and add the following at the bottom:

target 'WonderPushNotificationServiceExtension' do
  platform :ios, '10.0'

  # Pods for WonderPushNotificationServiceExtension
  pod 'WonderPushExtension', '~> 3.0'
end
cd ios
pod install
open *.xcworkspace

πŸ“˜

If you get the following message: CocoaPods could not find compatible versions for pod "WonderPush", just run pod update and pod install again.

Step 4. Add required code

Take note of your Client ID and Client Secret from the Platforms tab of the Settings page:

Let's add the code that will prompt users to subscribe to push notifications. We recommend you place this code in a more suitable place in the user journey, but we'll do it at launch time for now. In your App class:

import React from 'react';

// Import WonderPush
import WonderPush from 'react-native-wonderpush';

const App: () => React$Node = () => {
  // Prompts users to subscribe to push notifications.
  // Move this in a more suitable place in the user journey.
  WonderPush.subscribeToNotifications();

  return (
    // ...
  );
};

export default App;
import WonderPush from 'react-native-wonderpush';

export default class App extends Component {

  constructor() {
    super();
    // Prompts users to subscribe to push notifications.
    // Move this in a more suitable place in the user journey.
    WonderPush.subscribeToNotifications();
  }
  
  render() {
    // ...
  }

}

For Android

Open the Android Studio and configure the WonderPush Android SDK from your android/app/build.gradle file:

android {
  defaultConfig {
    // Note that it's important to keep the double quotes as part of the third argument
    // as this represents a string in Java code
    buildConfigField 'String', 'WONDERPUSH_CLIENT_ID', '"YOUR_CLIENT_ID"'
    buildConfigField 'String', 'WONDERPUSH_CLIENT_SECRET', '"YOUR_CLIENT_SECRET"'
    buildConfigField 'String', 'WONDERPUSH_SENDER_ID', '"YOUR_SENDER_ID"'
  }
}

Replace YOUR_CLIENT_ID and YOUR_CLIENT_SECRET with the appropriate values you find in the Settings page.
Replace YOUR_SENDER_ID with the Firebase Sender ID from step 2.

Click Sync now in the banner that showed up in your editor, or click the Sync project with Gradle files button in the toolbar.
Then build your project.

For iOS

Open your AppDelegate and add the following, adapting YOUR_CLIENT_ID and YOUR_CLIENT_SECRET with the values you've noted above:

import WonderPush

func application(_ application: UIApplication, willFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
        WonderPush.setClientId("YOUR_CLIENT_ID", secret: "YOUR_CLIENT_SECRET")
        WonderPush.setupDelegate(for: application)
        WonderPush.setupDelegateForUserNotificationCenter()
        return true
}
#import <WonderPush/WonderPush.h>
  
- (BOOL)application:(UIApplication *)application willFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [WonderPush setClientId:@"YOUR_CLIENT_ID" secret:@"YOUR_CLIENT_SECRET"];
    [WonderPush setupDelegateForApplication:application];
    [WonderPush setupDelegateForUserNotificationCenter];
    return YES;
}

Finally, we'll modify the code of the Notification Service Extension you created in Step 3. Replace the whole contents of NotificationService.swift or (NotificationService.h and NotificationService.m for Objective-C) with:

import WonderPushExtension

class NotificationService: WPNotificationServiceExtension {
}
#import <WonderPushExtension/WonderPushExtension.h>

@interface NotificationService : WPNotificationServiceExtension

@end
#import "NotificationService.h"

@implementation NotificationService

@end

Receive your first push!

Use XCode or Android Studio to build and run your application and get the permission prompt you've configured:

Wait a couple of minutes and receive the default welcome notification:

πŸ‘

Congratulations, you're done!

Updated 6 months ago

React Native Push Notifications


How to set up WonderPush push notifications on React Native cross-platform apps

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.