@braze/react-native-sdk

Braze React Native 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 React Native npm package
• Braze User Guide
• Initial React Native SDK Setup

Version Support

[!NOTE] This SDK has been tested with React Native version 0.77.0.

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

This SDK additionally inherits the requirements of its underlying Braze native SDKs. Be sure to also adhere to the lists below:

• Android SDK requirements
• Swift SDK requirements

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 Native SDK.
• Run the tests and code coverage report using npm test

Changelog

14.0.0

Breaking

• Resolves an Android issue with setDateOfBirth(year, month, day) introduced in 1.38.0, where the month was indexed 0-11 instead of 1-12. The months are now indexed from 1-12 on both Android and iOS.
  • The previous behavior on Android would assign setDateOfBirth(1970, 1, 1) to the month of February instead of the intended month of January, and setDateOfBirth(1970, 12, 1) to null instead of the intended month of December.
  • Customers who wish to retroactively rectify this are recommended to ask their users to confirm their dates of birth and call setDateOfBirth with these values.
• Updates the native Android version bindings from Braze Android SDK 32.1.0 to 35.0.0.
  • The minimum required Android SDK version is 25. See more details here.
• The NativeBrazeReactModule.ts file has been moved into a sub-directory called specs.
  • If your project contains direct references to this file, you will need to update the relative path of your imports to /specs/NativeBrazeReactModule.
  • For an example, refer to the sample test setup here.

Added

• Updates the native iOS version bindings from Braze Swift SDK 11.2.0 to 11.7.0.
• Adds support for the Braze Banner Cards product and APIs to utilize them.
  • Braze.requestBannersRefresh(placementIds) - to request a refresh of the banners associated with the provided placement IDs. On iOS only, failures will be logged if unsuccessful.
  • Braze.getBanner(placementId) - to get a banner with the provided placement ID if available in cache, otherwise returns null.
  • Braze.Events.BANNER_CARDS_UPDATED event for Braze.addListener - to subscribe to banners updates.
• Adds the default UI components for Braze Banner Cards.
  • To use this feature, insert the Braze.BrazeBannerView component into your view hierarchy with the required placementID property.