Integrating React Native Plugin
How to integrate Pushwoosh SDK into your React Native project
1. Install plugin
shell
1
npm install pushwoosh-react-native-plugin --save
Copied!
1.1. For iOS, additionally install dependencies:
shell
1
cd ios && pod install && cd ..
Copied!
React Native 0.59 and earlier versions
Starting with 0.60 version, React Native uses Autolinking, so you do not need to link the plugin on your own. However, for earlier versions (0.59 and lower) you still have to do it manually:
shell
1
react-native link pushwoosh-react-native-plugin
2
react-native link pushwoosh-geozones-react-native-plugin // for geozones plugin
Copied!
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.google-services.json
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
1
import Pushwoosh from 'pushwoosh-react-native-plugin';
2
3
Pushwoosh.init({
4
"pw_appid" : "YOUR_PUSHWOOSH_APP_ID" ,
5
"project_number" : "YOUR_FCM_SENDER_ID"
6
});
7
Pushwoosh.register();
8
9
// this event is fired when the push is received in the app
10
DeviceEventEmitter.addListener('pushReceived', (e: Event) => {
11
console.warn("pushReceived: " + JSON.stringify(e));
12
// shows a push is received. Implement passive reaction to a push, such as UI update or data download.
13
});
14
15
// this event is fired when user clicks on notification
16
DeviceEventEmitter.addListener('pushOpened', (e: Event) => {
17
console.warn("pushOpened: " + JSON.stringify(e));
18
// shows a user tapped the notification. Implement user interaction, such as showing push details
19
});
Copied!
In some cases, you might need to enable Multidex support for Android app. To do that, add the following parameters to your build.gradle:
build.gradle
1
defaultConfig {
2
minSdkVersion 14 // lower than 14 doesn't support multidex
3
4
// Enabling multidex support.
5
multiDexEnabled true
6
}
7
}
8
dependencies {
9
implementation 'com.android.support:multidex:1.0.3'
10
}
Copied!
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:
AndroidManifest.xml
info.plist
1
<!--Add this line to show push notifications in foreground. Use "false" value to disable it-->
2
<meta-data android:name="PW_BROADCAST_PUSH" android:value="true"/>
Copied!
1
<!-- Use NO to disable foreground notifications and YES to show it-->
2
<key>Pushwoosh_SHOW_ALERT</key>
3
<string>NO</string>
Copied!
Geozones Push Notifications
1. To enable location tracking in your application:
1.1 Install the React Native plugin into your app:
1
npm install pushwoosh-geozones-react-native-plugin --save
2
react-native link pushwoosh-geozones-react-native-plugin
Copied!
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:
1
import PushwooshGeozones from 'pushwoosh-geozones-react-native-plugin';
2
3
PushwooshGeozones.startLocationTracking();
Copied!
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.
Last modified 2mo ago