[HEAP-42725] Return the same component each time from `withHeapNaviga…

…tionWrapper` (#406)

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- `Heap.withHeapNavigationWrapper` returns the same object when called
+  multiple times, preventing app refreshes when used within a
+  re-evaluated function like `App` with `useEffect`.
+
 ## [0.22.4] - 2023-09-05
 
 ### Fixed

js/__tests__/Heap.spec.js

@@ -247,4 +247,28 @@ describe('The Heap object', () => {
       expect(() => Heap.clearEventProperties()).not.toThrow();
     });
   });
+
+  describe('withReactNavigationAutotrack', () => {
+
+    it('returns a different HOC for each passed in AppContainer', () => {
+
+      function Component1() {}
+      function Component2() {}
+
+      const Wrapped1 = Heap.withReactNavigationAutotrack(Component1);
+      const Wrapped2 = Heap.withReactNavigationAutotrack(Component2);
+
+      expect(Wrapped1).not.toStrictEqual(Wrapped2);
+    });
+
+    it('returns the same HOC when given the same AppContainer', () => {
+
+      function Component1() {}
+
+      const Wrapped1 = Heap.withReactNavigationAutotrack(Component1);
+      const Wrapped2 = Heap.withReactNavigationAutotrack(Component1);
+
+      expect(Wrapped1).toStrictEqual(Wrapped2);
+    });
+  });
 });

js/autotrack/reactNavigation.js

@@ -12,6 +12,12 @@ const EVENT_TYPE = 'react_navigation_screenview';
 const INITIAL_ROUTE_TYPE = 'Heap_Navigation/INITIAL';
 
 export const withReactNavigationAutotrack = track => AppContainer => {
+
+  const existingWrapper = AppContainer.__heapWrapper;
+  if (existingWrapper) {
+    return existingWrapper;
+  }
+
   const captureOldNavigationStateChange = bailOnError((prev, next, action) => {
     const { screen_path: prevScreenRoute } = NavigationUtil.getActiveRouteProps(
       prev
@@ -153,7 +159,7 @@ export const withReactNavigationAutotrack = track => AppContainer => {
     AppContainer
   )})`;
 
-  return React.forwardRef((props, ref) => {
+  return AppContainer.__heapWrapper = React.forwardRef((props, ref) => {
     return <HeapNavigationWrapper {...props} forwardedRef={ref} />;
   });
 };