Install and initialize

📘

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.zaius.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:

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()).