material-top-tabs slow render

[TomCorvus]

Current behavior

on mount, there are some milliseconds during which the material-top-tabs doesn't display.
On a fresh install, you can see it rapidly, but when on your screen, you have multiple API calls for example, this problem occurs for many seconds.

Simulator.Screen.Recording.-.iPhone.14.Pro.Max.-.2023-07-24.at.13.51.50.mp4

Simulator.Screen.Recording.-.iPhone.14.Pro.Max.-.2023-07-24.at.14.14.06.mp4

Expected behavior

Make it more efficient and maybe get a hook to know when tabs are fully mounted and displayed to know when to do greedy actions.

Reproduction

https://github.com/TomCorvus/RNNavigationSlowRender

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-tab-view

Environment

• [] I've removed the packages that I don't use

package	version
@react-navigation/native	6.1.7
@react-navigation/bottom-tabs
@react-navigation/drawer
@react-navigation/material-top-tabs	6.6.3
@react-navigation/stack
@react-navigation/native-stack
react-native-safe-area-context
react-native-screens
react-native-gesture-handler
react-native-reanimated
react-native-tab-view	3.5.2
react-native-pager-view	6.2.0
react-native	0.72.3
expo
node	18.12.0
npm or yarn	1.22.10

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/stack

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[okwasniewski]

Hey, this is related to the ongoing refactor of tab-view to address issues with poor performance when used together with material-top-tabs. If you want, a quick solution you can use react-native-tab-view without material-top-tabs for now.

I've created an RFC that describes the new approach here. The new API still needs some work, so I will keep this issue open until the release of a new version with the refactored API.

[TomCorvus]

Hi @okwasniewski,
thanks for your help.

For now, I can wait improvements on material-top-tabs and react-native-tab-view relationships.
Do you have an idea about when these improvements will be released? Or the priority against the others issues?

Thanks

[TomCorvus]

I try react-native-tab-view without material-top-tabs but the problem is the same.
When API calls are over, the TabView appears or the TabView content appears to be exact.

Simulator.Screen.Recording.-.iPhone.14.Pro.Max.-.2023-08-09.at.12.11.37.mp4

I tried to encapsulate tabview navigator with a View to get onLayout prop and get a state to know when TabView is fully mounted before calling API.

It's better than before but not fully clean. There are some milliseconds before the content of the TabView appears.

is there no way to get onLayout prop on navigator?
Do you think it is a good solution?

Thanks

[krunalinfynno]

Getting Same issue after updating react native and react navigation

[lvlrSajjad]

Same issue it takes a few seconds for top tabs to get rendered for the first time.
Till then we can only see the underline

[mthomas100]

Has anyone made progress on this? Getting the same issue on react native 0.73. Happens with v5 and v6.

[yawin]

also get the same issue.

[josegiufrida]

Same issue after upgrading from react-native 0.71.7 to 0.73.8

"@react-navigation/material-top-tabs": "6.6.13",
"@react-navigation/native": "6.1.17",
"@react-navigation/native-stack": "6.9.26",

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.