Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Typescript Type for routeNameRef in React Navigation v5 in screen tracking for analytics

$
0
0

I am following the docs to implement screen tracking with react-native-firebase analytics in a React Native App that uses Typescript. https://reactnavigation.org/docs/5.x/screen-tracking and https://rnfirebase.io/analytics/screen-tracking

I found the type for navigationRef:

import { NavigationContainer, NavigationContainerRef } from '@react-navigation/native';const navigationRef = useRef<NavigationContainerRef>(null);

But I cannot find the type for routeNameRef and I am getting some linting errors if I hover over navigationRef.current?.getCurrentRoute().name:

Object is possibly 'null'.ts(2531)Object is possibly 'undefined'.ts(2532)const navigationRef: React.RefObject<NavigationContainerRef>

Here is my code:

const Navigator = () => {  const navigationRef = useRef<NavigationContainerRef>(null);  const routeNameRef = useRef();  return (<NavigationContainer    ref={navigationRef}    onReady={() => {      routeNameRef.current = navigationRef.current?.getCurrentRoute().name;    }}    onStateChange={async () => {      const previousRouteName = routeNameRef.current;      const currentRouteName = navigationRef.current.getCurrentRoute().name;      if (previousRouteName !== currentRouteName) {        await analytics().logScreenView({          screen_name: currentRouteName,          screen_class: currentRouteName,        });      }      routeNameRef.current = currentRouteName;    }}

What is the proper type for routeNameRef?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>