Integrating React Native Plugin

How to integrate Pushwoosh SDK into your React Native project

Download Sample Module API Docs Geozones Module API Docs

1. Install plugin

npm install pushwoosh-react-native-plugin --save
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.


You should've gotten the google-services.json file while creating the app in Firebase console. If you haven't, please consult this thread (section Get a config file for your Android app).

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';
"pw_appid" : "YOUR_PUSHWOOSH_APP_ID" ,
"project_number" : "YOUR_FCM_SENDER_ID"
// 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

Push Notifications in foreground

When receiving push in background, no events are triggered until a push notification is clicked. After it is opened, Pushwoosh plugin fires push-receive and push-notificationevents.

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

You can listen to push-receive 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. push-notification, 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-->

Geozones Push Notifications

1. To enable location tracking in your application:

1.1 Install the React Native plugin into your app:

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

1.2. For iOS add the following keys to your Info.plist:

  • NSLocationWhenInUseUsageDescription(required) for app to track Geozones only while running in the foreground.

  • NSLocationAlwaysAndWhenInUseUsageDescription - (required) for app to track Geozones in both conditions, and to show a permission request dialog pop-up.

  • NSLocationAlwaysUsageDescription(optional) for app to track Geozones at all times; should be used if your app targets iOS 10 and earlier versions.

2. To start location tracking, call:

import PushwooshGeozones from 'pushwoosh-geozones-react-native-plugin';