React Native

This article provides information on how to install and set up Marketo’s native SDK to integrate your mobile app with our platform.

Prerequisites

Add an application in Marketo Admin (obtain your application Secret Key and Munchkin Id).

SDK Integration

Android SDK Integration

Setup using Gradle

Add Marketo SDK dependency with latest version: In the application level build.gradle file, under the dependencies section add (including the appropriate version of Marketo SDK)

Add mavencentral repository
Marketo SDK is available on maven central repository, to sync those files Add mavencentral repository to root build.gradle
Sync your Project with Gradle Files

iOS SDK Integration

Before you create a bridge for your React Native project, It’s important that you set up our SDK in your Xcode project.

SDK integration – Using CocoaPods

Using our iOS SDK in your app is easy. Perform the following steps to set it up in your app’s Xcode project using CocoaPods, so that you can integrate our platform with your app.

Download CocoaPods – Distributed as a Ruby gem, is a dependency manager for Objective-C and Swift that simplifies the process of using third-party libraries in your code, such as the iOS SDK that we provide.

We will provide steps on how to use CocaPods to get Marketo’s iOS SDK and use the SDK in your app.

To download and install it, launch the terminal on your Mac and run the following command on it:

 Install CocoaPods.

$ sudo gem install cocoapods

Open your Podfile. (Inside iOS folder of the ReactNative project)

$ open -a Xcode Podfile

 Add the following line to your Podfile.

$ pod 'Marketo-iOS-SDK'

Save and close your Podfile.

Download and install Marketo iOS SDK.

$ pod install

Open workspace in Xcode.

$ open App.xcworkspace

Native Module Installation Instructions

Sometimes a React Native app needs to access a native platform API that is not available by default in JavaScript, for example the native APIs to access Apple or Google Pay. Maybe you want to reuse some existing Objective-C, Swift, Java or C++ libraries without having to reimplement it in JavaScript, or write some high performance, multi-threaded code for things like image processing.

The NativeModule system exposes instances of Java/Objective-C/C++ (native) classes to JavaScript (JS) as JS objects, thereby allowing you to execute arbitrary native code from within JS. While we don’t expect this feature to be part of the usual development process, it is essential that it exists. If React Native doesn’t export a native API that your JS app needs you should be able to export it yourself!

  1. Create Native Module Bridge

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 Marketo SDK’s methods.

Android

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

Register the Package

Let react-native know about the Marketo package.

iOS

Create Custom Native Module Files

In the following guide you will create a native module, RNMarketoModule, that will allow you to access Marketo’s APIs from JavaScript.

Setup

1. To get started, open up the iOS project within your React Native application in Xcode. You can find your iOS project here within a React Native app. We recommend using Xcode to write your native code. Xcode is built for iOS development, and using it will help you to quickly resolve smaller errors like code syntax.

2. Create our main custom native module header and implementation files. Create a new file called MktoBridge.h

and add the following to it:

Next up, let’s start implementing the native module. Create the corresponding implementation file, MktoBridge.m, in the same folder and include the following content:

2. Initialize Marketo SDK 

Find a place in your application where you would like to add a call to the native module’s createCalendarEvent() method. Below is an example of a component, NewModuleButton you can add in your app. You can invoke the native module inside NewModuleButton’s onPress() function.

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

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

3. Configure Push Notifications

Set up push notifications for Android

Step 1: Initialize Push with Project ID and Channel name

Step 2: Add the following Service to AndroidManifest.xml



Step3: Create a class with name FirebaseMessagingService.java and Add the following code

Set up push notifications for iOS

The following permissions must be enabled in your Xcode project to send push notifications to the user’s device.

To send push notifications, add Push Notifications capability to your app target as shown in this documentation..

After adding the Push Notifications capability and enabling Remote notifications background mode, it should look like this.

Now in your AppDelegate.m file in XCode import Marketo

Add UNUserNotificationCenterDelegate to AppDelegate Interface as follows to handle Delegates

Register for remote notifications in didFinishLaunchingWithOptions method.

Include the following UNUserNotificationCenter delegate required notifications delegate methods.

4. Add Test Devices

Android

Add “MarketoActivity” to AndroidManifest.xml file inside application tag.



iOS

1. Select Project > Target > Info > URL Types.

2. Add identifier: ${PRODUCT_NAME}

3. Set URL Schemes: mkto-<Secret Key>

4. Include application:openURL:sourceApplication:annotation: to AppDelegate.m file (Objective-C)

iOS – Handle Custom Url Type/Deeplinks in AppDelegate 

Constants Used 

These constants are used when calling API from javascript. You need to create constant files and add the following.

Example Usage