Setup Push Notifications using React Native

Prerequisite

Setup Push Notifications

Setup Android Push Notifications

GetSocial supports sending push notifications via Firebase Cloud Messaging (FCM) or Google Cloud Messaging (GCM).

  1. Follow FCM official guide (or GCM official guide) to setup push notifications in your app.

    CDM Permissions for GCM

    If you are using Google Cloud Messaging for Push Notifications, don’t forget to add CDM permissions to your AndroidManifest.xml:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    <application ...>
        ...
        <permission
            android:name="${applicationId}.permission.C2D_MESSAGE"
            android:protectionLevel="0x2" />
        <uses-permission
            android:name="android.permission.WAKE_LOCK" />
        <uses-permission
            android:name="com.google.android.c2dm.permission.RECEIVE" />
        <uses-permission
            android:name="${applicationId}.permission.C2D_MESSAGE" />
    </application>
    
  2. Login to the GetSocial Dashboard.

  3. Go to the Notifications section → Settings tab.
  4. Enable Android notifications by clicking on the switch and fill in API Key and Sender ID values.

    You can find API Key (Server key) and Sender ID in your application settings in Firebase developer console.

    GetSocial Dashboard - Enable Push Notifications

  5. Go to Templates tab and select what kind of notifications users will receive:

    GetSocial Dashboard - Notifications Type

  6. Check notifications texts and translations.

    GetSocial Dashboard - Check Notification Text

  7. Send a test notification to your test device to check your setup.

    GetSocial Dashboard - Send Test Notification

Setup iOS Push Notifications

Generate Push Notification Certificate

To enable push notifications in your iOS application, go to Capabilities tab in your target configuration in XCode and enable Push Notification.

On Apple Developer Portal:

  1. Open Apple Developer Portal;
  2. Log into your account;
  3. Open Certificates, Identifiers & Profiles;
  4. Find App IDs in Identifiers section and find your application;
  5. Click Edit and scroll to Push Notifications configurations;
  6. Click Create Certificate… for Development and Production.
  7. Follow the instructions how to create the certificate and download it.

In your .entitlements file you should enter “development” or “production” value for APS Environment key, for Development and Production builds respectively.

Export Server .p12 Certificate

Double click on downloaded .cer file (your certificate), it will add it to your Keychain Access and open. Click on Certificates section, find your certification, and export it with clicking Export Apple Development/Production iOS Push Services, create a password for your certificate and save it somewhere on the disk.

Do it for both Production and Development certificates.

Configure Push Notification on the Dashboard

  1. Login to the GetSocial Dashboard.
  2. Go to the Notifications section → Settings tab.
  3. Enable iOS notifications by clicking on the switch and upload .p12 certificates from the previous section.
  4. Select what kind of notifications users will receive:

    GetSocial Dashboard - Notifications Type

  5. Select Sandbox if your application is using development PN, or Production for development.

  6. Send a test notification to your test device to check your setup.

    GetSocial Dashboard - Send Test Notification

Warning

Be careful with the configuration of your APS Environment, if you are using “development”, you need to sign your application with Development provisioning and choose Sandbox in Enable Certificate on GetSocial Dashboard notification configurations.

Autoregister for Push Notification on the Client Side

By default GetSocial SDK automatically registers at the push server, and the user will start receiving push notifications.
Follow the platform specific steps to prevent auto registration and register for push notifications manually.

Android

  1. Add autoRegisterForPush property to the GetSocial configuration in the Android application build.gradle:

    1
    2
    3
    4
    getsocial {
        ...
        autoRegisterForPush false
    }
    
  2. To start receiving GetSocial push notifications call:

    1
    GetSocial.registerForPushNotifications();
    

iOS

  1. Add autoregister-push parameter to getsocial.sh in Build Phases section:

    1
    getsocial.sh --app-id=[GetSocial App Id] --autoregister-push=false
    
  2. To start receiving GetSocial push notifications call:

    1
    GetSocial.registerForPushNotifications();
    

Handle Click on Push Notifications

Select Activity to Open on Android

By default, click on the GetSocial push notification will start launcher activity. If you want to open other activity on notification click, add the <intent-filter> with action getsocial.intent.action.NOTIFICATION_RECEIVE to the activity that should be opened:

1
2
3
4
5
6
7
<activity ...>
    ...
    <intent-filter>
        <action android:name="getsocial.intent.action.NOTIFICATION_RECEIVE"/>
        <category android:name="android.intent.category.DEFAULT"/>
    </intent-filter>
</activity>

GetSocial UI

If you are using GetSocial UI, SDK will open corresponding view after clicking on GetSocial push notification. For instance, if someone liked your activity or commented under your activity, this activity will be shown on GetSocial notification click.

Important

If GetSocial View is opened automatically by GetSocial UI, you can not set the custom title, UiActionListener, action button handler, etc. In this case, we recommend you to override the default behavior and open GetSocial View by yourself.

Notification Listener

You can customize the default behavior and handle clicks on GetSocial push notifications on your own. Also, you can listen for GetSocial notifications when an application is running in the foreground when the notification was received. To do so, set the notification listener in onComponentDidMount method of your main component:

1
2
3
4
5
GetSocial.onNotificationReceived((notification, wasClicked) => {
  if (wasClicked) {
    this.handleAction(notification.action);
  }
});

Read how to handle actions.

wasClicked parameter is true when the application was opened by push notification click or false if the application was in the foreground when the notification was received.

Tip

If you are not using GetSocial UI, we recommend to handle push notifications by yourself - better user experience would be to react to notification actions.

Show Push Notifications In Foreground

If you want to show GetSocial push notifications while app is in foreground - enable foregroundNotifications.
In this case:

  • Notifications will be shown when your application is in foreground.
  • notification listener will be called after clicking on the notification; parameter wasClicked will be true.

Android

Set foregroundNotifications to true in the GetSocial configuration in your build.gradle:

1
2
3
4
getsocial {
    ...
    foregroundNotifications true
}

iOS

  1. In your Xcode project, go to: Build TargetBuild Phases.

  2. Find Run Script section with getsocial.sh configured.

  3. Add --foreground-notifications flag

    1
    getsocial.sh --app-id=[GetSocial App Id] --foreground-notifications=true
    

Disable Push Notifications For User

If you want to disable push notifications for the user, use GetSocialUser.disablePushNotifications(). When push notifications are disabled, you still can query for GetSocial Notifications via data API.

To enable push notifications use GetSocialUser.enablePushNotifications(). To check current setting value use GetSocialUser.isPushNotificationsEnabled().then((enabled) => {}).

Rich Push Notifications on iOS

Beginning with iOS 10 push notifications can contain media elements, like images and videos.
To support this feature, you need to add a Notification Extension target to your app, as described here:

  1. In Xcode Select FileNewTarget…
  2. Select Notification Service Extension.
  3. Enter Product Name and other information.
  4. Select your application target in Embed in application line.
  5. Click on Finish to create extension.

Basic setup is now done, let’s write some code.
Replace the content of your *.m file in your extension with the one you can download from GitHub.

Congratulations, you’re ready to show rich notifications to your users!

To check if your setup is correct, follow the Testing Guide.
The test notification contains a default image, which should be displayed in the received notification.

Important

Notification Service Extension will require a Provisioning Profile.

Customize Push Notification Icon on Android

By default, GetSocial SDK will use application icon as the push notification icon.

There are two ways to customize the icon. The first option is to put an image with name getsocial_notification_icon into res/drawable folder.

If you want to use an existing icon for notifications, you can set the resource name in the Android Manifest. For instance to use ic_notification_custom.png from res/drawable:

1
2
3
4
5
6
7
<application ... >
    ...
    <meta-data
        android:name="im.getsocial.sdk.NotificationIcon"
        android:resource="@drawable/ic_notification_custom" />
    ...
</application>

As a result all notifications coming from GetSocial SDK will use custom icon:

Customized Notification Icon

Also, you can customize large notification icon using manifest. To use ic_large_notification_icon.png from res/drawable:

1
2
3
4
5
6
7
<application ... >
    ...
    <meta-data
        android:name="im.getsocial.sdk.LargeNotificationIcon"
        android:resource="@drawable/ic_large_notification_icon" />
    ...
</application>

Customized Large Notification Icon

Customize Push Notifications Channel on Android

All GetSocial notifications come to a separate notifications channel with ID getsocial_channel_id. By default, channel is called Social and has empty description. Name is localized to all GetSocial supported languages.

To customize channel name or description, add the following meta data pointing to the string resource to AndroidManifest.xml:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<application ... >
    ...
    <meta-data
        android:name="im.getsocial.sdk.NotificationsChannelTitle"
        android:resource="@string/getsocial_notifications_channel_title" />

    <meta-data
        android:name="im.getsocial.sdk.NotificationsChannelDescription"
        android:resource="@string/getsocial_notifications_channel_description" />
    ...
</application>

To check your customization, on your phone (Android O, API 26 and higher) go to SettingsApps and Notifications[YOUR APP NAME]Notifications and find your channel. Description can be checked after pressing the channel name at the bottom of the screen.

Next Steps

Give us your feedback! Was this article helpful?

😀 🙁