Solved

React Native modal Heap Navigation container with modals issue

  • 14 April 2023
  • 9 replies
  • 233 views
N
Userlevel 2
Badge +1

I added the HeapContainer in the place of NavigationContainer and I notice that the modals reset the navigation.

This is how it looks when I open a modal( no matter which of this is displayed)

 

This is how it should looks after this specific modal is displayed

This is how the navigation/index.ts looks like:

 

const RootStack = createNativeStackNavigator<RootStackParamList>()
  const HeapNavigationContainer =
    Heap.withReactNavigationAutotrack(NavigationContainer)
  return (
    <HeapNavigationContainer
      linking={linking as LinkingOptions<RootStackParamList>}
      ref={(navigatorRef) => {
        oldNavigationRef.current = navigationRef
        navigationRef.current = navigatorRef
      }}
      onReady={handleReady}
      independent
    >
      <RootStack.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        <RootStack.Screen name={Routes.AppSwitcher} component={AppSwitcher} />
        <RootStack.Screen name={Routes.Menu} component={MenuStack} />
        <RootStack.Screen name={Routes.OldApp} component={OldApp} />
        <RootStack.Screen name={Routes.DefaultStack} component={DefaultStack} />
      </RootStack.Navigator>
      {renderModal()}
    </HeapNavigationContainer>

 

The render modal is a method that contain a switch with different modals. Here a portion of this code:

  const renderModal = useCallback(() => {
    switch (modal.type) {
      case 'dedupe':
        return (
          <DedupeModal
            onClose={modal.hideModal}
            isVisible={modal.isVisible}
            {...modal.options}
          />
        )
      case 'stateSelection':
        return (
          <StateSelectionModal
            onClose={modal.hideModal}
            isVisible={modal.isVisible}
            {...modal.options}
          />
        )
      ...

Looking forward to hearing some news.

 

Many thanks!

icon

Best answer by Jonas-Heap 17 April 2023, 19:18

View original

9 replies

Jonas-Heap
Rank
Userlevel 3
Badge +2

I can present a potential workaround.

Without the HeapNavigationContainer in place of the NavigationContainer, Heap won’t be able to capture pageviews, but it will still autocapture touches, changes, and other interactions normally (including the React Native hierarchy of the component interacted with) as long as Heap is imported; with this in mind, one option is to leave the NavigationContainer in place and manually track pageviews using the track API call.

I know this is far from a perfect solution, but I hope it may be helpful until a more complete solution can be identified.

jack-schneider
Rank
Userlevel 2
Badge +1

We’re investigating this issue and plan to better support using Heap with RN NavigationContainers. In the meantime, the recommendation Jonas provided should address your immediate needs. I’ll report back once this is resolved!

Jack
N
Userlevel 2
Badge +1

Ok, I am trying to create a sample project to share with you if I could replicate the error. Were you able to reproduce it?

 

Thanks

N
Userlevel 2
Badge +1

@jack-schneider @Jonas-Heap I could reproduce the error. Here is a very little project which include the same implementation that we have and the same version of the project and the libraries that we have.

https://drive.google.com/file/d/1Sy2mrGaLHS5clzT-0pEJ5182G6f9qNbP/view?usp=sharing

I believe it could be helpful for you to analyze the error. Just let me know what do you think, if is possible to implement HeapNavigatorContainer with stack modals in another way or the track API option is the only one that we have available at the moment.

Many thanks

 

 

jack-schneider
Rank
Userlevel 2
Badge +1

@NDRapesta Thank you so much! Really appreciate you putting this together for us - it will help our investigation!

Just let me know what do you think, if is possible to implement HeapNavigatorContainer with stack modals in another way or the track API option is the only one that we have available at the moment.

I’ll get back to you on this.

Jack
N
Userlevel 2
Badge +1

@jack-schneider how are you? just following up if there are some news?

 

Looking forward to hearing from you soon.

 

Thanks

jack-schneider
Rank
Userlevel 2
Badge +1

Hi @NDRapesta ! I’m doing well - thank you for following up. My team has this investigation planned in our backlog. We’ll be working on it shortly. I’ll follow up later this week. Any dates on your end that you would need a response by to take action on this?

Jack
N
Userlevel 2
Badge +1

I believe that HeapNavigationContainer could give me more capabilities, rather than the track api is that correct? If so, I’ll be waiting for your update, as soon as you can.

Apart from track API if there is something else I can implement with RN please let me know. There is a video tracking tool for example? I am trying to implement visual labeling now.

 

Thanks

 

 

 

 

B
Rank
Badge +1

I’ve identified what I believe to be the root cause of the issue.

The sample project contains the following code:

const App = () => {

  ...

  const HeapNavigationContainer =
    Heap.withReactNavigationAutotrack(NavigationContainer);

  return (
    <HeapNavigationContainer independent={true}>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Second" component={SecondScreen} />
      </Stack.Navigator>
      {renderModal()}
    </HeapNavigationContainer>
  );
};

Each time the modal is shown, the App function is getting re-evaluated and withReactNavigationAutotrack is creating a brand new component that wraps NavigationContainer.  Because this a new component, React is rebuilding the entirety of its contents, including the navigation container.

A simple fix is to move the line out of App so it doesn’t create a new component each time:

const HeapNavigationContainer =
  Heap.withReactNavigationAutotrack(NavigationContainer);

const App = () => {
  ...

  return (
    <HeapNavigationContainer independent={true}>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Second" component={SecondScreen} />
      </Stack.Navigator>
      {renderModal()}
    </HeapNavigationContainer>
  );
};

 

Reply


Terms & ConditionsCookie settings