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.

TODO

• Ingest deploymentTarget from expo-build-properties config plugin if it's in use.
• Add tests
  • Unit tests for helpers
  • Unit tests for all mods
• Add support for additional customization on Android:
  • Back stack behavior
  • Notification channels
  • Custom notification display
  • Custom handling for push receipts, opens, dismissals, and key-value pairs
  • HTML push notification support
  • Custom sounds
  • In-App Message Customization
  • Content Card Customization
• Add support for additional customization on iOS:
  • Auto-clearing badge number
  • Custom sounds
  • Ignoring internal push
  • Push primer integration
  • Push stories
  • Advanced implementation options
  • In-App Messaging Customization
  • Content Card Customization