Install and initialize

7 min

📘 Availability The React Native SDK is not available for all customers.

You can check your availability by following the instructions in the Create Mobile Apps in ODP UI in the Get started article. If you see the Mobile App integration option, you can use the React Native SDK. For more information, contact your Customer Success Manager.

npm module

The ODP SDK module was written using TypeScript and is fully compatible with both JavaScript and TypeScript applications. For information on how to create a React Native application, see React Native's official documentation.

If you are developing a new React Native app and want to integrate with ODP, you should use TypeScript.react-native init Project --template typescript.

The ODP React Native SDK is distributed through npm. To add it to your package run:

npm install --save @zaiusinc/react-native-sdk @react-native-async-storage/async-storage react-native-push-notification

🚧 Important If you are relying on the ODP SDK, you must use react-native-push-notification version 3.2.1. If you are handling the display of the notifications, newer versions may work.

iOS

For an iOS project, you also need to run the following:

npm install --save @react-native-community/push-notification-ios
cd <project>/ios && pod install

Then run:

react-native link

After this, you need to let your application's Bundle ID have the Push Notifications capability. In Xcode, click Capabilities and scroll down to Push Notifications. See Apple developer's documentation on adding capabilities to your app.

Android

For an Android project, add the following XML in your <project>/android/app/src/main/AndroidManifest.xml file, to permit your application to manage Push Notifications. See the Android developer documentation on the receiver element and service element.

<receiver
  android:name="com.google.android.gms.gcm.GcmReceiver"
  android:exported="true"
  android:permission="com.google.android.c2dm.permission.SEND" >
  <intent-filter>
    <action android:name="com.google.android.c2dm.intent.RECEIVE" />
    <category android:name="${applicationId}" />
  </intent-filter>
</receiver>
<!-- < Only if you are using GCM or localNotificationSchedule() > -->

<receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
<receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
  <intent-filter>
    <action android:name="android.intent.action.BOOT_COMPLETED" />
  </intent-filter>
</receiver>
<service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationRegistrationService"/>

<!-- < Only if you are using GCM or localNotificationSchedule() > -->
<service
  android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerServiceGcm"
  android:exported="false" >
  <intent-filter>
    <action android:name="com.google.android.c2dm.intent.RECEIVE" />
  </intent-filter>
</service>
<!-- </ Only if you are using GCM or localNotificationSchedule() > -->

<!-- < Else > -->
<service
  android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
  android:exported="false" >
  <intent-filter>
    <action android:name="com.google.firebase.MESSAGING_EVENT" />
  </intent-filter>
</service>
<!-- </Else> -->

You also need to install your google-services.json following Google's developer documentation. From the google-services.json file, you need the project_number field, which you use as the "Sender ID".

Initialize

To use the ODP React Native SDK, you must configure it first. You need the following information.

The Short Identifier from the Mobile Apps integration. This will be your App ID.

The API Key obtained from the APIs section in ODP. You can find your API Key in the key field under Public.

Required for Android apps but not for iOS apps, the Sender ID which is the project_number field from the google-services.json file.

With this information, you can use the main entry point for the SDK, Zaius.configure().

Zaius.configure({
    appId: string,
    apiKey: string,
    appVersion?: string = '',
    baseUrl?: string = 'https://api.us1.odp.optimizely.com/v3',
    onNotification?: (notification: PushNotification) => void = () => undefined,
    onRegister?: (push_token: PushToken) => void = () => undefined,
    platform?: 'ios' | 'ios-sandbox' | 'android' | 'tvos' | 'tvos_sandbox' | 'unknown' // = [calculated from Platform.OS]
    requestPermissions?: boolean = true,
    senderID?: string = '',
    startQueue?: boolean = true,
}) : Promise<Zaius>

The arguments of configure are as follows:

Argument	Required?	Description
appId	Yes	The App ID obtained from the APIs section in ODP. You can find your API Key in the key field under Public; the Shortened Name of your project.
apiKey	Yes	The API Key from the Public tab in the APIs section of the ODP app.
appVersion	No	The version of your app, sent with each request to help you keep track of which customers are using which version.
baseUrl	No	Where the ODP API is located. You should not change this.
onNotification	No	A callback function that is called when a push notification is received by the app (Android) or tapped by the user (both Android and iOS). See Push notifications.
onRegister	No	A callback function that is called when permission for push notifications were granted. Once this callback is called, everything is set up on the phone side for pushes to work.
platform	No	Which platform the app is running on; detected if it is not supplied.
requestPermissions	No	If this is false, then it is up to the app author to call Zaius.requestPermission() for push notifications to be initialized. See Push Notifications.
senderID	Yes, for Android	Required for Push Notifications on Android. The Sender ID is found in the google-services.json file. You can obtain this file from Firebase by following Google directions. The Sender ID is the value found at project_info
startQueue	No	When set to true, the SDK will start processing the Event queue as soon as it can. See Events for more information about the Event queue.

The return type of Zaius.configure is a Promise and so you must handle it as a Promise or call it from an async function.

After you have the Zaius object from configure(), the following functions are available on both the object returned from Zaius.configure() and as functions directly on the global Zaius object (for example, Zaius.customer()).

Function	Description
Zaius.getConfig()	Returns the configuration that the Zaius object is using.
Zaius.getVUID()	Returns the VUID that identifies the current user. See Customers.
Zaius.anonymize()	Generates a new VUID, effectively anonymizing the user.
Zaius.event()	Queues an event into the Event queue. See Events.
Zaius.customer()	Updates information about this Customer with ODP. See Customers.
Zaius.identify()	Updates Customer identification information. See Customers.