Integrate your React Native Android app

1. SDK Integration

Install Blueshift's Android SDK

To install the Blueshift Android SDK, add the following line to the app level build.gradle file. To get the latest version, check the releases page on GitHub.

implementation "com.blueshift:android-sdk-x:$sdkVersion"

Install Firebase Cloud Messaging

Blueshift uses Firebase Messaging to send push messages. Integrate Firebase Messaging into the project in case it is not already integrated.

If this is the first time that you are integrating FCM with your application, add the following lines of code into the AndroidManifest.xml file. This code enables the Blueshift Android SDK to receive the push notification sent from Blueshift servers via Firebase.

<service
    android:name="com.blueshift.fcm.BlueshiftMessagingService"
    android:exported="true">
    <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT" />
    </intent-filter>
</service>

If you have an existing FCM integration, let your FirebaseMessagingService class extend BlueshiftMessagingService. This enables the Blueshift Android SDK to receive the push notification sent from Blueshift servers via Firebase.

package com.blueshift.reads.advanced;

import com.blueshift.fcm.BlueshiftMessagingService;
import com.blueshift.util.BlueshiftUtils;
import com.google.firebase.messaging.FirebaseMessagingService;
import com.google.firebase.messaging.RemoteMessage;

public class CustomMessagingServiceJava extends FirebaseMessagingService {

    @Override
    public void onMessageReceived(RemoteMessage remoteMessage) {
        if (BlueshiftUtils.isBlueshiftPushMessage(remoteMessage)) {
            BlueshiftMessagingService.handleMessageReceived(this, remoteMessage);
        } else {
            // The push message does not belong to Blueshift. Please handle it here.
        }
    }

    @Override
    public void onNewToken(String newToken) {
        BlueshiftMessagingService.handleNewToken(newToken);

        // Use the new token in your app if needed.
    }
}

package com.blueshift.reads.advanced

import com.blueshift.fcm.BlueshiftMessagingService
import com.blueshift.util.BlueshiftUtils
import com.google.firebase.messaging.FirebaseMessagingService
import com.google.firebase.messaging.RemoteMessage

class CustomMessagingServiceKotlin : FirebaseMessagingService() {
    override fun onMessageReceived(remoteMessage: RemoteMessage) {
        if (BlueshiftUtils.isBlueshiftPushMessage(remoteMessage)) {
            BlueshiftMessagingService.handleMessageReceived(this, remoteMessage)
        } else {
            // The push message does not belong to Blueshift. Please handle it here.
        }
    }

    override fun onNewToken(newToken: String) {
        BlueshiftMessagingService.handleNewToken(newToken)

        // Use the new token in your app if needed.
    }
}

Permissions

Add the following permissions to the AndroidManifest.xml file.

<!-- Internet permission is required to send events, 
get notifications and in-app messages. -->
<uses-permission android:name="android.permission.INTERNET" />

<!-- Network state access permission is required to detect changes 
in network connection to schedule sync operations. -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<!-- Location access permission is required if you want to track the 
location of the user. You can skip this step if you don't want to 
track the user location. -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Initialize the Native SDK

Open the MainApplication.java file and import the following classes.

import com.blueshift.model.Configuration;
import com.blueshift.Blueshift;

Add the following lines inside the onCreated() method of MainApplication class to initialize the Blueshift SDK.

Configuration configuration = new Configuration();
// Set Blueshift event API key
configuration.setApiKey(YOUR_EVENT_API_KEY);
// Set device-id source to Instance Id and package name combo (highly recommended)
configuration.setDeviceIdSource(Blueshift.DeviceIdSource.INSTANCE_ID_PKG_NAME);

Blueshift.getInstance(this).initialize(configuration);

To know more about the other optional configurations, see Optional configurations.

2. Push Notifications

Push notifications are enabled by default. You should be able to receive push notifications by now if you have followed the steps so far.

To enable deeplinking from push notifications, complete the following steps.

Open the MainActivity.java file and import the following classes.

import android.content.Intent;
import android.os.Bundle;
import com.blueshift.reactnative.BlueshiftReactNativeModule;

Add the following code inside the MainActivity class to handle push notification deeplinks.

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  BlueshiftReactNativeModule.processBlueshiftPushUrl(getIntent());
}

@Override
public void onNewIntent(Intent intent) {
  super.onNewIntent(intent);
  BlueshiftReactNativeModule.processBlueshiftPushUrl(getIntent());
}

3. In-app messaging

By default, In-app messages are disabled in the SDK. You must enable it explicitly by using the Blueshift config during SDK initialization.

Add the following lines before calling the initialize method mentioned in the "Initialize the Native SDK" section above.

// Enable in-app messages
configuration.setInAppEnabled(true);
configuration.setJavaScriptForInAppWebViewEnabled(true);

By default, the time interval between two in-app messages is one minute. You can use the following method to change this interval during the SDK initialization.

configuration.setInAppInterval(1000 * 60 * 2); // This will set the interval to two minutes.

In-app display options

The app must register/whitelist its pages/screens to show in-app messages.

1. Show on all pages

To whitelist all pages/screens, use ActivityLifecycleCallback as shown.

public class YourApplication extends Application implements Application.ActivityLifecycleCallbacks {
  
    @Override
    public void onActivityCreated(@NonNull Activity activity, @Nullable Bundle savedInstanceState) {
      
    }
  
    @Override
    public void onActivityStarted(@NonNull Activity activity) {
        Blueshift.getInstance(activity).registerForInAppMessages(activity);
    }
  
    @Override
    public void onActivityResumed(@NonNull Activity activity) {
      
    }
  
    @Override
    public void onActivityPaused(@NonNull Activity activity) {
      
    }
  
    @Override
    public void onActivityStopped(@NonNull Activity activity) {
        Blueshift.getInstance(activity).unregisterForInAppMessages(activity);
    }
  
    @Override
    public void onActivitySaveInstanceState(@NonNull Activity activity, @NonNull Bundle outState) {
      
    }
  
    @Override
    public void onActivityDestroyed(@NonNull Activity activity) {
      
    }
}

2. Show on selected pages

To register selected screens of the react native application, use the following methods in the respective callbacks.

componentDidMount() { 
    // Register for in-app notification
    Blueshift.registerForInAppMessage("ScreenName");
  }
  
 componentWillUnmount() {
    // Unregister for in-app notification
    Blueshift.unregisterForInAppMessage();
 }

4. Mobile Inbox

As mobile inbox stores the in-app notifications for later use. To enable the feature, add the following line to the SDK initialization code.

configuration.setInboxEnabled(true);

Add the following lines to the MainActivity.java to help the Blueshift Native Module send updates to the React Native app when the mobile inbox data changes.

@Override
protected void onStart() {
  super.onStart();
  BlueshiftReactNativeModule.registerForInboxDataChangeEvents(this);
}

@Override
protected void onStop() {
  BlueshiftReactNativeModule.unregisterForInboxDataChangeEvents(this);
  super.onStop();
}

5. Blueshift Deep Links

Blueshift’s deep links are usual https URLs that take users to an installed app or a web browser to show the content. If an email or text message that is sent as a part of a campaign contains Blueshift deep links and a user clicks on it, the OS launches the installed app and Blueshift SDK delivers the deep link to the app to navigate the user to the respective screen.

To enable domain verification, follow the steps mentioned in the Prerequisite section in the Integrate Blueshift's deep links' document.

To open the app when someone clicks the link, add the following intent filter to the <activity> tag for your MainActivity inside your AndroidManifest.xml file. Ensure that you replace links.clientdomain.com with your email domain name.

<intent-filter
    android:autoVerify="true"
    tools:targetApi="m">
    <action android:name="android.intent.action.VIEW" />

    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />

    <data
        android:host="links.clientdomain.com"
        android:pathPrefix="/track"
        android:scheme="https" />
    <data
        android:host="links.clientdomain.com"
        android:pathPrefix="/z"
        android:scheme="https" />
</intent-filter>

Logging

To verify the SDK integration, enable logging and view the events that are being sent to the Blueshift APIs.

Open the MainActivity.java file and import the following class.

import com.blueshift.BlueshiftLogger;

To enable SDK logs, add the following lines before the SDK initialization code.

// Enable logging to view SDK logs in logcat window.
if (BuildConfig.DEBUG) {
  // You must disable logging in production.
  BlueshiftLogger.setLogLevel(BlueshiftLogger.VERBOSE);
}