diff --git a/examples/default/src/App.tsx b/examples/default/src/App.tsx index d92db633c..ae548f97c 100644 --- a/examples/default/src/App.tsx +++ b/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 ( - + diff --git a/src/modules/Instabug.ts b/src/modules/Instabug.ts index baec7660a..b0a05032c 100644 --- a/src/modules/Instabug.ts +++ b/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, +) => { + navigationRef.addListener('state', () => { + onStateChange(navigationRef.getRootState()); + }); +}; + export const reportScreenChange = (screenName: string) => { NativeInstabug.reportScreenChange(screenName); }; diff --git a/test/modules/Instabug.spec.ts b/test/modules/Instabug.spec.ts index fdbdcae64..518e53ce9 100644 --- a/test/modules/Instabug.spec.ts +++ b/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; + + Instabug.setNavigationListener(mockNavigationContainerRef); + expect(mockNavigationContainerRef.addListener).toBeCalledTimes(1); + }); + it('should call the native method init', () => { const instabugConfig = { token: 'some-token',