search

timomeh / react-native-material-bottom-navigation

💅🔧👌 a beautiful, customizable and easy-to-use material design bottom navigation for react-native
MIT License
710 stars 127 forks source link

Lag between tap and the tab changing #47

Closed Flavien closed 6 years ago

Flavien commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

timomeh commented 7 years ago

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: https://github.com/react-community/react-navigation/issues/2631

wildseansy commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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

timomeh commented 7 years ago

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 commented 6 years ago

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 commented 6 years ago

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 https://github.com/react-navigation/react-navigation/issues/608#issuecomment-328635042 and https://github.com/react-navigation/react-navigation/issues/608#issuecomment-333386346. 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).