Note: The Blueshift React Native plugin is now available for the Blueshift iOS and Android SDK. We recommend that you migrate to using the React Native plugin to receive the best possible experience.

📘
Wait. Are you ready for this part?
Before you create a bridge for your React Native project, it's important that you set up our SDK in your Android Studio project. Once you've done that, come back to this document and create the bridge.
It'll all be a breeze. Trust us. 😊

React Native is a mobile application development framework, that you can use to produce cross platform apps. Though our SDKs are written using the programming language specific to the platform, you can create a React Native bridge to invoke methods of our SDK into your app.

React Native bridge is used for communicating between the JSX and native app layers. In our case, the host app will be able to write the JSX code that can invoke the Blueshift SDK’s methods.

To create a bridge for android, write a module file, a package file and a JavaScript file to load the module to the JavaScript layer.

Native Module

This file contains the wrapper methods that can call the Blueshift SDK’s methods internally with parameters that you provide.

public class BlueshiftModule extends ReactContextBaseJavaModule {
    private static final String TAG = "BlueshiftBridge";
    private ReactApplicationContext applicationContext;

    BlueshiftModule(ReactApplicationContext applicationContext) {
        super(applicationContext);
        this.applicationContext = applicationContext;
    }

    @NonNull
    @Override
    public String getName() {
        return "BlueshiftBridge";
    }

    @ReactMethod
    void setUserInfoEmailId(String email) {
        UserInfo.getInstance(applicationContext).setEmail(email);
        UserInfo.getInstance(applicationContext).save(applicationContext);
    }

    @ReactMethod
    void setUserInfoCustomerId(String customerId) {
        UserInfo.getInstance(applicationContext).setRetailerCustomerId(customerId);
        UserInfo.getInstance(applicationContext).save(applicationContext);
    }

    @ReactMethod
    void identifyWithDetails(ReadableMap map) {
        String email = UserInfo.getInstance(applicationContext).getEmail();
        Blueshift.getInstance(applicationContext).identifyUserByEmail(email, map.toHashMap(), false);
    }

    @ReactMethod
    void trackCustomEvent(String eventName, ReadableMap map, boolean canBatch) {
        Blueshift.getInstance(applicationContext).trackEvent(eventName, map.toHashMap(), canBatch);
    }

    @ReactMethod
    void trackScreenView(String screenName, ReadableMap map, boolean canBatch) {
        Blueshift.getInstance(applicationContext).trackScreenView(screenName, canBatch);
    }

    @ReactMethod
    void removeUserInfo() {
        BlueshiftLogger.d(TAG, "Method not available");
    }

    @ReactMethod
    void registerForRemoteNotification() {
        BlueshiftLogger.d(TAG, "Method not available");
    }

    @ReactMethod
    void setEnablePush(boolean enablePush) {
        BlueshiftAppPreferences.getInstance(applicationContext).setEnablePush(enablePush);
        BlueshiftAppPreferences.getInstance(applicationContext).save(applicationContext);
    }

    @ReactMethod
    void setCurrentLocation(double latitude, double longitude) {
        BlueshiftLogger.d(TAG, "Method not available");
    }

    @ReactMethod
    void fetchInAppNotification() {
        Blueshift.getInstance(applicationContext).fetchInAppMessages(null);
    }

    @ReactMethod
    void displayInAppNotification() {
        Blueshift.getInstance(applicationContext).displayInAppMessages();
    }
}

Package

Let react-native know about the Blueshift package.

public class BlueshiftPackage implements ReactPackage {
    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new BlueshiftModule(reactContext));
        return modules;
    }

    @NonNull
    @Override
    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

JavaScript

This JavaScript file loads the native module to the JavaScript layer.

import { NativeModules } from 'react-native'
module.exports = NativeModules.BlueshiftBridge

Now, pass this package into the packages array/list inside your application file to add this package to your react native host object.

@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  // Packages that cannot be autolinked yet can be added manually here, for example:
  // packages.add(new MyReactNativePackage());
    packages.add(new BlueshiftPackage());
  return packages;
}

Once the above files are placed correctly, we can import the js module in any js class and call its methods directly. For example:

// save user attributes with Blueshift
NativeModules.BlueshiftBridge.setUserInfoEmailId("Set email id here")
NativeModules.BlueshiftBridge.setUserInfoCustomerId("Set customer id here")
NativeModules.BlueshiftBridge.removeUserInfo()

// send identify event
NativeModules.BlueshiftBridge.identifyWithDetails({})

// sending events
NativeModules.BlueshiftBridge.trackCustomEvent("Set event name here",{},false)
NativeModules.BlueshiftBridge.trackScreenView("Set screen name here",{},false)

// Register for remote notifications (iOS)
NativeModules.BlueshiftBridge.registerForRemoteNotification()

// Set push as enabled/disabled on app level. Accepts boolean value.
NativeModules.BlueshiftBridge.setEnablePush(true)

// Fetch in-app messages from the API
NativeModules.BlueshiftBridge.fetchInAppNotification()

// Show in-app message
NativeModules.BlueshiftBridge.displayInAppNotification()

For more information about the methods that are available in our SDK, you can take a look at the following docs:

React Native bridge for Android

📘
Wait. Are you ready for this part?

Native Module

Package

JavaScript

📘Wait. Are you ready for this part?

Native Module

Package

JavaScript

📘
Wait. Are you ready for this part?