As with any React Native project, the first step is to add the project as an npm dependency.
The 2nd is to do some platform specific setup so as to be able to work with Apple and Google's services for push notifications.
Start by running this:
$ npm install react-native-notifications --save
First, Manually link the library to your Xcode project.
Then, to enable notifications support add the following line at the top of your AppDelegate.m
#import "RNNotifications.h"
And the following methods to support registration and receiving notifications:
// Required to register for notifications
- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
{
[RNNotifications didRegisterUserNotificationSettings:notificationSettings];
}
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
[RNNotifications didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error {
[RNNotifications didFailToRegisterForRemoteNotificationsWithError:error];
}
// Required for the notification event.
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification {
[RNNotifications didReceiveRemoteNotification:notification];
}
// Required for the localNotification event.
- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
{
[RNNotifications didReceiveLocalNotification:notification];
}
Add a reference to the library's native code in your global settings.gradle
:
include ':reactnativenotifications'
project(':reactnativenotifications').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-notifications/android')
Declare the library as a dependency in your app-project's build.gradle
:
dependencies {
// ...
compile project(':reactnativenotifications')
}
Add the library to your application class (e.g. MainApplication.java
):
import com.wix.reactnativenotifications.RNNotificationsPackage;
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
// ...
// Add this line:
new RNNotificationsPackage(MainApplication.this)
);
Note: This section is only necessary in case you wish to be able to receive push notifications in your React-Native app.
Push notifications on Android are managed and dispatched using Google's GCM service (now integrated into Firebase). The following installation steps are a TL;DR of Google's GCM setup guide. You can follow them to get GCM integrated quickly, but we recommend that you will in the very least have a peek at the guide's overview.
To set GCM in your app, you must first create a Google API-project and obtain a Sender ID and a Server API Key. If you have no existing API project yet, the easiest way to go about in creating one is using this step-by-step installation process; Use this tutorial for insturctions.
Alternatively, follow Google's complete guide.
Once obtained, bundle the Sender ID onto your main manifest.xml
file:
<manifest>
...
<application>
...
// Replace '1234567890' with your sender ID.
// IMPORTANT: Leave the trailing \0 intact!!!
<meta-data android:name="com.wix.reactnativenotifications.gcmSenderId" android:value="1234567890\0"/>
</application>
</manifest>