@nayya/braze-expo-plugin NPM

Expo config plugin for the Braze SDK

Background

Currently, the Braze React Native SDK does not support the Expo managed workflow. This means that Braze customers who use the Expo managed workflow and want to include the Braze SDK are unable to do so unless they write their own Expo config plugin. This plugin meets our needs at Nayya, but may or may not meet the needs of other Braze SDK users.

Appboy/appboy-react-sdk#119 is tracking progress on a comprehensive config plugin.

Disclaimer

This plugin may or may not meet the needs of your Expo app, and it should not be considered stable or production ready.

It is subject to breaking changes until we reach v1.0.0.

It has only been tested with:

Expo SDK versions 44, 45, and 46
Using eas build with EAS managed credentials
A limited set of Android and iOS versions

Installation

yarn add @nayya/braze-expo-plugin

Setup

Add the plugin and its props to your app.config.js:

// Required props:
const androidSdkApiKey = process.env.BRAZE_SDK_API_KEY_ANDROID;
const androidSdkEndpoint = process.env.BRAZE_SDK_ENDPOINT_ANDROID;
const appleTeamId = '1234567890';
const firebaseBoMVersion = '29.3.1'; // Determines the versions of Firebase SDK packages. See https://firebase.google.com/docs/android/setup#available-libraries for versions.
const firebaseCloudMessagingSenderId = process.env.FIREBASE_SENDER_ID;
const iosSdkApiKey = process.env.BRAZE_SDK_API_KEY_IOS;
const iosSdkEndpoint = process.env.BRAZE_SDK_ENDPOINT_IOS;

// Optional props:
const iosDeploymentTarget = '12.0'; // Defaults to '12.0'
const largeNotificationIcon = './assets/icons/notification-icon-large.png';
const notificationIconBackgroundColor = '#6667AB';
const shouldUseProvisionalPush = false; // Defaults to 'false', set to `true` if you want to use Provisional Push on iOS instead of explicitly asking for permission. See https://developer.apple.com/documentation/**usernotifications**/asking_permission_to_use_notifications#3544375 for reference.
const smallNotificationIcon = './assets/icons/notification-icon-small.png';

export default {
  expo: {
    /* NOTE: the following config items are all required: */
    name: 'YourApp',
    sdkVersion: '44.0.0',
    ios: {
      buildNumber: '1.2.3',
      bundleIdentifier: 'your.app.here',
    },
    android: {
      versionCode: 123,
    },
    // ...
    plugins: [
      // ...
      [
        '@nayya/braze-expo-plugin',
        {
          // Required props:
          androidSdkApiKey,
          androidSdkEndpoint,
          appleTeamId,
          firebaseBoMVersion,
          firebaseCloudMessagingSenderId,
          iosSdkApiKey,
          iosSdkEndpoint,

          // Optional props:
          iosDeploymentTarget,
          largeNotificationIcon,
          notificationIconBackgroundColor,
          shouldUseProvisionalPush,
          smallNotificationIcon,
        },
      ],
    ],
  },
};

For local builds, define these vars in your local environment before building (could use dotenv).

For EAS builds, add them as secrets on the Expo website and then run the eas build command.