Skip to content

feat: navigation tracking support with expo router #1270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 12, 2024
Merged

feat: navigation tracking support with expo router #1270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
65b765c
feat: add screen tracker on screen change listener and tests
kholood-ea Aug 11, 2024
d38e643
feat (example): add screen change listener
kholood-ea Aug 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions examples/default/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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',
Expand All @@ -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}>
Comment on lines +37 to +45
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can keep this one using onStateChange and add a new example app with Expo Router using the new API. What do you think?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think adding expo example app is a good idea, but for now the navigation listener covers both cases.
we can change it back to onStateChange afterwards

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kholood-ea I think having an Expo app in our examples would still be beneficial for testing other Expo-specific features. Besides it allows us to have both APIs (Instabug.onStateChange and Instabug.setNavigationListener) in the example apps. What do you think?

<RootTabNavigator />
</NavigationContainer>
</QueryClientProvider>
Expand Down
18 changes: 17 additions & 1 deletion src/modules/Instabug.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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);
};
Expand Down
18 changes: 18 additions & 0 deletions test/modules/Instabug.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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',
Expand Down