DOC-138 react native device mode dependencies (#1445)

* doc-138 react native deps

* add table for now

* checkin

* Fix table, some minor tweaks

* checkin

* checkin some cleanup to firebase

* force renumbering

* flesh out firebase a bit

* includify all the different react native instructions

* don't use google analytics for device mode. use firebase.

* small tweaks

Co-authored-by: sanscontext <>

Author: sanscontext

src/_includes/content/react-dest.md

@@ -0,0 +1,31 @@
+<!-- Usage: `include react-dest only={ios|android}` -->
+<!-- in the file we're pulling from the API, "name" corresponds with the path to the yml blob for a specific destination.-->
+{% assign currentSlug = page.url | split: "/" | last %}
+{% assign thisDest = site.data.catalog.destinations.items | where: "slug", currentSlug | first %}
+{% assign thisDestName = thisDest.display_name %}
+{% assign thisDestRNspecific = include.only %}
+
+
+{% if thisDestRNspecific %}
+<div class="premonition info">
+<div class="fa fa-info-circle"></div>
+<div class="content"><p>
+The {{thisDestName}} device-mode destination SDK is only available for {{thisDestRNspecific}} in React Native.
+</p></div></div>
+{%endif%}
+
+To add the {{thisDestName}} device-mode SDK to a [React Native](/docs/connections/sources/catalog/libraries/mobile/react-native/) project:
+1. Navigate to the root folder of your project, and run a `yarn add {{thisDestName | downcase | replace: " ", "-" }}{% if thisDestRNspecific %}-{{thisDestRNspecific}}{%endif%}` command to add the destination SDK to your project.
+2. Add an `import` statement to your project, as in the example below.
+   ```js
+   import {{thisDestName | replace: " ", "" }} from '@segment/analytics-react-native-{{thisDestName | downcase | replace: " ", "" }}{% if thisDestRNspecific %}-{{thisDestRNspecific}}{%endif%}'
+   ```
+3. In the same project file, add the destination to the `using` list in the `await` command.
+   ```js
+   await analytics.setup('YOUR_WRITE_KEY', {
+     // Add any of your Device-mode destinations. This ensures they load before continuing.
+     using: {{thisDestName | replace: " ", "" }}
+     // ...
+   })
+   ```
+4. Finally, change to your iOS development folder ( `cd ios` ) and run `pod install`.

src/connections/destinations/catalog/adjust/index.md

@@ -106,6 +106,10 @@ analytics = new Analytics.Builder(this, "write_key")
 
 After you build and release to the App Store, Segment automatically starts translating and sending your data to Adjust.
 
+### React Native
+
+{% include content/react-dest.md %}
+
 ### Server
 
 Our Cloud-mode integration allows you to send *supplemental* data to Adjust.  This, however, *does not* include attribution events. If you are relying on the Adjust server-side component, and you are not bundling the Segment-Adjust SDK, your installs will not be attributed. E-commerce events and other general `track` events are supported out of the box. You **must** map your `track` events to your custom Adjust Event Token in your [Adjust destination settings](#map-your-events-to-custom-adjust-event-tokens).

src/connections/destinations/catalog/amplitude/index.md

@@ -43,6 +43,10 @@ In addition to the docs below, Amplitude created a [integration guide](https://d
 
 If you included Segment's Javascript snippet on your page, then Amplitude's SDK loads on your page automatically and you can use Segment's to begin sending events right away.
 
+### React Native device mode set up
+
+{% include content/react-dest.md %}
+
 
 ## Page and Screen
 
@@ -446,7 +450,7 @@ with the user's `userId`, or what Amplitude refers to, respectively, as a
 
 By default, Segment does **NOT** send Alias events to Amplitude. To forward Alias events from Segment, go to your Amplitude destination settings in the Segment web app, and set the **Enable Alias** setting to "on". Once enabled, Segment forwards both client-based and server-based Alias calls. Segment processes _all_ Alias calls before sending them to Amplitude, so you won't see a `usermap` request to Amplitude if you check your browser's Network activity after making a Segment Alias call.
 
-> note ""  
+> note ""
 > To use Alias, you must have the Amplitude Portfolio add-on enabled.
 
 For more information, see the [Segment Spec page for the Alias method](https://segment.com/docs/connections/spec/alias/) and [the Amplitude `usermap` documentation](https://amplitude.zendesk.com/hc/en-us/articles/360002750712-Portfolio-Cross-Project-Analysis#user-mapping-aliasing).

src/connections/destinations/catalog/appsflyer/index.md

@@ -54,6 +54,10 @@ If you have the **Can Omit AppsFlyerID** setting enabled, but aren't sending an
 
 To prevent this, you can enable the new **Fallback to send IDFV when advertisingId key not present** setting in your AppsFlyer destination settings. With this enabled, when you send data using cloud-mode (through the Segment servers), Segment sends the user's IDFV (the `device.id`) when `device.advertisingId` is missing or blank AND “Can Omit AppsFlyerID” is enabled.
 
+#### Additional React Native device-mode set up
+
+{% include content/react-dest.md %}
+
 ### Server
 
 AppsFlyer offers an **augmentative** server-side [HTTP API](https://support.appsflyer.com/hc/en-us/articles/207034486-Server-to-Server-In-App-Events-API-HTTP-API-) intended for use along side the AppsFlyer mobile SDK. Use the cloud-mode destination _with_ the mobile SDK to link out-of-app events (such as website or offline purchases) with attributed users and devices.

src/connections/destinations/catalog/branch-metrics/index.md

@@ -31,6 +31,28 @@ This document was last updated on November 13, 2019. If you notice any gaps, out
   5. Paste the Branch Key in the destination settings and click **Save**.
 
 
+### Adding Branch device-mode SDKs for React Native
+
+<!-- LR, Mar2021: this should be a `react-dest` include but Branch changed their name from Branch-Metrics-->
+
+To add the Branch device-mode SDK to a [React Native](/docs/connections/sources/catalog/libraries/mobile/react-native/) project:
+1. Navigate to the root folder of your project, and run a `yarn add branch` command to add the destination SDK to your project.
+2. Add an `import` statement to your project, as in the example below.
+   ```js
+   import Branch from '@segment/analytics-react-native-branch'
+   ```
+3. In the same project file, add the destination to the `using` list in the `await` command.
+   ```js
+   await analytics.setup('YOUR_WRITE_KEY', {
+     // Add any of your Device-mode destinations. This ensures they load before continuing.
+     using: Branch
+     // ...
+   })
+   ```
+4. Finally, change to your iOS development folder ( `cd ios` ) and run `pod install`.
+
+
+
 ## Identify
 
 If you're not familiar with the Segment Specs, take a look to understand what the [Identify method](https://segment.com/docs/connections/spec/identify/) does. An example iOS call would look like:

src/connections/destinations/catalog/braze/index.md

@@ -94,6 +94,31 @@ To use the latest Braze SDK to collect IDFAs you must do the following:
 
 Braze has created a sample Android application that integrates Braze using Segment. Check it out at the [GitHub repo](https://github.com/Appboy/appboy-segment-android-sample).
 
+
+### React Native device-mode set up
+
+<!-- LR, Mar2021: this should be a `react-dest` include but Braze was originally called Appboy-->
+
+To add the Braze device-mode SDK to a [React Native](/docs/connections/sources/catalog/libraries/mobile/react-native/) project:
+1. Navigate to the root folder of your project, and run a `yarn add appboy` command to add the destination SDK to your project.
+2. Add an `import` statement to your project, as in the example below.
+   ```js
+   import Braze from '@segment/analytics-react-native-appboy'
+   ```
+3. In the same project file, add the destination to the `using` list in the `await` command.
+   ```js
+   await analytics.setup('YOUR_WRITE_KEY', {
+     // Add any of your Device-mode destinations. This ensures they load before continuing.
+     using: Braze
+     // ...
+   })
+   ```
+4. Finally, change to your iOS development folder ( `cd ios` ) and run `pod install`.
+
+
+> note ""
+> Braze was formerly known as "Appboy", and their React component still uses that name. Be sure to use the old name!
+
 ## Page
 
 If you're not familiar with the Segment Specs, take a look to understand what the [Page method](/docs/connections/spec/page/) does. An example call would look like:

src/connections/destinations/catalog/bugsnag/index.md

@@ -33,6 +33,11 @@ If you'd like to integrate with Bugsnag's iOS and/or Android SDKs, in addition t
 
 2. [iOS](https://github.com/segment-integrations/analytics-ios-integration-bugsnag)
 
+
+### React Native
+
+{% include content/react-dest.md %}
+
 - - -
 
 ## Identify

src/connections/destinations/catalog/clevertap/index.md

@@ -28,7 +28,7 @@ All other traits will be sent to CleverTap as custom attributes. Please also not
 
 ## Track
 
-When you `track` an event, we will send that event to CleverTap as a custom event.  Note that CleverTap does not support arrays or nested objects for custom track event properties. 
+When you `track` an event, we will send that event to CleverTap as a custom event.  Note that CleverTap does not support arrays or nested objects for custom track event properties.
 
 Please also note that the default logic for our cloud mode connection to CleverTap will lower case and snake_case any event properties passed from Segment's servers to CleverTap. Our device mode connection will not lower case or snake_case any event properties passed directly to CleverTap from the client.
 
@@ -147,6 +147,12 @@ No further action is required to integrate in-app notifications, which are regis
 
 CleverTap has created a sample iOS application that integrates CleverTap using Segment. Check it out at the [GitHub repo](https://github.com/CleverTap/clevertap-segment-ios/tree/master/Example).
 
+
+## React Native
+
+{% include content/react-dest.md %}
+
+
 ## Server-Side
 
 ### Push Tokens

src/connections/destinations/catalog/comscore/index.md

@@ -8,8 +8,7 @@ Our comScore destination code is open-source on GitHub if you want to check it o
 
 ## Analytics.js
 
-When you enable comScore in the Segment web app, your changes appear in the Segment CDN in about 45 minutes, and then Analytics.js starts asynchronously loading comScore's `beacon.js` onto your page. **This means you should remove comScore's snippet from your page.**
-+ comScore automatically starts recording data.
+When you enable comScore in the Segment web app, your changes appear in the Segment CDN in about 45 minutes, and then Analytics.js starts asynchronously loading comScore's `beacon.js` onto your page. **This means you should remove comScore's snippet from your page.** ComScore automatically starts recording data.
 
 ## Mobile
 
@@ -27,6 +26,10 @@ allprojects {
 }
 ```
 
+## React Native
+
+{% include content/react-dest.md only="ios"%}
+
 
 ### Settings
 Once the Segment source is integrated with your app, toggle comScore on in your Segment destinations catalog, and add your  **C2 Value**, also known as the client ID. The **C2 Value** can be found by clicking on the "Get Tag" button in the "Website" or "Mobile App" tabs within the Comscore dashboard.

src/connections/destinations/catalog/countly/index.md

@@ -6,11 +6,16 @@ Our Countly destination code is open source on GitHub. Feel free to check it out
 
 ## Getting Started
 
-To get started with Countly and Segment, you'll want to first integrate your mobile app with our [iOS](/docs/connections/sources/catalog/libraries/mobile/ios/) or [Android](/docs/connections/sources/catalog/libraries/mobile/android/) sources.
+To get started with Countly and Segment, add our [iOS](/docs/connections/sources/catalog/libraries/mobile/ios/), [Android](/docs/connections/sources/catalog/libraries/mobile/android/) or [React Native](/docs/connections/sources/catalog/libraries/mobile/react-native/) libraries to your mobile app.
 
 Once the Segment library is integrated with your app, toggle Countly on in your Segment destinations catalog, and add your application's **App Key** and **Server URL** which you can find in your Countly Application Management. If you're using their cloud hosted solution (not hosting your own Count.ly server), then your **Server URL** is `https://cloud.count.ly`.
 
-These new settings will take up to an hour to propogate to all of your existing users. For new users it'll be instanteneous!
+These new settings will take up to an hour to propagate to all of your existing users. For new users it'll be instantaneous!
+
+### React Native set up
+
+{% include content/react-dest.md %}
+
 
 - - -