Initial SDK setup
Installing the Braze React Native SDK provides basic analytics functionality and lets you integrate in-app messages and Content Cards for both iOS and Android with just one codebase.
You will need to complete installation steps on both platforms separately.
To complete the installation, you will need the App Identifier API key as well as the SDK endpoint. Both are located under Manage Settings in the dashboard.
Step 1: Integrate the Braze library
Add the Braze React Native SDK package.
1
2
3
npm install react-native-appboy-sdk
# or using yarn
# yarn add react-native-appboy-sdk
Step 2: Complete native setup
Step 2.1a: Add our repository
In your top-level project build.gradle
, add the following as repositories under allprojects
> repositories
:
1
2
3
4
5
6
allprojects {
repositories {
...
maven { url "https://appboy.github.io/appboy-android-sdk/sdk" }
}
}
Step 2.1b: Configure the Braze SDK
To connect to Braze servers, create a braze.xml
file in your project’s res/values
folder. Paste the following code and replace the API key and endpoint with your values:
1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="com_braze_api_key">YOU_APP_IDENTIFIER_API_KEY</string>
<string translatable="false" name="com_braze_custom_endpoint">YOUR_CUSTOM_ENDPOINT_OR_CLUSTER</string>
</resources>
Add the required permissions to your AndroidManifest.xml
file:
1
2
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
Step 2.1c: Implement user session tracking
The calls to openSession()
and closeSession()
are handled automatically.
Add the following code to the onCreate()
method of your MainApplication
class:
1
2
3
4
5
6
7
8
import com.braze.BrazeActivityLifecycleCallbackListener;
@Override
public void onCreate() {
super.onCreate();
...
registerActivityLifecycleCallbacks(new BrazeActivityLifecycleCallbackListener());
}
1
2
3
4
5
6
7
import com.braze.BrazeActivityLifecycleCallbackListener
override fun onCreate() {
super.onCreate()
...
registerActivityLifecycleCallbacks(BrazeActivityLifecycleCallbackListener())
}
Step 2.1d: Handle intent updates
If your MainActivity has android:launchMode
set to singleTask
, add the following code to your MainActivity
class:
1
2
3
4
5
@Override
public void onNewIntent(Intent intent) {
super.onNewIntent(intent);
setIntent(intent);
}
1
2
3
4
override fun onNewIntent(intent: Intent) {
super.onNewIntent(intent)
setIntent(intent)
}
Step 2.2a: Install pods
Since React Native automatically links the libraries to the native platform, you can install the SDK with the help of CocoaPods.
From the root folder of the project:
1
cd ios && pod install
Step 2.2b: Configure the Braze SDK
Add Appboy SDK import at the top of the AppDelegate.m
file:
1
#import "Appboy-iOS-SDK/AppboyKit.h"
In the same file, add the following snippet within the application:didFinishLaunchingWithOptions
method:
1
2
3
[Appboy startWithApiKey:@"YOUR-APP-IDENTIFIER-API-KEY"
inApplication:application
withLaunchOptions:launchOptions];
Then, add your SDK Endpoint in the Info.plist
file. It is located in the ios
project folder. If you’re working in Xcode:
- Add a row with the name
Braze
and type ofDictionary
. - To that Dictionary, add a row with the name
Endpoint
, typeString
and as a value, input your SDK endpoint.
Otherwise, add the following elements to the file:
1
2
3
4
5
<key>Braze</key>
<dict>
<key>Endpoint</key>
<string>sdk.your-endpoint.com</string>
</dict>
Step 3: Usage
Once installed, you can import
the library in your React Native code:
1
import ReactAppboy from "react-native-appboy-sdk";
Test your basic integration
At this point, you can verify that the SDK is integrated by checking session statistics in the dashboard. If you run your application on either platform, you should see a new session in dashboard (in the Overview section).
You can open a session for a particular user by calling the following code in your app.
1
ReactAppboy.changeUser("user-id");
For example, you can assign the user ID at the startup of the app:
1
2
3
4
5
6
7
8
9
10
11
12
13
import React, { useEffect } from "react";
import ReactAppboy from "react-native-appboy-sdk";
const App = () => {
useEffect(() => {
ReactAppboy.changeUser("some-user-id");
}, []);
return (
<div>
...
</div>
)
You can then search for the user with some-user-id
in the dashboard under User Search. There, you can verify that session and device data have been logged.