[SDK-2800] - React Native + Expo updates

_docs/_developer_guide/platform_integration_guides/react_native/analytics.md

@@ -20,21 +20,21 @@ 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
 
 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,15 +75,15 @@ 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
 });
 ```
 
 #### 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/
+[1]: {{site.baseurl}}/user_guide/data_and_analytics/custom_data/event_naming_conventions/

_docs/_developer_guide/platform_integration_guides/react_native/content_cards.md

@@ -11,26 +11,26 @@ 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
 
 You can use these additional methods to build a custom Content Cards Feed within your app:
 
 | 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.
 

_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
+Braze.addListener(Braze.Events.IN_APP_MESSAGE_RECEIVED, (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);
+Braze.addListener(Braze.Events.IN_APP_MESSAGE_RECEIVED, (event) => {
+  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
+[9]: https://github.com/Appboy/appboy-ios-sdk

_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"
-