Navigation.push() got delayed if the source component is a heavy component

[sanghavan]

🐛 Bug Report

Navigation.push() got delayed if the source component is a heavy component (E.g. The source component is a long items list, or a section list has many sections data)

To Reproduce

I can reproduce the issue on playground app. https://github.com/sanghavan/react-native-navigation/tree/master/playground I forked from main repo and update two component: StackScreen.tsx & FirstBottomTabScreen.tsx

1. Update the code in StackScreen.tsx to render a Flatlist with 2k rows, each row contains <Text /> with row index as value. You can wait for rendering complete.
2. Access into Layout bottom tab => Tap on Stack button => Tap on Push button. Then you will see a bit delay before the slide animation start. Just increasing number of rows for more delay.

Expected behavior

• No any delay time when pushing to target component

Actual Behavior

• There is a delay when pushing and popping

Your Environment

• The playground app downloaded from release tag 7.6.0
• React Native Navigation version: 7.6.0
• React Native version: 0.63.2
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Real device iPhone X, Simulator iPhone 8 Plus. OS: iOS 14.3, The both Debug & Release mode

[sanghavan]

Also, switching bottom tabs got delayed if the target tab is a heavy component. Example: Tab 1 | Tab 2. Tab 1 is a heavy component. When switching Tab 1 -> Tab 2, it will switch immediately. But Tab 2 -> Tab 1, it got delayed. I believe we don't re-render tabs when switch them.

[yogevbd]

Is there any chance you set push.waitForRender: true? maybe in your default options?

[sanghavan]

Is there any chance you set push.waitForRender: true? maybe in your default options?

No, I set either waitForRender: false or remove it, the issue is still same. Base on my understand, waitForRender is used to wait the target component render completed before start animation. So for this issue, waitForRender attribute doesn't relate to. The issue: A pushes to B. A is heavy component, B is very lightweight component. But still got delayed.

[sanghavan]

Hi! any updates on this?

[felix-lambert]

Yes is it possible to resolve this issue

[sintylapse]

@yogevbd this is still an issue

[sintylapse]

The problem fixes if you statically specify width and height of the container view

[hetansh-Tatvasoft]

The problem fixes if you statically specify width and height of the container view

can please you elaborate you answer more, because this is serious issue in my app and i don't have any clue on this...

[sintylapse]

The problem fixes if you statically specify width and height of the container view

can please you elaborate you answer more, because this is serious issue in my app and i don't have any clue on this...

hey @hetansh-Tatvasoft try to specify the width and height of the root View of the screen you trying to push

import { Dimensions, View } from 'react-native';

function YourScreen() {
  const { width, height } = Dimensions.get('window');

  return (
    <View style={{ width, height }}>
      {/* the content of the screen */}
    </View>
  )
}

[hetansh-Tatvasoft]

The problem fixes if you statically specify width and height of the container view

can please you elaborate you answer more, because this is serious issue in my app and i don't have any clue on this...

hey @hetansh-Tatvasoft try to specify the width and height of the root View of the screen you trying to push

import { Dimensions, View } from 'react-native';

function YourScreen() {
  const { width, height } = Dimensions.get('window');

  return (
    <View style={{ width, height }}>
      {/* the content of the screen */}
    </View>
  )
}

Thanks for the quick response....🚀🚀🚀

[phamhungvn]

The problem fixes if you statically specify width and height of the container view

can please you elaborate you answer more, because this is serious issue in my app and i don't have any clue on this...

hey @hetansh-Tatvasoft try to specify the width and height of the root View of the screen you trying to push

import { Dimensions, View } from 'react-native';

function YourScreen() {
  const { width, height } = Dimensions.get('window');

  return (
    <View style={{ width, height }}>
      {/* the content of the screen */}
    </View>
  )
}

Thanks for the quick response....🚀🚀🚀

@hetansh-Tatvasoft Did you try this approach? Is it working on your case?

[hetansh-Tatvasoft]

@phamhungvn tried this approach but it didn't help, I am using flatlist at the source component and when there is few Items in list it works fine, but when items keeps increasing that causes the navigation on click of a particular item becomes very slow....☹️

note:- I use paging in flat list and my feature requirements don't allow me to remove previously load items to remove from list and hold only few items in focus of the list , so more then often it becomes heavy Flatlist.

[Harisene]

I'm adding sharedElementTransition between two screens but it doesn't do the navigation most of the time. If I remove the sharedElementTransition animation and just try to do a normal push navigation, still doesn't navigate most of the time.

Looks like no solution for this. This is pretty bad and really frustrating.

[hetansh-Tatvasoft]

@Harisene For me navigation was not an issue, I've moved to Shopify/FlashList from flatlist and things are working great since then...

Package - https://shopify.github.io/flash-list/

[Harisene]

@hetansh-Tatvasoft. I'm not using any list in my component. Still having issues when navigating.

[hetansh-Tatvasoft]

@Harisene Sorry can't help further It seems like we've different issues, Maybe try this and see if it works. All the best...

[anhnguyen123]

still slow