React Native Integration

Our React Native plugin leverages our native SDKs for iOS and Android. This guide assumes you are adding Marigold to an existing React Native project. If you are starting from scratch, follow the Getting Started tutorial from React Native.

Add and link the plugin

First, add the plugin to your project via NPM, then navigate to its folder.

npm i react-native-marigold
cd node_modules/react-native-marigold

iOS integration

Open your Xcode project or workspace. Drag into Libraries the following files from node_modules/react-native-marigold:

RNMarigold.h
RNMarigold.m
RNMarigoldBridge.h
RNMarigoldBridge.m
RNEngageBySailthru.h
RNEngageBySailthru.m
RNMessageStream.h
RNMessageStream.m

Highlight RNMarigold.m and RNMarigoldBridge.m. Make sure these files' membership is your main app's target by selecting your project name from the right hand menu's Target Membership section.

Now, link the plugin with the native SDK by adding the iOS SDK to your project. We suggest you use CocoaPods to easily integrate the SDK to your project, but you can also install the framework manually (Marigold.framework can be obtained from node_modules/react-native-marigold).

Import the RNMarigoldBridge header file #import "RNMarigoldBridge.h" into the native UIApplicationDelegate implementation (or the Swift bridging header). You will then need replace the code that creates your RCTRootView with the code below. This adds the Marigold React Native modules to the root view.

#import "RNMarigoldBridge.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
	    ...
      id<RCTBridgeDelegate> moduleInitialiser = [[RNMarigoldBridge alloc] initWithJSCodeLocation:jsCodeLocation]; 

      RCTBridge * bridge = [[RCTBridge alloc] initWithDelegate:moduleInitialiser launchOptions:launchOptions];

      RCTRootView * rootView = [[RCTRootView alloc]
                                initWithBridge:bridge
                                moduleName:@"YOUR_MODULE_NAME"
                                initialProperties:nil];
    ...
}

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
		...
		let moduleInitialiser = RNMarigoldBridge(jsCodeLocation: jsCodeLocation)
  
		let bridgeModule = RCTBridge(delegate: moduleInitialiser, launchOptions: launchOptions)
    
		let rootView = RCTRootView(bridge: bridgeModule, moduleName: "YOUR_MODULE_NAME", initialProperties: nil)
		...
}

This completes the plugin integration. If you haven't already done so, make sure you setup your app for push notifications in your Xcode project and you upload the push certificates in your app's dashboard.

Additional Options

There are additional options that can be specified on the RNMarigoldBridge object:

RNMarigoldBridge *marigoldBridge = [[RNMarigoldBridge alloc] 
                                    initWithJSCodeLocation:jsCodeLocation];
marigoldBridge.displayInAppNotifications = NO;

var marigoldBridge = RNMarigoldBridge(jsCodeLocation: jsCodeLocation)

marigoldBridge?.displayInAppNotifications = false

These can be used to override whether the SDK should:

request push authorization automatically
display in app notifications

Android integration

Add the following to your project's gradle file (android/settings.gradle):

include ':react-native-marigold'
project(':react-native-marigold').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-marigold/android')

Add the following to your app's gradle file (android/app/build.gradle):

repositories {
    google()

    maven {
        url "https://github.com/sailthru/maven-repository/raw/master/"
    }
}

dependencies {
    implementation project(':react-native-marigold')
}

Next, you need to link the package in your MainApplication.java.

// Add this import line
import com.marigold.rnsdk.RNMarigoldPackage;

public class MainApplication extends Application implements ReactApplication {
//  ...

    @Override
    protected List<ReactPackage> getPackages() {
      List<ReactPackage> packages = new PackageList(this).getPackages();
      packages.add(new RNMarigoldPackage());
      return packages;
    }
//  ...

}

// Add this import line
import com.reactlibrary.RNSailthruMobilePackage


class MainApplication : Application(), ReactApplication {
//  ...
    override fun getPackages(): List<ReactPackage> {
      	return PackageList(this).getPackages().apply {
          	add(RNMarigoldPackage())
        }
    }
        
//  ...
}

This completes the plugin integration. If you haven't already done so, make sure you setup your app for push notifications in your Android Studio project you have the right FCM details in your app's dashboard.

Additional Options

There are additional options that can be specified on the RNMarigoldPackage modules:

import React, { Component } from 'react';
import { StyleSheet, Text, View, NativeModules } from 'react-native';
// Add this import line
const { Marigold, EngageBySailthru, MessageStream } = require('react-native-marigold');

export default class App extends Component {
//  ...

    Marigold.setInAppNotificationsEnabled(false)
    Marigold.setGeoIPTrackingEnabled(false)
      
//  ...

}

These can be accessed by importing the react native modules and can override whether the SDK should:

enable geo IP tracking by default
display in app notifications