Lag between tap and the tab changing

[Flavien]

I'm using react-native-material-bottom-navigation with react-navigation and Redux.

When tapping a tab, there is a half a second delay between tapping and the navigation actually happening. I can see the ripple effect on the tab is also delayed.

Any idea why it's doing that?

[timomeh]

Hrmmm, strange. Please try using react-navigation's own TabBar Implementation and check if the delay is still there or gone. I currently can't find a reason why the BottomNavigation would cause a delay.

[buckydroid]

I'm also facing the same problem. Tab change is not that smooth..

[timomeh]

I need more informations on this. /cc @buckydroid @Flavien

Mostly I need to know if the delay is gone when you switch to react-navigations TabBar. Cause there is a similar issue in react-navigation: react-navigation/react-navigation#2631

[wildseansy]

Related: I have also noticed that if you click a bunch of tabs fast (easiest to reproduce with two thumbs on a real device), tab switch keeps repeating forever, and device becomes non-responsive.

[timomeh]

@wildseansy I don't think the behaviour you described is related to this particular issue. It seems like it's an issue in react-navigation, but there's neither a response in their issue nor a response here.

[Flavien]

The same seem to happen even without react-navigation integration.

[timomeh]

I tested the BottomNavigation without the react-navigation integration, using this Snack: https://snack.expo.io/SJU96kK0Z

I can't see a delay, at least on my device. The screen updates immediately.

[Tocher]

i'm also see some lag on iphone 6.
but on iphone 6s no.

I disable PressRipple Animation and RippleBackground Animation and now all good.
dont know is this useful information

[timomeh]

I once again tested this and can't see any delay. (Tested it with and without react-navigation, on two android phones, Android emulator and iOS simulator. I used the code from the examples.)

My assumption is that such delays are caused by the performance of the app, not the BottomNavigation itself. If you do a lot of stuff in your Screens, maybe together with redux, you could have many unnecessary re-renders.

After digging around a bit and reading the same issues in react-navigation's Issues, I stumbled across react-navigation/react-navigation#608 (comment) and react-navigation/react-navigation#608 (comment). The advices in those comments are really good to improve the performance of your app, even if you aren't using react-navigation.

If you notice a delay with a very simple App, please comment below with more details (OS, Device, Software-Version, RN-Version, Code, etc).