docs(analytics): refined react-native-navigation example (#3560)

[skip-ci]
This commit is contained in:
Alexander Kurnikowski
2020-05-02 09:35:45 +02:00
committed by GitHub
parent 4f645dbeb9
commit 88010dfebd

View File

@@ -13,7 +13,7 @@ therefore there is no "one fits all" solution to screen tracking.
The [React Navigation](https://reactnavigation.org/) library allows for various navigation techniques such as
Stack, Tab, Native or even custom navigation. The `NavigationController` component which the library exposes provides
access to the current navigation state when a screen changes, allowing you to use the [`setCurrentScreen`](/reference/analytics#setcurrentscreen)
access to the current navigation state when a screen changes, allowing you to use the [`setCurrentScreen`](/reference/analytics#setCurrentScreen)
method the Analytics library provides:
```jsx
@@ -37,19 +37,19 @@ documentation on the React Navigation website.
# React Native Navigation
The [`wix/react-native-navigation`](https://github.com/wix/react-native-navigation) provides 100% native platform navigation
for React Native apps. To manually track screens, you need to setup a command listener and manually call the
[`setCurrentScreen`](/reference/analytics#setcurrentscreen) method the Analytics library provides:
for React Native apps. To manually track screens, you need to setup a `componentDidAppear` event listener and manually call the
[`setCurrentScreen`](/reference/analytics#setCurrentScreen) method the Analytics library provides:
```js
import analytics from '@react-native-firebase/analytics';
import { Navigation } from 'react-native-navigation';
Navigation.events().registerCommandListener((name, params) => {
if (name === 'push') {
analytics().setCurrentScreen(params.componentId, params.componentId);
Navigation.events().registerComponentDidAppearListener(({componentName, componentType}) => {
if (componentType === 'Component') {
analytics().setCurrentScreen(componentName, componentName);
}
});
```
To learn more, view the [events documentation](https://wix.github.io/react-native-navigation/#/docs/events?id=registercommandlistener)
To learn more, view the [events documentation](https://wix.github.io/react-native-navigation/api/events#componentdidappear)
on the React Native Navigation website.