Heap causing application to reload/refresh when native popup is shown

[rubenmaas]

Our environment

    ...
    "react-native": "0.66.0",
    "@react-navigation/bottom-tabs": "^5.11.9",
    "@react-navigation/drawer": "^5.12.5",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.4",
    "@heap/react-native-heap": "^0.16.0",
    ...

Our findings on both iOS and Android

• Wrapping HeapNavigationContainer around the standard NavigationContainer through Heap.withReactNavigationAutotrack causes the application to refresh/reload, whenever a native popup is triggered for permissions to access native modules like the camera, photo library. We have several authentication providers that use OAuth authentication flows through async function calls with awaits to authenticate the user.

• Jest tests fail with an error when using the provided babel configuration: Components/Touchable/TouchableNativeFeedback.js: Cannot read property 'end' of null. There are no events defined in the entire application manually (we integrated Heap following the docs for auto-capturing events).

[Dmitry-GH]

So, this issue has been live since the end of 2021 and it's still open? Any workarounds?

[bnickel]

The issue is likely that Heap.withReactNavigationAutotrack is being called inside a function (likely App). Any time that App executes, HeapNavigationContainer is a new component class causing the whole navigation container to be reconstructed.

The fix is to move the definition out of the function. E.g.:

const HeapNavigationContainer = Heap.withReactNavigationAutotrack(NavigationContainer);

const App = () => {
  ...
  return (
    <HeapNavigationContainer>
      ...
    </HeapNavigationContainer>
  );
};

PR #406 is in review right now to address the issue by caching the component.

[Dmitry-GH]

@bnickel thank you so much for your investigation, your fix is working!