MobilePush React Native Plugin

Use the MobilePush React Native plugin to implement the MobilePush SDK into your iOS and Android applications.

Before you install the React Native plugin in your app, update the SDK dependencies from version 7.x to 8.x using npm or Yarn.

1. Import the SDK modules into your application.

   • For iOS apps:
     • Import both SFMCSDK and MarketingCloudSDK into AppDelegate
     • Update the push notification setup code as outlined in step 2 of Enabling Push Notifications In Your Ios Project.
     • Update the delegate methods and verify your implementation by following the steps outlined in the iOS setup section of this article.
   • For Android apps:
     • Import SFMCSdk into MainApplication.java
     • Configure the SDK as specified in Configure the SDK, which details the process of configuring the SDK for Android in this guide.

2. Add the React Native plugin to your application using npm or Yarn, as shown in the following examples.

   The React Native plugin has a version dependency on React Native v0.60+.

Setting up the React Native plugin on your Android app involves the following steps.

1. Add the MobilePush Android SDK repository to your build file
2. Provide your Firebase Cloud Messaging (FCM) credentials
3. Configure the SDK

Add the MobilePush Android SDK repository to your build.gradle file.

To enable push support for the Android platform, you must provide your FCM credentials by placing the google-services.json file in the android/app directory.

1. Download the google-services.json file from your application's Firebase console and place it in your project's android/app directory.

2. Include the Google Services plugin in your android/build.gradle file.

3. Add the plugin to your build.gradle file.

Configure the SDK in your MainApplication.java class as shown in the following example.

To enable push notifications in your iOS app, follow these steps.

1. Install the MobilePush SDK pod
2. Enable and configure push notifications
3. Enable rich notifications

After you've installed the React Native plugin using npm or Yarn, navigate to the ios directory and install the MobilePush SDK pod.

1. Enable push notifications in your target’s Capabilities settings in Xcode by clicking + Capability and then selecting Push Notifications.

   

2. Set your AppDelegate class to adhere to the UNUserNotificationCenterDelegate and SFMCSdkURLHandlingDelegate protocols.

3. Set up push notifications by updating AppDelegate.

Rich notifications include images, videos, titles and subtitles from the MobilePush app, and mutable content. Mutable content can include personalization in the title, subtitle, or body of your message. To enable rich notifications, create a notification service extension by doing the following.

1. In Xcode, click File > New > Target.
2. Select Notification Service Extension
3. Name and save the new extension.

This service extension checks for a "_mediaUrl" element in request.content.userInfo. If it's present, the extension attempts to download media from the URL, creates a thumbnail-size version, and then adds the attachment. Additionally, the service extension also checks for a "_mediaAlt" element in request.content.userInfo. If this key is found, the service extension uses the element for the body text, in case there are any problems downloading or creating the media attachment.

A service extension times out when it's unable to download media. In the following example, the service extension delivers the original content but replaces the body text with the value from "_mediaAlt".

The SDK doesn’t automatically present URLs from these sources.

• CloudPages URLs from push notifications
• OpenDirect URLs from push notifications
• Action URLs from in-app messages

To handle URLs from push notifications, you must perform the steps outlined in the following sections.

Also review additional documentation on URL Handling.

Kind: Global class

• MCReactModule
  • .isPushEnabled() ⇒ Promise.<boolean>
  • .enablePush()
  • .disablePush()
  • .getSystemToken() ⇒ Promise.<string?>
  • .getAttributes() ⇒ Promise.<Object.<string, string>>
  • .setAttribute(key, value)
  • .clearAttribute(key)
  • .addTag(tag)
  • .removeTag(tag)
  • .getTags() ⇒ Promise.<Array.<string>>
  • .setContactKey(contactKey)
  • .getContactKey() ⇒ Promise.<string?>
  • .enableLogging()
  • .disableLogging()
  • .logSdkState()
  • .track()
  • .getDeviceId() ⇒ Promise.<string?>
  • .setAnalyticsEnabled(analyticsEnabled)
  • .isAnalyticsEnabled() ⇒ Promise.<boolean>
  • .setPiAnalyticsEnabled(analyticsEnabled)
  • .isPiAnalyticsEnabled() ⇒ Promise.<boolean>

The current state of the pushEnabled flag in the native MobilePush SDK.

Kind: Static method of MCReactModule

Returns: Promise.<boolean> - A promise to the boolean representation of whether push is enabled.

See Also

• Android SDK Reference
• iOS SDK Reference

Enables push messaging in the native MobilePush SDK.

Kind: Static method of MCReactModule

See Also

• Android SDK Reference
• iOS SDK Reference

Disables push messaging in the native MobilePush SDK.

Kind: Static method of MCReactModule

See Also

• Android SDK Reference
• iOS SDK Reference

This method returns the token used by Marketing Cloud Engagement to send push messages to the device.

Kind: Static method of MCReactModule

Returns: Promise.<string?> - A promise to the system token string.

See Also

• Android SDK Reference
• iOS SDK Reference

Returns the maps of attributes set in the registration.

Kind: Static method of MCReactModule

Returns: Promise.<Object.<string, string>> - A promise to the key-value map of attributes set in the registration.

See Also

• Android SDK Reference
• iOS SDK Reference

Sets the value of an attribute in the registration.

Kind: Static method of MCReactModule

See Also

• Android SDK Reference
• iOS SDK Reference

Clears the value of an attribute in the registration.

Kind: Static method of MCReactModule

See Also

• Android SDK Reference
• iOS SDK Reference

Kind: Static method of MCReactModule

See Also

• Android SDK Reference
• iOS SDK Reference

Kind: Static method of MCReactModule

See Also

• Android SDK Reference
• iOS SDK Reference

Returns the tags currently set on the device.

Kind: Static method of MCReactModule

Returns: Promise.<Array.<string>> - A promise to the array of tags currently set in the native SDK.

See Also

• Android SDK Reference
• iOS SDK Reference

Sets the contact key for the device's user.

Kind: Static method of MCReactModule

See Also

• Android SDK Reference
• iOS SDK Reference

Returns the contact key currently set on the device.

Kind: Static method of MCReactModule

Returns: Promise.<string?> - A promise to the current contact key.

See Also

• Android SDK Reference
• iOS SDK Reference

Enables verbose logging within the native MobilePush SDK and Unified SFMC SDK.

Kind: Static method of MCReactModule

See Also

• Troubleshoot Issues in Android Apps
• iOS SDK Reference

Disables verbose logging within the native MobilePush SDK.

Kind: Static method of MCReactModule

See Also

• Troubleshoot Issues in Android Apps
• iOS SDK Reference

Instructs the native SDK to log the SDK state to the native logging system (Logcat for Android and Xcode or Console for iOS). The Engagement Support team requests for the SDK state logs during support calls as they can help diagnose most issues.

Kind: Static method of MCReactModule

See Also

• Android SDK Reference
• iOS SDK Reference

This method helps to track events, which could result in actions such as an InApp Message being displayed.

Kind: Static method of MCReactModule

See Also

• Event Tracking

Returns the deviceId used by Engagement to send push messages to the device.

Kind: Static method of MCReactModule

Returns: Promise.<string?> - A promise to the device ID.

See Also

• Android SDK Reference
• iOS SDK Reference

Enables or disables analytics in the MobilePush SDK.

Kind: Static method of MCReactModule

See Also

• Runtime Toggles

Checks if analytics is enabled in the MobilePush SDK.

Kind: Static method of MCReactModule

Returns: Promise.<boolean> - A promise to the boolean representation of whether analytics is enabled.

See Also

• Runtime Toggles

Enables or disables Predictive Intelligence (PI) analytics in the MobilePush SDK.

Kind: Static method of MCReactModule

See Also

• Runtime Toggles

Checks if PI analytics is enabled in the MobilePush SDK.

Kind: Static method of MCReactModule

Returns: Promise.<boolean> - A promise to the boolean representation of whether PI analytics is enabled.

See Also

• Runtime Toggles

Where possible, we changed noninclusive terms to align with our company value of Equality. We retained noninclusive terms to document a third-party system, but we encourage the developer community to embrace more inclusive language. We can update the term when it’s no longer required for technical accuracy.