Setup Push Notifications using React Native¶

Prerequisite¶

Finished Getting Started with GetSocial React Native SDK guide.

Setup Push Notifications¶

Setup Android Push Notifications¶

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

Follow FCM official guide.
Login to the GetSocial Dashboard.
Go to the Notifications section → Settings tab.
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.
Go to Templates tab and select what kind of notifications users will receive:
Check notifications texts and translations.
Send a test notification to your test device to check your setup.

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:

Open Apple Developer Portal;
Log into your account;
Open Certificates, Identifiers & Profiles;
Find App IDs in Identifiers section and find your application;
Click Edit and scroll to Push Notifications configurations;
Click Create Certificate… for Development and Production.
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¶

Login to the GetSocial Dashboard.
Go to the Notifications section → Settings tab.
Enable iOS notifications by clicking on the switch and upload .p12 certificates from the previous section.
Select what kind of notifications users will receive:
Select Sandbox if your application is using development PN, or Production for development.
Send a test notification to your test device to check your setup.

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.

Add autoRegisterForPush property to the GetSocial configuration in the getsocial.json:

// getsocial.json
{
    ...
    "pushNotifications": {
        ...
        "autoRegister": false
    }
}

To start receiving GetSocial push notifications call:
```
Notifications.registerDevice();
```

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:

<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¶

Receive Listener¶

You can set OnNotificationReceivedListener, which will be triggered when notification is received and app is in foreground:

Notifications.setOnNotificationReceivedListener((notification) => {
    console.log('Notification received: ' + notification.text);
});

Click Listener¶

You can customize the default behavior and handle clicks on GetSocial push notifications on your own. To do so:

Set customListener property to true in the GetSocial configuration file getsocial.json:

// getsocial.json
{
    ...
    "pushNotifications": {
        ...
        "customListener": true
    }
}

Set a listener:

Notifications.setOnNotificationClickedListener((notification, context) => {
    console.log('Notification clicked: ' + notification.text);
    if (!handleAction(notification.action)) {
        GetSocial.handleAction(notification.action) // fallback to default behaviour if notification was not handled by your code
    }
}

Read how to handle actions.

Configuration flag customListener

Don’t forget to set this flag, otherwise listener won’t be invoked. If you have it set to true, GetSocial won’t perform any default handling, you have to call GetSocial.handle(...) explicitly.

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 - set foreground to true in the GetSocial configuration file getsocial.json:

// getsocial.json
{
    ...
    "pushNotifications": {
        ...
        "foreground": true
    }
}

OnNotificationReceivedListener will still be invoked.

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 & Badges 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:

In Xcode Select File → New → Target…
Select Notification Service Extension.
Enter Product Name and other information.
Select your application target in Embed in application line.
Click on Finish to create extension.
Download GetSocialNotificationExtension.framework, unzip and add it to your extension’s Frameworks and Libraries section.
Add GetSocialNotificationExtension.framework to your application’s Embed Frameworks section.
(For badge support) Add App Group for both application and extension target:
1. Go to Signing & Capabilities.
2. Add App Groups capability.
3. In App Groups section press + and add group with name group.YOUR_BUNDLE_ID.getsocial_extension, where replace YOUR_BUNDLE_ID with actual bundle identifier of your app, it should be something like com.example.app. Group name should be the same for both application and extension targets.
4. Don’t forget to add it for both application and extension targets, otherwise badge won’t be properly updated.

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. Badge on your application icon should be increased by 1. After you open your application, badge should be cleared.

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:

<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:

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

<application ... >
    ...
    <meta-data
        android:name="im.getsocial.sdk.LargeNotificationIcon"
        android:resource="@drawable/ic_large_notification_icon" />
    ...
</application>

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:

<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 Settings → Apps 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?

😀 🙁