React Native SDK Basic integration guide

This section contains information on how to integrate the Pushwoosh React Native SDK into your application.

To integrate the Pushwoosh React Native SDK into your app, you will need the following:

Add the Pushwoosh React Native SDK dependency to your project:

npm install pushwoosh-react-native-plugin --save

In the root component of your index.js file:

• Import the pushwoosh-react-native-plugin.
• Initialize the Pushwoosh SDK.
• Call register() in your initialization logic to register for push notifications.

import Pushwoosh from 'pushwoosh-react-native-plugin';

AppRegistry.registerComponent(appName, () => App);

Pushwoosh.init({
    "pw_appid" : "__YOUR_APP_ID__" ,
    "project_number" : "__YOUR_FCM_SENDER_ID__"
});

Pushwoosh.register();

Where:

• __YOUR_APP_ID__ is the application code from the Pushwoosh Control Panel.
• __YOUR_FCM_SENDER_ID__ is the Firebase project number from the Firebase Console.

To enable Push Notifications in your project, you need to add certain capabilities.

In the Signing & Capabilities section, add the following capabilities:

• Push Notifications
• Background Modes. After adding this capability, check the box for Remote notifications.

If you intend to use Time Sensitive Notifications (iOS 15+), also add the Time Sensitive Notifications capability.

In your Runner/Info.plist set the __PUSHWOOSH_DEVICE_API_TOKEN__ key to the Pushwoosh Device API Token:

<key>Pushwoosh_API_TOKEN</key>
<string>__PUSHWOOSH_DEVICE_API_TOKEN__</string>

You must add a Notification Service Extension target to your project. This is essential for accurate delivery tracking and features like Rich Media on iOS.

Follow the native guide’s steps to add the extension target and the necessary Pushwoosh code within it.

To install dependencies for the iOS React Native project navigate to the ios folder in the terminal and run:

pod install --repo-update

Ensure that the required dependencies and plugins are added to your Gradle scripts:

Add the Google Services Gradle plugin to your project-level build.gradle dependencies:

buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
  }
}

Apply the plugin in your app-level build.gradle file:

apply plugin: 'com.google.gms.google-services'

Place the google-services.json file into android/app folder in your project directory.

In your main/AndroidManifest.xml add Pushwoosh Device API Token inside the <application> tag:

<meta-data android:name="com.pushwoosh.apitoken" android:value="__YOUR_DEVICE_API_TOKEN__" />

Important: Be sure to give the token access to the right app in your Pushwoosh Control Panel. Learn more

1. Build and run the project.
2. Go to the Pushwoosh Control Panel and send a push notification.
3. You should see the notification in the app.

At this stage, you have already integrated the SDK and can send and receive push notifications. Now, let’s explore the core functionality

In the Pushwoosh SDK there are two event listeners, designed for handling push notifications:

• pushReceived event is triggered, when a push notification is received
• pushOpened event is triggered, when a user opens a notification

You should set up these event listeners right after initialization of the SDK at the application start up:

import {DeviceEventEmitter} from 'react-native'
import Pushwoosh from 'pushwoosh-react-native-plugin';

class PushwooshNotificationHandler {
  setupPushListeners() {

    DeviceEventEmitter.addListener('pushReceived', (e) => {
      console.warn("Push received: " + JSON.stringify(e));
    });

    DeviceEventEmitter.addListener('pushOpened', (e) => {
      console.warn("Push accepted: " + JSON.stringify(e));
    });

  }
}

By focusing on individual user behavior and preferences, you can deliver personalized content, leading to increased user satisfaction and loyalty

import Pushwoosh from 'pushwoosh-react-native-plugin';

class Registration {
  afterUserLogin(user: User) {

    // Set user ID
    Pushwoosh.setUserId(user.getId());

    // Set user email
    Pushwoosh.setEmails(user.getEmailList());

    // Setting additional user information as tags for Pushwoosh
    Pushwoosh.setTags({
      "age": user.getAge(),
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }
}

Tags are key-value pairs assigned to users or devices, allowing segmentation based on attributes like preferences or behavior, enabling targeted messaging.

import Pushwoosh from 'pushwoosh-react-native-plugin';

class UpdateUser {
  afterUserUpdateProfile(user: User) {

    // Set list of favorite categories
    Pushwoosh.setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });

    // Set payment information
    Pushwoosh.setTags({
      "is_subscribed": user.isSubscribed(),
      "payment_status": user.getPaymentStatus(),
      "billing_address": user.getBillingAddress()
    });
  }
}

Events are specific user actions or occurrences within the app that can be tracked to analyze behavior and trigger corresponding messages or actions

import Pushwoosh from 'pushwoosh-react-native-plugin';

class Registration {

  // Track login event
  afterUserLogin(user: User) {
    Pushwoosh.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }

  // Track purchase event
  afterUserPurchase(product: Product) {
    Pushwoosh.postEvent("purchase", {
      "product_id": product.getId(),
      "product_name": product.getName(),
      "price": product.getPrice(),
      "quantity": product.getQuantity()
    });
  }
}

If you encounter any issues during the integration process, please refer to the support and community section.