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,5 +1,5 @@
 import type React from 'react';
-import { findNodeHandle, Platform, processColor } from 'react-native';
+import { Platform, findNodeHandle, processColor } from 'react-native';
 
 import type {
   NavigationContainerRefWithCurrent,
@@ -10,8 +10,7 @@ import type { NavigationAction, NavigationState as NavigationStateV4 } from 'rea
 
 import type { InstabugConfig } from '../models/InstabugConfig';
 import Report from '../models/Report';
-import { emitter, NativeEvents, NativeInstabug } from '../native/NativeInstabug';
-import { registerW3CFlagsListener } from '../utils/FeatureFlags';
+import { NativeEvents, NativeInstabug, emitter } from '../native/NativeInstabug';
 import {
   ColorTheme,
   Locale,
@@ -68,8 +67,6 @@ export const init = (config: InstabugConfig) => {
   InstabugUtils.captureJsErrors();
   captureUnhandledRejections();
 
-  Platform.OS === 'android' && registerW3CFlagsListener();
-
   // Default networkInterceptionMode to JavaScript
   if (config.networkInterceptionMode == null) {
     config.networkInterceptionMode = NetworkInterceptionMode.javascript;
@@ -547,7 +544,7 @@ export const onStateChange = (state?: NavigationStateV5) => {
 export const setNavigationListener = (
   navigationRef: NavigationContainerRefWithCurrent<ReactNavigation.RootParamList>,
 ) => {
-  return navigationRef.addListener('state', () => {
+  navigationRef.addListener('state', () => {
     onStateChange(navigationRef.getRootState());
   });
 };
@@ -643,20 +640,3 @@ export const componentDidAppearListener = (event: ComponentDidAppearEvent) => {
     _lastScreen = event.componentName;
   }
 };
-
-/**
- * Sets listener to W3ExternalTraceID flag changes
- * @param handler A callback that gets the update value of the flag
- */
-export const _registerW3CFlagsChangeListener = (
-  handler: (payload: {
-    isW3ExternalTraceIDEnabled: boolean;
-    isW3ExternalGeneratedHeaderEnabled: boolean;
-    isW3CaughtHeaderEnabled: boolean;
-  }) => void,
-) => {
-  emitter.addListener(NativeEvents.ON_W3C_FLAGS_CHANGE, (payload) => {
-    handler(payload);
-  });
-  NativeInstabug.registerW3CFlagsChangeListener();
-};

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',