Heap.withHeapIgnore doesnt ignore tracking

[kostas64]

"react-native": "0.71.9",
"@heap/react-native-heap": "^0.22.2",
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"@react-navigation/stack": "^6.3.16"

In my company's project we are using heap to autoTrack events. We have a "Terms & Conditions" screen with a switch button to let user disable or enable heap. Based on this var we are using :

Heap.withReactNavigationAutotrack(NavigationContainer) 
Heap.withHeapIgnore(NavigationContainer)

But in both cases Heap still sends tracks events and we validate it through Flipper.

Is it a known issue or you have any solution for this?

[bnickel]

How are you using Heap.withHeapIgnore in your app? The function doesn't modify the component but outputs a new one.

I was able to accomplish most of what you're looking for with the following:

const HeapNavigationContainer =
  Heap.withReactNavigationAutotrack(NavigationContainer);

const App: () => React.ReactNode = () => {
  const [isHeapEnabled, setIsHeapEnabled] = React.useState(true);

  return (
    <MyContext.Provider value={{isHeapEnabled, setIsHeapEnabled}}>
      <Heap.Ignore
        allowInteraction={isHeapEnabled}
        allowAllProps={true}
        allowInnerHierarchy={true}
        allowTargetText={true}>
        <HeapNavigationContainer>
          ...
        </HeapNavigationContainer>
      </Heap.Ignore>
    </MyContext.Provider>
  );
};

export const HeapEnabledSwitch = () => {
  const {isHeapEnabled, setIsHeapEnabled} = React.useContext(MyContext);
  return (
    <Switch
      onValueChange={setIsHeapEnabled}
      value={isHeapEnabled}
    />
  );
};

When isHeapEnabled is false, the <Heap.Ignore /> element prevents touch interactions from being captured.

Unfortunately, <Heap.Ignore /> does not apply to React Navigation events, so there are still screen view events. I tried doing const NavContainer = isHeapEnabled ? HeapNavigationContainer : NavigationContainer; but that reset the navigation state.

[kostas64]

We are wrapping all the app in the root level (App.tsx). Heap is not capturing navigation or touch events but it still sends an event that contains app id, app version and staff like this. They point is that we want to eliminate totally heap events, we don't need this one event. Is our logic wrong about heap ignore?

const HeapNavigationContainer = condition ?  Heap.withReactNavigationAutotrack(NavigationContainer) : Heap.withHeapIgnore(NavigationContainer);

 <HeapNavigationContainer linking={linking}>
            <RootStackNavigator />
 </HeapNavigationContainer>

[bnickel]

Sorry I missed this reply. The code you're using would prevent navigation and touch events, but it doesn't disable Heap. When Heap is initialized, it sends out an initial pageview as part of its data model, along with a potential install/upgrade event, and it creates the user.

If you want Heap not to run at all, you would need to remove auto-initialization through heap.config.json and instead call Heap.setAppId(YOUR_APP_ID) when you know tracking is allowed. If your app starts with tracking enabled and then has a point to disable it, your code should work to stop new autocaptured events on the current run, and not calling Heap.setAppId will prevent capture on future runs.