React Native Expo

Step-by-Step Setup:

Add the mindbox-sdk:2.14.4 dependency to your package.json.
Make sure the version is 2.14.4 or higher.
Add the mindbox-expo-plugin dependency to your package.json. For example:
"mindbox-expo-plugin": "^1.0.2-rc",

💡
The mindbox-expo-plugin must be listed first in the plugins array.

Complete the SDK initialization steps up to section 2.2.

Android

Set up the integration point
Obtain Firebase keys
Add the mindbox-expo plugin to your app.json

Example:

 "plugins": [
      [
        "mindbox-expo-plugin",
        {
          "androidPushProviders": [
            "firebase",
            "huawei"
          ],
          "googleServicesFilePath": "./credentials/google-services.json",
          "huaweiServicesFilePath": "./credentials/agconnect-services.json",
          "androidChannelId": "expo_channel_id",
          "androidChannelName": "expo_name",
          "androidChannelDescription": "expo_description",
          "smallIcon": "./assets/icon_mb.png",
          "smallIconAccentColor": "#80F00A0A",
        }
      ]
    ]

You can find the available configuration options here:

Property Name	Possible Values	Notes
`androidPushProviders`	Array, possible values: ["firebase", "huawei"]	Choose the push providers you need
`googleServicesFilePath`	String. Path to google-services.json file	Required if using Firebase
`huaweiServicesFilePath`	String. Path to agcp-connect.json file.	Include this if intergrating with Huawei
`androidChannelId`	String. Notification channel ID.	has default value
`androidChannelName`	String. Notification channel name.	has default value
`androidChannelDescription`	String. Notification channel description.	has default value
`smallIcon`	String. Path to the small icon used for Android push notifications xml or png	has default value
`smallIconAccentColor`	String. Icon color.	has default value
`iosMode`	String. iOS Environment. Possible values: `development` or `production`	Default: `development`
`iosDevTeam`	String. Team ID. ()	Required if the `appleTeamId` parameter is not set in the app.json.
`iosDeploymentTarget`	String. deployment target for NSE and NCE	Taken from the project by default. Left here just in case, so it can be overridden if needed.
`iosNseFilePath`	String. Custom path to the NSE file	Custom NSE implementation
`iosNceFilePath`	String. Custom path to the NCE file	Custom NCE implementation
`iosAppGroupId`	No appGroup	Currently hardcoded as `group.cloud.Mindbox`. Left here in case it needs to be changed.
`nativeRequestPermission`	Boolean	iOS notification request If set to true, the necessary permission request strings will be added.”
`usedExpoNotification`	Boolean	When receiving push notifications from Mindbox and Expo Notifications

iOS

Set up the integration point
About sandbox
Obtain keys and set up APNs connection
Make sure that the following parameters are set in the ios section of app.json:
bundleIdentifier and appleTeamId

4.1 If appleTeamId is not set and cannot be specified, add the iosDevTeam to mindbox-expo-plugin property and provide the team ID as its value.
In the mindbox-expo-plugin property, set iosMode. Possible values:
"development" | "production";
The default value is "development"

General

Navigation on Push Click

To get the link in React Native, subscribe to the event that will be triggered from the native side when a push notification is clicked.

The callback will receive two arguments:

link — the link specified in the notification;
payload — the serialized push notification payload. If it’s a JSON string, you need to deserialize it by yourself.

MindboxSdk.onPushClickReceived((pushUrl: String | null, pushPayload: String | null) => {
  console.log(`${pushUrl} ${pushPayload}`);
});`

Integrating App Actions here
Available SDK Methods here
Requesting Push Notification Permissions

You can use expo-notifications to request push notification permissions.
Add expo-notifications to your package.json and call the appropriate method at the required place in your app.

import * as Notifications from 'expo-notifications';

.....

const { status: existingStatus } = await Notifications.getPermissionsAsync();
const finalStatus = existingStatus === 'granted' 
  ? existingStatus 
  : (await Notifications.requestPermissionsAsync()).status;

finalStatus === 'granted' && MindboxSdk.updateNotificationPermissionStatus(true);

Additional When Using expo-notifications

If you use expo-notifications, add the property "usedExpoNotification": true to the mindbox-expo-plugin configuration.

💡
The mindbox-expo-plugin must be listed first in the plugins array.

In expo-notifications callbacks such as:

Notifications.addNotificationReceivedListener

Notifications.addNotificationResponseReceivedListener

you need to check whether the push notification is from Maestra. Use the isMindboxPush method for this.

Example:

import { isMindboxPush } from 'mindbox-expo-plugin'; 
......
 const notificationListener = Notifications.addNotificationReceivedListener(value => {
      console.log('addNotificationReceivedListener');
        if (isMindboxPush(value)) {
          console.log("Received Mindbox push notification");
          return
        }
      setNotification(value);
    });

See an example here