React-native-tab-view: Large number of routes massively drop JS frame rate when switching tabs
Current behaviour
TabBar with scroll enabled is laggy and slow on android when using gestures or click on tab even if i render only
Expected behaviour
Expect TabBar with scroll enabled will run smooth as in example
Code sample
I have used code sample from example:
https://github.com/react-native-community/react-native-tab-view/blob/master/example/src/ScrollableTabBarExample.js
Screenshots (if applicable)
What have you tried
Have tried all the optimization tips from the documentation, nothing has chaned. Tried to reduce the number of routes, but lags is still present even with 3 routes
Your Environment
| software | version
| ---------------------------- | -------
| android |9
| react-native |0.59.1
| react-native-tab-view |2.0.3
| react-native-gesture-handler |1.1.0
| react-native-reanimated |1.0.0-alpha.12
| node |11.0.0
| npm or yarn |6.4.1
tmmgn
All 22 comments
We also use this in our project and have found the same issue.
I have extracted the ScollableTabBar example and given it 8 tabs instead of 4 to make the behavior obvious in the following gif:
The indicator for which tab is selected lags behind the selected tab by quite a bit if navigating quickly to a tab a few indexes along via gesture. The scrolling behavior of the tabBar is necessary for our application.
joshperry131
on 22 Mar 2019
I used this library as temporary workaround for scrollable tabs - https://github.com/ptomasroos/react-native-scrollable-tab-view. Looks pretty fast, give it a try if you need to hurry with your project
tmmgn
on 22 Mar 2019
I think this might be a dupe of #712
xaviershay
on 10 Apr 2019
I did what @joshperry131 did above, but pushed it up if anyone else wants to try: https://github.com/xaviershay/react-native-tab-view/tree/720-repro
The problem scales with number of tabs, so drastically increasing the number makes it exceedingly obvious. It's also evident on iOS, though to a much lesser degree.
xaviershay
on 2 May 2019
I think I've narrowed this down, but I'm not sure how to fix yet.
On tab press, the code calls a handler that is expected to update the index via the state. This causes a re-render of all scenes, which I believe is causing the pause (source: I added logging statements and saw that it was).
If you swipe, the onChangeIndex handler is never called, hence why that avoids this problem.
Using jumpToIndex instead (i.e. the other branch of the conditional) works as expected performance wise, though leaves the state incorrect which means subsequent taps don't work properly.
I possible fix may be a shouldComponentUpdate somewhere, but I'm not quite sure of the right place nor logic yet.
xaviershay
on 2 May 2019
New insights!
When swiping, there appears to be a similar performance drop but it happens _after_ the tab has switched so is less noticeable. Also! Since swiping works natively now, you can keep swiping even when JS framerate is low, so even harder to notice!
You can see this by toggling the performance inspector - JS frame rate drops to 0 both after swipe change has finished, and also before change from tab press.
I replaced the tab views with a simple <Text>Hi</Text> to eliminate that as a source of the issue.
xaviershay
on 2 May 2019
Wondering if this is related to new lazy mode, and maybe if there is another regression lurking that's killing PureComponent optimizations:
xaviershay
on 2 May 2019
Can you try this PR and see if it improves the perf for you? https://github.com/react-native-community/react-native-tab-view/pull/764
satya164
on 6 May 2019
Thank you! Will give it a go and report back.
xaviershay
on 7 May 2019
@satya164 I use master as dependence, nothing changed.
cani1see
on 10 May 2019
Made some recordings with my repro rebased against master. I think it got worse sorry :(
iOS: tapping still a little sluggish, new regression around swiping to tab that is off screen.
Android (sorry couldn't get this working on emulator, so recorded with a samsung galaxy): performance of tab tapping just as bad, same regression around swiping to off screen tab introduced but much worse here - 10s of seconds of JS thread at 0fps: mov recording
xaviershay
on 10 May 2019
From Safari debugger, these are the method from reanimated are taking most of the time and probably cause the JS frame drops.
Maybe @kmagiera or @osdnk will know what's happening here.
satya164
on 10 May 2019
Can you try #773 ? The FPS should be improved with that.
satya164
on 14 May 2019
Closing since this should be fixed. Please let me know if you're still facing issues.
satya164
on 19 May 2019
@satya164 can confirm this is fixed. Thank you! 馃檹
xaviershay
on 20 May 2019
@satya164 I am facing slow performance issue in RN 0.61 and react navigation-tabs 2.5.5
kamleshh-bms
on 5 Oct 2019
I am facing slow performance issue in expo version 35.0.0 and react-native-tab-view version is 2.10.0
hussainahmad
on 25 Oct 2019
Please give more info with code and GIFs.
satya164
on 25 Oct 2019
any solution on this?
lucasluca
on 13 Feb 2020
Hello, I'm facing a delay on the tabPress (predominantly on Android). This happens with jumpTo or a state change. When swiping, there isn't a delay, only on the tab press.
alexpchin
on 6 Mar 2020
facing the exact same issue as @alexpchin - on android, with 6 tabs, tabPress itself runs _very_ quickly (<0.5ms). The action dispatched afterwards seems to be a bit slower
deecewan
on 2 Jul 2020
Closing since this should be fixed. Please let me know if you're still facing issues.
Hey, I've faced the same issue, when clicking to any tab as @alexpchin explained
"react-native-tab-view": "^2.15.1"
"react-native": "0.63.0",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.13.0",
check here
anastely
on 1 Sep 2020
Related issues
itzsaga
路
3Comments
AndriiUhryn
路
3Comments
lubomyr
路
3Comments
jouderianjr
路
3Comments
nastarfan
路
3Comments
Most helpful comment
Hello, I'm facing a delay on the tabPress (predominantly on Android). This happens with jumpTo or a state change. When swiping, there isn't a delay, only on the tab press.