[TabNavigator] scene transitions slow on android

[petermikitsh]

Hello, I'm experiencing some performance issues with the TabNavigator. I've read through various other reports, so I've omitted the basic 'gotchas' that can perf issues:

• no console.log statements
• no remote debugger attached

Other observations:

• flipping between very basic scenes (e.g., with a single Text element) seems fine
• more complex scenes problematic
• runs fine on iOS (no dropped frames)

A 'Performance' section might not be a bad idea in the docs.

Thanks!

[petermikitsh]

Did a release build and the animations were still dropping frames.

[satya164]

Can you try this on a real device instead of emulator? I have never seen this issue. It just uses native view pager under the hood, so it's strange that there will be perf issues.

Also the tabs don't re-render when switching, so this page is already rendered and should be fast. Only reason I can think of is something with graphics and the emulator.

[ancyrweb]

@satya164 what if a rerender happens while switching tab (eg fetching data). Might a rerender (either on the next or previous element) cause a lag even through the animation is happening on the UI Thread ?

[satya164]

No, I don't think so.

[petermikitsh]

I don't currently have a real device I can test on (lost my USB cable), but I downloaded the NavigationExample app and I'm not seeing any dropped frames, which seems to suggest that it may be more an issue with my app, and not the emulator. However, most of these pages in the simulator are pretty simple.

The distinguishing features of 'Home' tab in my app are:

• I make API calls in componentDidMount, but those Promises are wrapped in a InteractionManager.runAfterInteractions callback.
• I am rendering an SVG document (the triangular mesh) which has 262 Path elements. So this scene has a much larger component tree than my 'Submit' and 'Responses' scenes. However, tabs are not re-rendered when switching between them, so it shouldn't impact the transition.

[satya164]

lost my USB cable

You can build an APK and send it to your phone for testing.

[petermikitsh]

Tried the release APK build on device. It was crashing. Wasn't going to get too far without logs. So I experimented with removing my large SVG from my Home scene. Somehow, that seems to have fixed performance when switching tabs. So my best guess now is that this is more an issue with react-native-svg, possibly connected to software-mansion/react-native-svg#137.

[farrukhbashir]

I am using the tabNavigator when i Display a Swipable List in one tab then the TabNavigator slow how i resolve this...how to stop rerender in tabNavigator

[kohchenggee]

I have also tried tabNavigator, if use swipe to move the screen it's quite smooth, but if I tap on the tabs, it's lagging

[ugiacoman]

@kohchenggee I'm running into the same issue. Have you found a solution?

[jonathanroze]

Same as @kohchenggee ! A solution ? :)

[allmaxgit]

Very slow transitions on device. Need solution.

[Buthrakaur]

Poor performance was caused by getsentry/sentry-react-native#158 in my case.

[SteffeyDev]

I'm not using react-native-sentry and finding that while swiping is fast to load on Android, tapping on the tab bar icon has a notable delay (same as @kohchenggee).

[matthamil]

Is this issue still occurring in the latest release? If so, can someone post an example app reproducing the problem to expo or snack?

[Maxeh]

@kohchenggee have the same issue, did you find a solution?

[matheusrocha89]

@kohchenggee Having the same issue, did you find any solution?

[Maxeh]

I actually found a solution. In my case the laggy behavior was caused by a FlatList (ListView) which rendered components of the type "Component". I changed "Component" in the FlatList to "PureComponent" and everything works fine now. I guess the laggy behavior occurred due to re-rendering when tabs were changed.

[matheusrocha89]

@Maxeh I think my problem is the same as yours, I have FlatList too, I will try your approach and see if I fix this problem in my project

[allmaxgit]

@Maxeh @matheusrocha89 No, it not solution. I have FlatLists on tabs and using PureComponent everywhere. Transitions is slow if connect redux.

Works good only without addNavigationHelpers but I need it.

[orest22]

I have the same issue. Any ideas how to solve it?

[satya164]

https://twitter.com/satya164/status/917061292065738752

[yasir-netlinks]

I have a case where its slow when I tap on one of the tabs, it responds slow and just to be clear there are no animation issue, it takes a moment before navigating to that Tab, while swiping between that tabs work just fine , no stutters or anything of that sort. I have hooked all the Tabs in redux, and basically all the Tabs (4 tabs) are forms (Im keeping some state in redux for validation). The reason I am saying this because I'm not sure if this behavior is related to a performance issue in react navigation or maybe is because of redux! Any thoughts regarding this would be much appreciated. is there a way we can test this!

[michelalbers]

Got the same issue here. Swiping is super smooth but tapping the button incredibly slow.

[powdahound]

Ran into the same issue. Smooth while swiping but button tap was very slow. Resolved by removing all console.log and disabling redux-logger's verbose printing of state while logging actions.

[napro8509]

help me to create Vertical tab navigator

[hegelstad]

I got the same issue. Tabs take as much as 2 minutes to change on Genymotion Samsung Galaxy 6.

The fix for me was disabling Remote JS debugging in the developer menu. Might've been caused by console.logs as specified above.

[Laurensdc]

Had issues using this with Native base.

[brentvatne]

if you have issues with this it may be due to excessive console.log statements, which can slow down your app in development

[Laurensdc]

@brentvatne Removing console.logs didn't resolve the issue, also the issue stayed on the production version.
Getting rid of the NativeBase library seems to fix performance issues.

[michelalbers]

It was native base for me too. Bummer - I really liked their design