feat: navigation tracking support with expo router (#1270)

* feat: add screen tracker on screen change listener and tests

* feat (example): add screen change listener

Author: kholood-ea

examples/default/src/App.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { StyleSheet } from 'react-native';
 
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
 import Instabug, {
   CrashReporting,
   InvocationEvent,
@@ -20,6 +20,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 const queryClient = new QueryClient();
 
 export const App: React.FC = () => {
+  const navigationRef = useNavigationContainerRef();
   useEffect(() => {
     Instabug.init({
       token: 'deb1910a7342814af4e4c9210c786f35',
@@ -33,11 +34,15 @@ export const App: React.FC = () => {
     });
   }, []);
 
+  useEffect(() => {
+    Instabug.setNavigationListener(navigationRef);
+  }, [navigationRef]);
+
   return (
     <GestureHandlerRootView style={styles.root}>
       <NativeBaseProvider theme={nativeBaseTheme}>
         <QueryClientProvider client={queryClient}>
-          <NavigationContainer onStateChange={Instabug.onStateChange} theme={navigationTheme}>
+          <NavigationContainer theme={navigationTheme} ref={navigationRef}>
             <RootTabNavigator />
           </NavigationContainer>
         </QueryClientProvider>

src/modules/Instabug.ts

@@ -1,7 +1,10 @@
 import type React from 'react';
 import { Platform, findNodeHandle, processColor } from 'react-native';
 
-import type { NavigationState as NavigationStateV5 } from '@react-navigation/native';
+import type {
+  NavigationContainerRefWithCurrent,
+  NavigationState as NavigationStateV5,
+} from '@react-navigation/native';
 import type { ComponentDidAppearEvent } from 'react-native-navigation';
 import type { NavigationAction, NavigationState as NavigationStateV4 } from 'react-navigation';
 
@@ -533,6 +536,19 @@ export const onStateChange = (state?: NavigationStateV5) => {
   }, 1000);
 };
 
+/**
+ * Sets a listener for screen change
+ *  @param navigationRef a refrence of a navigation container
+ *
+ */
+export const setNavigationListener = (
+  navigationRef: NavigationContainerRefWithCurrent<ReactNavigation.RootParamList>,
+) => {
+  navigationRef.addListener('state', () => {
+    onStateChange(navigationRef.getRootState());
+  });
+};
+
 export const reportScreenChange = (screenName: string) => {
   NativeInstabug.reportScreenChange(screenName);
 };

test/modules/Instabug.spec.ts

@@ -2,6 +2,7 @@ import '../mocks/mockInstabugUtils';
 import '../mocks/mockNetworkLogger';
 
 import { Platform, findNodeHandle, processColor } from 'react-native';
+import type { NavigationContainerRefWithCurrent } from '@react-navigation/native'; // Import the hook
 
 import { mocked } from 'jest-mock';
 import waitForExpect from 'wait-for-expect';
@@ -236,6 +237,23 @@ describe('Instabug Module', () => {
     await waitForExpect(() => expect(NativeInstabug.reportScreenChange).toBeCalledTimes(2));
   });
 
+  it('setNavigationListener should call the onStateChange on a screen change', async () => {
+    const mockNavigationContainerRef = {
+      current: null,
+      navigate: jest.fn(),
+      reset: jest.fn(),
+      goBack: jest.fn(),
+      dispatch: jest.fn(),
+      getRootState: jest.fn(),
+      canGoBack: jest.fn(),
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+    } as unknown as NavigationContainerRefWithCurrent<ReactNavigation.RootParamList>;
+
+    Instabug.setNavigationListener(mockNavigationContainerRef);
+    expect(mockNavigationContainerRef.addListener).toBeCalledTimes(1);
+  });
+
   it('should call the native method init', () => {
     const instabugConfig = {
       token: 'some-token',