diff --git a/src/connections/sources/catalog/libraries/mobile/react-native/index.md b/src/connections/sources/catalog/libraries/mobile/react-native/index.md index 9259f46072..64da252f82 100644 --- a/src/connections/sources/catalog/libraries/mobile/react-native/index.md +++ b/src/connections/sources/catalog/libraries/mobile/react-native/index.md @@ -47,7 +47,7 @@ To get started with the Analytics for React Native library: npm install --save @react-native-async-storage/async-storage ``` - To use your own persistence layer you can use the storePersistor option when initializing the client. Make sure you always have a persistor (either by having AsyncStorage package installed or by explicitly passing a value), else you might get unexpected side effects like multiple 'Application Installed' events + To use your own persistence layer you can use the storePersistor option when initializing the client. Make sure you always have a persistor, either by having AsyncStorage package installed or by explicitly passing a value, or you might get unexpected side effects like multiple 'Application Installed' events. 4. If you're using iOS, install native modules with: @@ -75,7 +75,7 @@ These are the options you can apply to configure the client: | Name | Default | Description | | --------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `writeKey` | '' | Your Segment API key (**required**). | +| `writeKey` | '' | Your Segment API key (**required**). | | `collectDeviceId` | false | Set to `true` to automatically collect the device ID from the DRM API on Android devices. | | `debug` | true\* | When set to `false`, it will not generate any logs. | | `logger` | undefined | Custom logger instance to expose internal Segment client logging. | @@ -275,7 +275,7 @@ alias('user-123'); The Reset method clears the internal state of the library for the current user and group. This is useful for apps where users can log in and out with different identities over time. > warning "" -> Each time you call Reset, a new AnonymousId is generated automatically. +> **Note:** Each time you call Reset, Segment generates a new AnonymousId. {% codeexample %} {% codeexampletab Method signature %} @@ -333,8 +333,9 @@ If you don't do this, the old client instance would still exist and retain the t Ideally, you shouldn't have to use this method and the Segment client should be initialized only once in the application lifecycle. -## Control upload with Flush Policies -To granularly control when Segment uploads events, use `FlushPolicies`. A Flush Policy defines the strategy for deciding when to flush. This can be on an interval, time of day, after receiving a certain number of events, or after receiving a particular event. This gives you more flexibility on when to send event to Segment. +## Control upload cadence with flush policies +To granularly control when Segment uploads events you can use `FlushPolicies`. +A Flush Policy defines the strategy for deciding when to flush. This can be on an interval, time of day, after receiving a certain number of events, or after receiving a particular event. This gives you more flexibility on when to send event to Segment. Set Flush Policies in the configuration of the client: ```ts @@ -347,12 +348,13 @@ const client = createClient({ ], }); ``` -You can set several policies at a time. When a flush occurs, it triggers an upload of the events then resets the logic after every flush. As a result, only the first policy to reach `shouldFlush` will trigger a flush. In the example, the event count either reaches 5 or the timer reaches 500 ms - whatever comes first will trigger a flush. -Segment has several standard flush policies: -- `CountFlushPolicy` triggers when you reach a certain number of events. -- `TimerFlushPolicy` triggers on an interval of milliseconds. -- `StartupFlushPolicy` triggers on client startup only. +You can set several policies at a time. When a flush occurs, it triggers an upload of the events, then resets the logic after every flush. +As a result, only the first policy to reach `shouldFlush` triggers a flush. In the example above either the event count reaches 5 or the timer reaches 500ms, whatever comes first, will trigger a flush. +Segment has several standard Flush Policies: +- `CountFlushPolicy` triggers when you reach a certain number of events +- `TimerFlushPolicy` triggers on an interval of milliseconds +- `StartupFlushPolicy` triggers on client startup only > info "" > If you implement custom flush policies, they replace Segment's default Count and Timer policies. To incorporate custom policies, add your custom Timer and Count policies to the client's Flush Policies configuration. @@ -399,7 +401,8 @@ Your policies also have a `shouldFlush` observable boolean value. When this is s export class FlushOnScreenEventsPolicy extends FlushPolicyBase { onEvent(event: SegmentEvent): void { // Only flush when a screen even happens - if (event.type === EventType.ScreenEvent) { + if (event.type \ + EventType.ScreenEvent) { this.shouldFlush.value = true; } } @@ -414,6 +417,7 @@ export class FlushOnScreenEventsPolicy extends FlushPolicyBase { ## Automatic screen tracking To avoid sending a Screen event with each navigation action, you can track navigation globally. The implementation depends on which navigation library you use. The two main navigation libraries for React Native are [React Navigation](https://reactnavigation.org/){:target="_blank"} and [React Native Navigation](https://wix.github.io/react-native-navigation/docs/before-you-start/){:target="_blank"}. + ### React Navigation When setting up React Navigation, find the root-level navigation container and call `screen()` whenever the user navigates to a new screen. Segment's [example app](https://github.com/segmentio/analytics-react-native/tree/master/example){:target="_blank"} is set up with screen tracking using React Navigation, so you can use it as a guide. @@ -457,7 +461,7 @@ To set up automatic screen tracking with React Navigation: } }} > -``` + ``` ### React Native Navigation To set up automatic screen tracking while using [React Native Navigation](https://wix.github.io/react-native-navigation/docs/before-you-start/){:target="_blank"}: @@ -482,19 +486,21 @@ Segment's plugin architecture lets you modify and augment how the events are pro | `enrichment` | Executes as the first level of event processing. | | `destination` | Executes as events begin to pass off to destinations. | | `after` | Executes after all event processing is completed. You can use this to perform cleanup operations. | -| `utility` | Executes only with manual calls such as Logging. | +| `utility` | Executes only with manual calls like Logging. | > info "" -> Plugins can have their own native code, such as the iOS-only [`IdfaPlugin`](https://github.com/segmentio/analytics-react-native/blob/829fc80bc8c4f59fa99dadd25083efa422d577f0/packages/plugins/plugin-idfa/README.md){:target="_blank"}, or wrap an underlying library, such as the [`FirebasePlugin`](https://www.npmjs.com/package/@segment/analytics-react-native-plugin-firebase){:target="_blank"} which uses `react-native-firebase`. +> Plugins can have their own native code (like the iOS-only [`IdfaPlugin`](https://github.com/segmentio/analytics-react-native/blob/829fc80bc8c4f59fa99dadd25083efa422d577f0/packages/plugins/plugin-idfa/README.md){:target="_blank"}) or wrap an underlying library (like the [`FirebasePlugin`](https://www.npmjs.com/package/@segment/analytics-react-native-plugin-firebase) which uses `react-native-firebase` under the hood). ### Destination plugins -Segment provides a `DestinationPlugin`. You can add additional destination plugins and upload events and data to them. +Segment is an out-of-the-box `DestinationPlugin`. You can add as many other destination plugins as you like and upload events and data to them. + If you don't want the Segment destination plugin, set `autoAddSegmentDestination = false` in the options when setting up your client. This prevents the `SegmentDestination` plugin from being added automatically. ### Adding plugins You can add a plugin at any time using `segmentClient.add()`. + ```js import { createClient } from '@segment/analytics-react-native'; @@ -515,6 +521,7 @@ segmentClient.add({ plugin: new IdfaPlugin() }); ### Writing your own plugins Plugins implement as [ES6 classes](https://www.w3schools.com/react/react_es6_classes.asp){:target="_blank"}. To get started, familiarize yourself with the available classes in `/packages/core/src/plugin.ts`. + The available plugin classes are: - `Plugin` - `EventPlugin` @@ -608,11 +615,12 @@ These are the example plugins you can use and alter to meet your tracking needs: | Firebase | `@segment/analytics-react-native-plugin-consent-firebase` | | IDFA | `@segment/analytics-react-native-plugin-idfa` | -