@braze/react-native-sdk

Braze React SDK

Effective marketing automation is an essential part of successfully scaling and managing your business. Braze empowers you to build better customer relationships through a seamless, multi-channel approach that addresses all aspects of the user life cycle Braze helps you engage your users on an ongoing basis.

• Braze User Guide
• Initial React Native SDK Setup

Version Support

Braze Plugin	React Native	Supports New Architecture?
6.0.0+	>= 0.68	✅ (>= 0.70.0)
2.0.0+	>= 0.68	✅
<= 1.41.0	<= 0.71	❌

Braze Expo Plugin

If you're using Expo, you can install our plugin to integrate the React Native SDK without any native code. See the Braze Expo Plugin Github for more details.

Running the Sample App

• BrazeProject - Contains the BrazeProject sample app with integration examples for the React Native bridge. This sample app integrates the iOS bridge via manual linking, and the iOS SDK via Cocoapods. It can also optionally integrate the iOS bridge using Cocoapods via a local Podspec.

The following commands apply to both sample projects and use the BrazeProject directory as an example.

cd BrazeProject/
yarn install

# In a separate tab:
cd BrazeProject/
npx react-native start

iOS

Our sample app integrates the native Braze iOS SDK through Cocoapods.

From the BrazeProject directory:

sudo gem install cocoapods
cd ios/
pod install # If you are using the New Architecture, you need to run `RCT_NEW_ARCH_ENABLED=1 pod install` instead.
cd ../
npx react-native run-ios

Android

From the BrazeProject directory:

npx react-native run-android

Style

• Generally we try to mimic the Braze Web SDK's Javascript interface where appropriate.
• We use eslint as our linter. From the root directory, run npm run lint to list errors or npm run lint-fix to automatically fix errors. To override the rules in the standard-react config, add "rules" in .eslintrc.json.

Testing

• We use jest for testing the React SDK.
• Run the tests and code coverage report using npm test

Changelog

6.0.0

Breaking

• If you are using the New Architecture, this version requires React Native 0.70 or higher.
• Fixes the sample setup steps for iOS apps conforming to RCTAppDelegate.
  • ⚠️ If your app conforms to RCTAppDelegate and was following our previous AppDelegate setup in the sample project or Braze documentation, you will need to reference our updated samples to prevent any crashes from occurring when subscribing to events in the new Turbo Module. ⚠️
• If your project contains unit tests that depend on the Braze React Native module, you will need to update your imports to the NativeBrazeReactModule file to properly mock the Turbo Module functions in Jest.
  • For an example, refer to the sample test setup here.
• Updates the native Android bridge from Braze Android SDK 25.0.0 to 26.3.1.
• Fixes the presentation of in-app messages to match the documented behavior.
  • Calling subscribeToInAppMessages or addListener in the Javascript layer will no longer cause a custom BrazeInAppMessageUIDelegate implementation on iOS to be ignored.
  • Calling Braze.addListener for the inAppMessageReceived event will subscribe in both the Javascript and the native layers (iOS + Android). This means it is no longer required to call Braze.subscribeToInAppMessage.
    • Per the Braze documentation, you do not need to explicitly call subscribeToInAppMessage to use the default In-App Message UI.
  • See our documentation for more details around Advanced customization.

Added

• Migrates the Braze bridge to a backwards-compatible New Architecture Turbo Module.
  • This is a non-breaking change to your existing imports of the Braze SDK if you are using React Native 0.70+.
  • The Braze SDK continues to be compatible with both the New Architecture and old React Native architecture.
• Adds the getDeviceId method to replace getInstallTrackingId, which is now deprecated.
• Updates the native iOS bridge from Braze Swift SDK 6.3.1 to 6.4.0.
• Adds a conditional library namespace to the Android build.gradle file to prepare for React Native 0.73, which uses AGP 8.x.
  • For more details, refer to this React Native announcement.