From 509f56c2eb81934f951d850071d4e915907429cd Mon Sep 17 00:00:00 2001
From: wesleyorbin <wesley.orbin@braze.com>
Date: Fri, 22 Jul 2022 19:50:03 -0400
Subject: [PATCH 1/9] prepare for RN SDK v1.37.0 and expo plugin
---
.../react_native/analytics.md | 18 ++---
.../react_native/content_cards.md | 14 ++--
.../react_native/inapp_messages.md | 39 +++++++---
.../react_native/push_notifications.md | 3 +-
.../react_native/react_sdk_setup.md | 76 +++++++++++++++++--
5 files changed, 115 insertions(+), 35 deletions(-)
diff --git a/_docs/_developer_guide/platform_integration_guides/react_native/analytics.md b/_docs/_developer_guide/platform_integration_guides/react_native/analytics.md
index bdb215d36a9..586c470b884 100644
--- a/_docs/_developer_guide/platform_integration_guides/react_native/analytics.md
+++ b/_docs/_developer_guide/platform_integration_guides/react_native/analytics.md
@@ -20,7 +20,7 @@ The Braze SDK reports session data used by the Braze dashboard to calculate user
To set a user ID or start a session, use the `changeUser` method, which takes a user ID parameter.
```javascript
-ReactAppboy.changeUser("user_id");
+Braze.changeUser("user_id");
```
## Logging custom events
@@ -28,13 +28,13 @@ ReactAppboy.changeUser("user_id");
You can record custom events in Braze to learn more about your app’s usage patterns and to segment your users by their actions in the dashboard.
```javascript
-ReactAppboy.logCustomEvent("react_native_custom_event");
+Braze.logCustomEvent("react_native_custom_event");
```
You can add metadata about the event by passing a properties object with your custom event.
```javascript
-reactAppboy.logCustomEvent("custom_event_with_properties", {
+Braze.logCustomEvent("custom_event_with_properties", {
key1: "value1",
key2: ["value2", "value3"],
key3: false,
@@ -50,7 +50,7 @@ Braze provides methods for assigning attributes to users. You’ll be able to fi
To assign user attributes automatically collected by Braze, you can use setter methods that come with the SDK.
```javascript
-ReactAppboy.setFirstName("Name");
+Braze.setFirstName("Name");
```
The following attributes are supported:
@@ -75,7 +75,7 @@ Beyond the default user attributes, Braze also allows you to define custom attri
String values have a maximum length of 255 characters.
```javascript
-ReactAppboy.setCustomUserAttribute("attribute_key", "attribute_value", function(){
+Braze.setCustomUserAttribute("attribute_key", "attribute_value", function(){
// optional onResult callback
});
```
@@ -83,7 +83,7 @@ ReactAppboy.setCustomUserAttribute("attribute_key", "attribute_value", function(
#### Unsetting a custom attribute
```javascript
-ReactAppboy.unsetCustomUserAttribute("attribute_key", function(){
+Braze.unsetCustomUserAttribute("attribute_key", function(){
// optional onResult callback
});
```
@@ -95,13 +95,13 @@ Record in-app purchases so that you can track your revenue over time and across
Braze supports purchases in multiple currencies. Purchases that you report in a currency other than USD will be shown in the dashboard in USD based on the exchange rate at the date they were reported.
```javascript
-ReactAppboy.logPurchase(productId, price, currencyCode, quantity, properties);
+Braze.logPurchase(productId, price, currencyCode, quantity, properties);
```
For example:
```javascript
-ReactAppboy.logPurchase("product_id", 9.99, "USD", 1, {
+Braze.logPurchase("product_id", 9.99, "USD", 1, {
key1: "value"
});
```
@@ -122,4 +122,4 @@ The following keys are **reserved** and **cannot** be used as purchase propertie
- `currency`
[0]: {{site.baseurl}}/developer_guide/platform_wide/analytics_overview/
-[1]: {{site.baseurl}}/user_guide/data_and_analytics/custom_data/event_naming_conventions/
\ No newline at end of file
+[1]: {{site.baseurl}}/user_guide/data_and_analytics/custom_data/event_naming_conventions/
diff --git a/_docs/_developer_guide/platform_integration_guides/react_native/content_cards.md b/_docs/_developer_guide/platform_integration_guides/react_native/content_cards.md
index a9394a357cc..b8de9fc7fe8 100644
--- a/_docs/_developer_guide/platform_integration_guides/react_native/content_cards.md
+++ b/_docs/_developer_guide/platform_integration_guides/react_native/content_cards.md
@@ -11,7 +11,7 @@ channel: content cards
# Content Cards
-The Braze SDKs include a default card feed to get you started with Content Cards. To show the card feed, you can use the `ReactAppboy.launchContentCards()` method. The default card feed included with the Braze SDK will handle all analytics tracking, dismissals, and rendering for a user's Content Cards.
+The Braze SDKs include a default card feed to get you started with Content Cards. To show the card feed, you can use the `Braze.launchContentCards()` method. The default card feed included with the Braze SDK will handle all analytics tracking, dismissals, and rendering for a user's Content Cards.
## Customization
@@ -19,18 +19,18 @@ You can use these additional methods to build a custom Content Cards Feed within
| Method | Description |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
-| `ReactAppboy.requestContentCardsRefresh()` | Requests the latest Content Cards from the Braze SDK server. |
-| `ReactAppboy.getContentCards()` | Retrieves Content Cards from the Braze SDK. This will return the latest list of cards from the server. |
-| `ReactAppboy.logContentCardClicked(cardId)` | Logs a click for the given Content Card ID. |
-| `ReactAppboy.logContentCardImpression(cardId)` | Logs an impression for the given Content Card ID. |
-| `ReactAppboy.logContentCardDismissed(cardId)` | Logs a dismissal for the given Content Card ID. |
+| `Braze.requestContentCardsRefresh()` | Requests the latest Content Cards from the Braze SDK server. |
+| `Braze.getContentCards()` | Retrieves Content Cards from the Braze SDK. This will return the latest list of cards from the server. |
+| `Braze.logContentCardClicked(cardId)` | Logs a click for the given Content Card ID. |
+| `Braze.logContentCardImpression(cardId)` | Logs an impression for the given Content Card ID. |
+| `Braze.logContentCardDismissed(cardId)` | Logs a dismissal for the given Content Card ID. |
{: .reset-td-br-1 .reset-td-br-2}
## Test displaying sample Content Card
Follow these steps to test a sample Content Card.
-1. Set an active user in the React application by calling `ReactAppboy.changeUserId('your-user-id')` method.
+1. Set an active user in the React application by calling `Braze.changeUserId('your-user-id')` method.
2. Head to **Campaigns** and follow [this guide][4] to create a new Content Card campaign.
3. Compose your test Content Card campaign and head over to the **Test** tab. Add the same `user-id` as the test user and click **Send Test**. You should be able to launch a Content Card on your device shortly.
diff --git a/_docs/_developer_guide/platform_integration_guides/react_native/inapp_messages.md b/_docs/_developer_guide/platform_integration_guides/react_native/inapp_messages.md
index 28b40443409..c10335a0883 100644
--- a/_docs/_developer_guide/platform_integration_guides/react_native/inapp_messages.md
+++ b/_docs/_developer_guide/platform_integration_guides/react_native/inapp_messages.md
@@ -15,10 +15,31 @@ Native in-app messages display automatically on Android and iOS when using React
## Accessing in-app message data
+If you want to access the in-app message data in the Javascript layer, call the `Braze.subscribeToInAppMessage()` method to have the SDKs to publish an `inAppMessageReceived` event when an in-app message is triggered. You can pass a callback to this method or set a listener for this event to perform a callback when the in-app message is triggered.
+
+This method takes in a parameter that tells the Braze SDK whether or not to use the built-in Braze UI to display in-app messages. If you prefer to use a custom UI, you can pass `false` to this method and use the in-app message data to construct your own message in Javascript.
+
+```javascript
+import Braze from "react-native-appboy-sdk";
+
+Braze.subscribeToInAppMessage(false, (event) => {
+ const inAppMessage = new Braze.BrazeInAppMessage(event.inAppMessage);
+});
+
+// You can also set a listener for the event directly
+DeviceEventEmitter.addListener("inAppMessageReceived", (event) => {
+ const inAppMessage = new Braze.BrazeInAppMessage(event.inAppMessage);
+});
+```
+
+## Advanced customization
+
+If you would like to include more advanced logic to determine whether or not to show an in-app message using the built-in UI, you should implement in-app messages through the native layer.
+
{% tabs %}
{% tab Android %}
-If you want to access the in-app message data in the JavaScript layer, implement the `IInAppMessageManagerListener` as described in our Android article on [Custom Manager Listener]({{site.baseurl}}/developer_guide/platform_integration_guides/android/in-app_messaging/customization/custom_listeners/#custom-manager-listener). In your `beforeInAppMessageDisplayed` implementation, you can access the `inAppMessage` data, send it to the JavaScript layer, and decide to show or not show the native message based on the return value.
+Implement the `IInAppMessageManagerListener` as described in our Android article on [Custom Manager Listener]({{site.baseurl}}/developer_guide/platform_integration_guides/android/in-app_messaging/customization/custom_listeners/#custom-manager-listener). In your `beforeInAppMessageDisplayed` implementation, you can access the `inAppMessage` data, send it to the JavaScript layer, and decide to show or not show the native message based on the return value.
For more on these values, see our [Android documentation]({{site.baseurl}}/developer_guide/platform_integration_guides/android/in-app_messaging/).
@@ -41,7 +62,7 @@ public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMess
{% endtab %}
{% tab iOS %}
-If you would like to access the in-app message data in the JavaScript layer, implement the `ABKInAppMessageControllerDelegate` delegate as described in our iOS article on [core in-app message delegate]({{site.baseurl}}/developer_guide/platform_integration_guides/ios/in-app_messaging/customization/setting_delegates/#core-in-app-message-delegate). In the `beforeInAppMessageDisplayed:` delegate method, you can access the `inAppMessage` data, send it to the JavaScript layer, and decide to show or not show the native message based on the return value.
+Implement the `ABKInAppMessageControllerDelegate` delegate as described in our iOS article on [core in-app message delegate]({{site.baseurl}}/developer_guide/platform_integration_guides/ios/in-app_messaging/customization/setting_delegates/#core-in-app-message-delegate). In the `beforeInAppMessageDisplayed:` delegate method, you can access the `inAppMessage` data, send it to the JavaScript layer, and decide to show or not show the native message based on the return value.
For more on these values, see our [iOS documentation]({{site.baseurl}}/developer_guide/platform_integration_guides/ios/in-app_messaging/customization/handing_in_app_display/).
@@ -69,12 +90,12 @@ For more on these values, see our [iOS documentation]({{site.baseurl}}/developer
{% endtab %}
{% endtabs %}
-## Receiving in-app message in JavaScript
+### Receiving in-app message in JavaScript
On the JavaScript side, this data can be used to instantiate a `BrazeInAppMessage`:
```javascript
DeviceEventEmitter.addListener("inAppMessageReceived", (event) => {
- const inAppMessage = new ReactAppboy.BrazeInAppMessage(event.inAppMessage);
+ const inAppMessage = new Braze.BrazeInAppMessage(event.inAppMessage);
});
```
@@ -88,18 +109,18 @@ To log analytics using your `BrazeInAppMessage`, pass the instance into the desi
For example:
```js
// Log a click
-ReactAppboy.logInAppMessageClicked(inAppMessage);
+Braze.logInAppMessageClicked(inAppMessage);
// Log an impression
-ReactAppboy.logInAppMessageImpression(inAppMessage);
+Braze.logInAppMessageImpression(inAppMessage);
// Log button index `0` being clicked
-ReactAppboy.logInAppMessageButtonClicked(inAppMessage, 0);
+Braze.logInAppMessageButtonClicked(inAppMessage, 0);
```
## Test displaying a sample in-app message
Follow these steps to test a sample in-app message.
-1. Set an active user in the React application by calling `ReactAppboy.changeUserId('your-user-id')` method.
+1. Set an active user in the React application by calling `Braze.changeUserId('your-user-id')` method.
2. Head to **Campaigns** and follow [this guide][5] to create a new in-app message campaign.
3. Compose your test in-app messaging campaign and head over to the **Test** tab. Add the same `user-id` as the test user and click **Send Test**. You should be able to launch an in-app message on your device shortly.
@@ -113,4 +134,4 @@ A sample implementation can be found in AppboyProject, within the [React SDK][7]
[6]: {% image_buster /assets/img/react-native/iam-test.png %} "In-App Messaging Test"
[7]: https://github.com/Appboy/appboy-react-sdk
[8]: https://github.com/Appboy/appboy-android-sdk
-[9]: https://github.com/Appboy/appboy-ios-sdk
\ No newline at end of file
+[9]: https://github.com/Appboy/appboy-ios-sdk
diff --git a/_docs/_developer_guide/platform_integration_guides/react_native/push_notifications.md b/_docs/_developer_guide/platform_integration_guides/react_native/push_notifications.md
index 3e9dd571562..28079462f53 100644
--- a/_docs/_developer_guide/platform_integration_guides/react_native/push_notifications.md
+++ b/_docs/_developer_guide/platform_integration_guides/react_native/push_notifications.md
@@ -25,7 +25,7 @@ At this point, you should be able to send notifications to the devices. Adhere t
You can't test push notification related app behavior on an iOS simulator because simulators don't support the device tokens required to send and receive a push notification.
{% endalert %}
-1. Set an active user in the React application by calling `ReactAppboy.changeUserId('your-user-id')` method.
+1. Set an active user in the React application by calling `Braze.changeUserId('your-user-id')` method.
2. Head to **Campaigns** and create a new push notification campaign. Choose the platforms that you'd like to test.
3. Compose your test notification and head over to the **Test** tab. Add the same `user-id` as the test user and click **Send Test**. You should receive the notification on your device shortly.
@@ -34,4 +34,3 @@ You can't test push notification related app behavior on an iOS simulator becaus
[1]: {{site.baseurl}}/developer_guide/platform_integration_guides/android/push_notifications/integration/standard_integration/
[2]: {{site.baseurl}}/developer_guide/platform_integration_guides/ios/push_notifications/integration/
[3]: {% image_buster /assets/img/react-native/push-notification-test.png %} "Push Campaign Test"
-
diff --git a/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md b/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
index 7d8aa2d7781..a1f0ea90677 100644
--- a/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
+++ b/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
@@ -119,7 +119,7 @@ override fun onNewIntent(intent: Intent) {
{% endtab %}
{% tab iOS %}
-#### Step 2.2a: Install pods
+#### Step 2.1: Install pods
Since React Native automatically links the libraries to the native platform, you can install the SDK with the help of CocoaPods.
@@ -129,7 +129,7 @@ From the root folder of the project:
cd ios && pod install
```
-#### Step 2.2b: Configure the Braze SDK
+#### Step 2.2: Configure the Braze SDK
Add Appboy SDK import at the top of the `AppDelegate.m` file:
@@ -148,7 +148,7 @@ In the same file, add the following snippet within the `application:didFinishLau
Then, add your SDK Endpoint in the `Info.plist` file. It is located in the `ios` project folder. If you're working in Xcode:
1. Add a row with the name `Braze` and type of `Dictionary`.
-2. To that Dictionary, add a row with the name `Endpoint`, type `String` and as a value, input your [SDK endpoint]({{site.baseurl}}/api/basics/#endpoints).
+2. To that Dictionary, add a row with the name `Endpoint`, type `String` and as a value, input your [SDK endpoint]({{site.baseurl}}/api/basics/#endpoints).
Otherwise, add the following elements to the file:
@@ -160,6 +160,66 @@ Otherwise, add the following elements to the file:
</dict>
```
+{% endtab %}
+{% tab Expo}
+
+#### Step 2.1: Install the Braze Expo plugin
+
+Ensure that your version of the Braze React Native SDK is at least 1.37.0. Then, install the Braze Expo plugin.
+
+```bash
+expo install @braze/expo-plugin
+```
+
+#### Step 2.2: Add the plugin to your app.json
+
+In your `app.json`, add the Braze Expo Plugin. You can provide the following configuration options:
+
+| Method | Type | Description |
+| ------------------------------------| ---------| -------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `apiKey` | string | Required. The API key for your application. |
+| `customEndpoint` | string | Required. The [SDK endpoint]({{site.baseurl}}/api/basics/#endpoints) for your application. |
+| `fcmSenderID` | string | Android only. Your Firebase Cloud Messaging sender ID. |
+| `sessionTimeout` | integer | The Braze session timeout for your application in seconds. |
+| `enableSdkAuthentication` | boolean | Whether to enable the [SDK Authentcation](https://www.braze.com/docs/developer_guide/platform_wide/sdk_authentication#sdk-authentication) feature. |
+| `logLevel` | integer | The log level for your application. The default log level is 8 and will minimally log info. To enable verbose logging for debugging, use log level 0. |
+| `enableGeofence` | boolean | Whether geofences are enabled. |
+| `minimumTriggerIntervalInSeconds` | integer | The minimum time interval in seconds between triggers. Defaults to 30 seconds. |
+| `enableAutomaticLocationCollection` | boolean | Whether automatic location collection is enabled (if the user permits). |
+| `enableAutomaticGeofenceRequests` | boolean | Whether geofence requests should be made automatically. |
+| `dismissModalOnOutsideTap` | boolean | iOS only. Whether a modal in-app message will be dismissed when the user clicks outside of the in-app message. |
+{: .reset-td-br-1 .reset-td-br-2 .reset-td-br-3}
+
+Example configuration:
+
+```javascript
+{
+ "expo": {
+ "plugins": [
+ [
+ "@braze/expo-plugin",
+ {
+ "apiKey": "YOUR-API-KEY",
+ "customEndpoint": "YOUR-SDK-ENDPOINT",
+ "sessionTimeout": 60,
+ "enableGeofence": true
+ }
+ ],
+ ]
+ }
+}
+```
+
+#### Step 2.3: Build and run your application
+
+Prebuilding your application will generate the native files necessary for the Braze SDK to work.
+
+```bash
+expo prebuild
+```
+
+Run your application as specified in the [Expo docs](https://docs.expo.dev/workflow/customizing/). Note that making any changes to the configuration options will require you to prebuild and run the application again.
+
{% endtab %}
{% endtabs %}
@@ -168,7 +228,7 @@ Otherwise, add the following elements to the file:
Once installed, you can `import` the library in your React Native code:
```javascript
-import ReactAppboy from "react-native-appboy-sdk";
+import Braze from "react-native-appboy-sdk";
```
## Test your basic integration
@@ -178,18 +238,18 @@ At this point, you can verify that the SDK is integrated by checking session sta
You can open a session for a particular user by calling the following code in your app.
```javascript
-ReactAppboy.changeUser("user-id");
+Braze.changeUser("user-id");
```
For example, you can assign the user ID at the startup of the app:
```javascript
import React, { useEffect } from "react";
-import ReactAppboy from "react-native-appboy-sdk";
+import Braze from "react-native-appboy-sdk";
const App = () => {
useEffect(() => {
- ReactAppboy.changeUser("some-user-id");
+ Braze.changeUser("some-user-id");
}, []);
return (
@@ -203,4 +263,4 @@ You can then search for the user with `some-user-id` in the dashboard under **Us
[1]: {{site.baseurl}}/developer_guide/platform_integration_guides/android/initial_sdk_setup/android_sdk_integration/ "Android SDK Install"
-[2]: {{site.baseurl}}/developer_guide/platform_integration_guides/ios/initial_sdk_setup/overview/ "iOS SDK Install"
\ No newline at end of file
+[2]: {{site.baseurl}}/developer_guide/platform_integration_guides/ios/initial_sdk_setup/overview/ "iOS SDK Install"
From e14860ac0d483a5b4ed57259a9398335ddace2dc Mon Sep 17 00:00:00 2001
From: wesleyorbin <wesley.orbin@braze.com>
Date: Fri, 22 Jul 2022 20:17:58 -0400
Subject: [PATCH 2/9] fix syntax highlighting
---
.../platform_integration_guides/react_native/react_sdk_setup.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md b/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
index a1f0ea90677..27548fe665a 100644
--- a/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
+++ b/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
@@ -192,7 +192,7 @@ In your `app.json`, add the Braze Expo Plugin. You can provide the following con
Example configuration:
-```javascript
+```json
{
"expo": {
"plugins": [
From 3d93a3020ea7c01c3ee275c84ef093dd19b67a58 Mon Sep 17 00:00:00 2001
From: wesleyorbin <wesley.orbin@braze.com>
Date: Fri, 22 Jul 2022 23:35:21 -0400
Subject: [PATCH 3/9] fix syntax error
---
.../platform_integration_guides/react_native/react_sdk_setup.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md b/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
index 27548fe665a..08a6c8ccaa4 100644
--- a/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
+++ b/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
@@ -161,7 +161,7 @@ Otherwise, add the following elements to the file:
```
{% endtab %}
-{% tab Expo}
+{% tab Expo %}
#### Step 2.1: Install the Braze Expo plugin
From 6eb3f46a8d8a5b1ed8a7c90f909f226ab9990a15 Mon Sep 17 00:00:00 2001
From: wesleyorbin <wesley.orbin@braze.com>
Date: Mon, 25 Jul 2022 10:50:39 -0700
Subject: [PATCH 4/9] update in-app message docs
---
.../react_native/inapp_messages.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/_docs/_developer_guide/platform_integration_guides/react_native/inapp_messages.md b/_docs/_developer_guide/platform_integration_guides/react_native/inapp_messages.md
index c10335a0883..8687dd61035 100644
--- a/_docs/_developer_guide/platform_integration_guides/react_native/inapp_messages.md
+++ b/_docs/_developer_guide/platform_integration_guides/react_native/inapp_messages.md
@@ -27,7 +27,7 @@ Braze.subscribeToInAppMessage(false, (event) => {
});
// You can also set a listener for the event directly
-DeviceEventEmitter.addListener("inAppMessageReceived", (event) => {
+Braze.addListener(Braze.Events.IN_APP_MESSAGE_RECEIVED, (event) => {
const inAppMessage = new Braze.BrazeInAppMessage(event.inAppMessage);
});
```
@@ -94,7 +94,7 @@ For more on these values, see our [iOS documentation]({{site.baseurl}}/developer
On the JavaScript side, this data can be used to instantiate a `BrazeInAppMessage`:
```javascript
-DeviceEventEmitter.addListener("inAppMessageReceived", (event) => {
+Braze.addListener(Braze.Events.IN_APP_MESSAGE_RECEIVED, (event) => {
const inAppMessage = new Braze.BrazeInAppMessage(event.inAppMessage);
});
```
From b6549f928d3e97830b20cbeaa5504a003d77ee17 Mon Sep 17 00:00:00 2001
From: wesleyorbin <wesley.orbin@braze.com>
Date: Tue, 9 Aug 2022 13:04:32 -0400
Subject: [PATCH 5/9] update api key docs
---
.../react_native/react_sdk_setup.md | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md b/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
index 08a6c8ccaa4..e35f56d6387 100644
--- a/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
+++ b/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
@@ -177,7 +177,8 @@ In your `app.json`, add the Braze Expo Plugin. You can provide the following con
| Method | Type | Description |
| ------------------------------------| ---------| -------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `apiKey` | string | Required. The API key for your application. |
+| `androidApiKey` | string | Required. The API key for your Android application. |
+| `iosApiKey` | string | Required. The API key for your iOS application. |
| `customEndpoint` | string | Required. The [SDK endpoint]({{site.baseurl}}/api/basics/#endpoints) for your application. |
| `fcmSenderID` | string | Android only. Your Firebase Cloud Messaging sender ID. |
| `sessionTimeout` | integer | The Braze session timeout for your application in seconds. |
From a3c630ab3b4c4e4caef4e368e88e605d7dd84de6 Mon Sep 17 00:00:00 2001
From: davidbielik <davidbielik@users.noreply.github.com>
Date: Wed, 10 Aug 2022 10:12:40 -0400
Subject: [PATCH 6/9] Update react_sdk_setup.md
---
.../react_native/react_sdk_setup.md | 122 +++++++++---------
1 file changed, 61 insertions(+), 61 deletions(-)
diff --git a/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md b/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
index e35f56d6387..070d844f2f0 100644
--- a/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
+++ b/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
@@ -28,6 +28,67 @@ npm install react-native-appboy-sdk
## Step 2: Complete native setup
{% tabs %}
+{% tab Expo %}
+
+#### Step 2.1: Install the Braze Expo plugin
+
+Ensure that your version of the Braze React Native SDK is at least 1.37.0. Then, install the Braze Expo plugin.
+
+```bash
+expo install @braze/expo-plugin
+```
+
+#### Step 2.2: Add the plugin to your app.json
+
+In your `app.json`, add the Braze Expo Plugin. You can provide the following configuration options:
+
+| Method | Type | Description |
+| ------------------------------------| ---------| -------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `androidApiKey` | string | Required. The API key for your Android application. |
+| `iosApiKey` | string | Required. The API key for your iOS application. |
+| `customEndpoint` | string | Required. The [SDK endpoint]({{site.baseurl}}/api/basics/#endpoints) for your application. |
+| `fcmSenderID` | string | Android only. Your Firebase Cloud Messaging sender ID. |
+| `sessionTimeout` | integer | The Braze session timeout for your application in seconds. |
+| `enableSdkAuthentication` | boolean | Whether to enable the [SDK Authentcation](https://www.braze.com/docs/developer_guide/platform_wide/sdk_authentication#sdk-authentication) feature. |
+| `logLevel` | integer | The log level for your application. The default log level is 8 and will minimally log info. To enable verbose logging for debugging, use log level 0. |
+| `enableGeofence` | boolean | Whether geofences are enabled. |
+| `minimumTriggerIntervalInSeconds` | integer | The minimum time interval in seconds between triggers. Defaults to 30 seconds. |
+| `enableAutomaticLocationCollection` | boolean | Whether automatic location collection is enabled (if the user permits). |
+| `enableAutomaticGeofenceRequests` | boolean | Whether geofence requests should be made automatically. |
+| `dismissModalOnOutsideTap` | boolean | iOS only. Whether a modal in-app message will be dismissed when the user clicks outside of the in-app message. |
+{: .reset-td-br-1 .reset-td-br-2 .reset-td-br-3}
+
+Example configuration:
+
+```json
+{
+ "expo": {
+ "plugins": [
+ [
+ "@braze/expo-plugin",
+ {
+ "apiKey": "YOUR-API-KEY",
+ "customEndpoint": "YOUR-SDK-ENDPOINT",
+ "sessionTimeout": 60,
+ "enableGeofence": true
+ }
+ ],
+ ]
+ }
+}
+```
+
+#### Step 2.3: Build and run your application
+
+Prebuilding your application will generate the native files necessary for the Braze SDK to work.
+
+```bash
+expo prebuild
+```
+
+Run your application as specified in the [Expo docs](https://docs.expo.dev/workflow/customizing/). Note that making any changes to the configuration options will require you to prebuild and run the application again.
+
+{% endtab %}
{% tab Android %}
#### Step 2.1a: Add our repository
@@ -160,67 +221,6 @@ Otherwise, add the following elements to the file:
</dict>
```
-{% endtab %}
-{% tab Expo %}
-
-#### Step 2.1: Install the Braze Expo plugin
-
-Ensure that your version of the Braze React Native SDK is at least 1.37.0. Then, install the Braze Expo plugin.
-
-```bash
-expo install @braze/expo-plugin
-```
-
-#### Step 2.2: Add the plugin to your app.json
-
-In your `app.json`, add the Braze Expo Plugin. You can provide the following configuration options:
-
-| Method | Type | Description |
-| ------------------------------------| ---------| -------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `androidApiKey` | string | Required. The API key for your Android application. |
-| `iosApiKey` | string | Required. The API key for your iOS application. |
-| `customEndpoint` | string | Required. The [SDK endpoint]({{site.baseurl}}/api/basics/#endpoints) for your application. |
-| `fcmSenderID` | string | Android only. Your Firebase Cloud Messaging sender ID. |
-| `sessionTimeout` | integer | The Braze session timeout for your application in seconds. |
-| `enableSdkAuthentication` | boolean | Whether to enable the [SDK Authentcation](https://www.braze.com/docs/developer_guide/platform_wide/sdk_authentication#sdk-authentication) feature. |
-| `logLevel` | integer | The log level for your application. The default log level is 8 and will minimally log info. To enable verbose logging for debugging, use log level 0. |
-| `enableGeofence` | boolean | Whether geofences are enabled. |
-| `minimumTriggerIntervalInSeconds` | integer | The minimum time interval in seconds between triggers. Defaults to 30 seconds. |
-| `enableAutomaticLocationCollection` | boolean | Whether automatic location collection is enabled (if the user permits). |
-| `enableAutomaticGeofenceRequests` | boolean | Whether geofence requests should be made automatically. |
-| `dismissModalOnOutsideTap` | boolean | iOS only. Whether a modal in-app message will be dismissed when the user clicks outside of the in-app message. |
-{: .reset-td-br-1 .reset-td-br-2 .reset-td-br-3}
-
-Example configuration:
-
-```json
-{
- "expo": {
- "plugins": [
- [
- "@braze/expo-plugin",
- {
- "apiKey": "YOUR-API-KEY",
- "customEndpoint": "YOUR-SDK-ENDPOINT",
- "sessionTimeout": 60,
- "enableGeofence": true
- }
- ],
- ]
- }
-}
-```
-
-#### Step 2.3: Build and run your application
-
-Prebuilding your application will generate the native files necessary for the Braze SDK to work.
-
-```bash
-expo prebuild
-```
-
-Run your application as specified in the [Expo docs](https://docs.expo.dev/workflow/customizing/). Note that making any changes to the configuration options will require you to prebuild and run the application again.
-
{% endtab %}
{% endtabs %}
From 2b18829a9018a08a21715a8ad8b407b73bb12433 Mon Sep 17 00:00:00 2001
From: davidbielik <davidbielik@users.noreply.github.com>
Date: Wed, 10 Aug 2022 10:13:54 -0400
Subject: [PATCH 7/9] Update react_sdk_setup.md
---
.../react_native/react_sdk_setup.md | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md b/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
index 070d844f2f0..91493e3c22f 100644
--- a/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
+++ b/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
@@ -67,7 +67,8 @@ Example configuration:
[
"@braze/expo-plugin",
{
- "apiKey": "YOUR-API-KEY",
+ "androidApiKey": "YOUR-ANDROID-API-KEY",
+ "iosApiKey": "YOUR-IOS-API-KEY",
"customEndpoint": "YOUR-SDK-ENDPOINT",
"sessionTimeout": 60,
"enableGeofence": true
@@ -260,8 +261,9 @@ const App = () => {
)
```
-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.
+You can then search for the user with `some-user-id` in the dashboard under [User Search][user-search]. There, you can verify that session and device data have been logged.
[1]: {{site.baseurl}}/developer_guide/platform_integration_guides/android/initial_sdk_setup/android_sdk_integration/ "Android SDK Install"
[2]: {{site.baseurl}}/developer_guide/platform_integration_guides/ios/initial_sdk_setup/overview/ "iOS SDK Install"
+[user-search]: {{site.baseurl}}/user_guide/engagement_tools/segments/using_user_search#using-user-search
From bb3f968a3e09a37ea4ca142debaf209d8cfe2fcd Mon Sep 17 00:00:00 2001
From: davidbielik <davidbielik@users.noreply.github.com>
Date: Wed, 10 Aug 2022 10:14:36 -0400
Subject: [PATCH 8/9] Update
_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
---
.../platform_integration_guides/react_native/react_sdk_setup.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md b/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
index 91493e3c22f..7a6e223ecc5 100644
--- a/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
+++ b/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
@@ -237,7 +237,7 @@ import Braze from "react-native-appboy-sdk";
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.
+You can start a session for a particular user by calling the following code in your app.
```javascript
Braze.changeUser("user-id");
From e85b518fcb4612e562abcda9cf0156a5f7adcf1a Mon Sep 17 00:00:00 2001
From: wesleyorbin <wesley.orbin@braze.com>
Date: Fri, 12 Aug 2022 14:00:43 -0400
Subject: [PATCH 9/9] update customEndpoint to baseUrl
---
.../react_native/react_sdk_setup.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md b/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
index 7a6e223ecc5..004ad62f9ed 100644
--- a/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
+++ b/_docs/_developer_guide/platform_integration_guides/react_native/react_sdk_setup.md
@@ -46,7 +46,7 @@ In your `app.json`, add the Braze Expo Plugin. You can provide the following con
| ------------------------------------| ---------| -------------------------------------------------------------------------------------------------------------------------------------------------------|
| `androidApiKey` | string | Required. The API key for your Android application. |
| `iosApiKey` | string | Required. The API key for your iOS application. |
-| `customEndpoint` | string | Required. The [SDK endpoint]({{site.baseurl}}/api/basics/#endpoints) for your application. |
+| `baseUrl` | string | Required. The [SDK endpoint]({{site.baseurl}}/api/basics/#endpoints) for your application. |
| `fcmSenderID` | string | Android only. Your Firebase Cloud Messaging sender ID. |
| `sessionTimeout` | integer | The Braze session timeout for your application in seconds. |
| `enableSdkAuthentication` | boolean | Whether to enable the [SDK Authentcation](https://www.braze.com/docs/developer_guide/platform_wide/sdk_authentication#sdk-authentication) feature. |
@@ -69,7 +69,7 @@ Example configuration:
{
"androidApiKey": "YOUR-ANDROID-API-KEY",
"iosApiKey": "YOUR-IOS-API-KEY",
- "customEndpoint": "YOUR-SDK-ENDPOINT",
+ "baseUrl": "YOUR-SDK-ENDPOINT",
"sessionTimeout": 60,
"enableGeofence": true
}