Integrating React Native plugin

Download Sample
Module API Docs

1. Install plugin

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

For iOS, additionally install dependencies:

cd ios && pod install && cd ..

react-native link pushwoosh-react-native-plugin

2. Configure your project in Firebase Console.

3. Locate the google-services.json file to the android/app/ folder in your project directory. Make sure that the package name of your app is registered for your Firebase project and persists in the google-services.json file.

4. In iOS Xcode project enable Push Notifications in the Capabilities section.

5. Import plugin and register for push notifications

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

Pushwoosh.init({
    "pw_appid" : "YOUR_PUSHWOOSH_APP_ID" ,
    "project_number" : "YOUR_FCM_SENDER_ID"
});
Pushwoosh.register();

// this event is fired when the push is received in the app
DeviceEventEmitter.addListener('pushReceived', (e: Event) => {
  console.warn("pushReceived: " + JSON.stringify(e));
  // shows a push is received. Implement passive reaction to a push, such as UI update or data download.
});

// this event is fired when user clicks on notification
DeviceEventEmitter.addListener('pushOpened', (e: Event) => {
  console.warn("pushOpened: " + JSON.stringify(e));
  // shows a user tapped the notification. Implement user interaction, such as showing push details
});

6. Add GoogleServices gradle plugin to your project’s build.gradle:

// you should already have buildscript and dependencies blocks in your project's build.gradle so just put the classpath line there

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

7. Apply GoogleServicesPlugin in your app’s build.gradle:

```
// add these lines to the very end of your build.gradle

apply {
 plugin com.google.gms.googleservices.GoogleServicesPlugin
}
```

8. Since React Native builds into native iOS and Android apps, configure your Pushwoosh credentials in the native layers.

Android

In your AndroidManifest.xml, add the following:

<meta-data android:name="Pushwoosh_API_TOKEN" android:value="YOUR_DEVICE_API_TOKEN" />

Learn more about your Pushwoosh Device API Token

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

iOS

In your Info.plist, set the Pushwoosh_API_TOKEN key to the Pushwoosh Device API Token

Important: Make sure the token has access to the correct application in your Pushwoosh Control Panel. Learn more

Push notifications in foreground

When receiving a push in the background, no events are triggered until a push notification is clicked. After it is opened, Pushwoosh plugin fires pushReceived and pushOpenedevents.

When a push is received in the foreground, the plugin fires pushReceived automatically and creates a notification in the Notification Center. When this notification is opened, it fires pushOpened.

You can listen to pushReceived event to immediately react on a push in case it is received in foreground, e.g., update content on a current page in your app. pushOpened, on the other side, is used to react on a notification click event, which requires user interaction, e.g., to navigate within your app, trigger a new process in your app, etc.

Foreground notification creation can be controlled with the following flags added to AndroidManifest.xml and info.plist:

<!--Add this line to show push notifications in foreground. Use "false" value to disable it-->
<meta-data android:name="PW_BROADCAST_PUSH" android:value="true"/>

<!-- Use NO to disable foreground notifications and YES to show it-->
<key>Pushwoosh_SHOW_ALERT</key>
  <string>NO</string>

Share your feedback with us

Your feedback helps us create a better experience, so we would love to hear from you if you have any issues during the SDK integration process. If you face any difficulties, please do not hesitate to share your thoughts with us via this form.