Skip to content

Commit 39aa46f

Browse files
Thaganamikehardy
andauthored
docs(analytics): update screen tracking example (#5564)
* Updating screen tracking example Updating screen tracking example documentation to include full example. Also removed ``state`` and ``getActiveRouteName`` as you need to create that function to extract active route name from the state. The idea is for someone to quickly use the example without trying to figure out what does ``getActiveRouteName`` and where is it defined. Co-authored-by: Mike Hardy <[email protected]>
1 parent 6b5dca5 commit 39aa46f

File tree

1 file changed

+28
-12
lines changed

1 file changed

+28
-12
lines changed

docs/analytics/screen-tracking.md

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,34 @@ method the Analytics library provides:
2020
import analytics from '@react-native-firebase/analytics';
2121
import { NavigationContainer } from '@react-navigation/native';
2222

23-
<NavigationContainer
24-
ref={navigationRef}
25-
onStateChange={async (state) => {
26-
const previousRouteName = routeNameRef.current;
27-
const currentRouteName = getActiveRouteName(state);
28-
29-
if (previousRouteName !== currentRouteName) {
30-
await analytics().logScreenView({
31-
screen_name: currentRouteName,
32-
screen_class: currentRouteName,
33-
});
34-
}
23+
const App = () => {
24+
const routeNameRef = React.useRef();
25+
const navigationRef = React.useRef();
26+
return (
27+
<NavigationContainer
28+
ref={navigationRef}
29+
onReady={() => {
30+
routeNameRef.current = navigationRef.current.getCurrentRoute().name;
31+
}}
32+
onStateChange={async () => {
33+
const previousRouteName = routeNameRef.current;
34+
const currentRouteName = navigationRef.current.getCurrentRoute().name;
35+
36+
if (previousRouteName !== currentRouteName) {
37+
await analytics().logScreenView({
38+
screen_name: currentRouteName,
39+
screen_class: currentRouteName,
40+
});
41+
}
42+
routeNameRef.current = currentRouteName;
43+
}}
44+
>
45+
...
46+
</NavigationContainer>
47+
);
48+
};
49+
50+
export default App;
3551
```
3652

3753
For a full working example, view the [Screen tracking for analytics](https://reactnavigation.org/docs/screen-tracking/)

0 commit comments

Comments
 (0)