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?