search

react-navigation / react-navigation

Routing and navigation for your React Native apps
https://reactnavigation.org
23.3k stars 4.97k forks source link

MaterialTopTabNavigator Icon Layout Shifting #11934

Open Lurtroxx opened 1 month ago

Lurtroxx commented 1 month ago

Current behavior

When using a SVG icon in a Material Top Tab Navigator there is some sort of layout shift going on, as you can see the icons render stacked on top of each-other to the left, and then shift their layout to the correct position.

Screenshot 2024-04-13 at 1 11 41 PM Screenshot 2024-04-13 at 1 11 55 PM

https://github.com/react-navigation/react-navigation/assets/32040179/c52ec0ce-d470-49a7-9e9a-f97dbf5f7c7c

Expected behavior

MaterialTopTabNavigator Icons should not shift layout, but rather render in their correct place, within the center of each material top tab item.

Reproduction

https://github.com/Lurtroxx/toptabtestexpo

Platform

Packages

Environment

package version
@react-navigation/native ^6.0.13
@react-navigation/bottom-tabs ^6.4.0
@react-navigation/drawer ^6.6.15
@react-navigation/material-top-tabs ^6.6.13
@react-navigation/stack ^6.3.4
@react-navigation/native-stack ^6.9.26
react-native-safe-area-context 4.8.2
react-native-screens ~3.29.0
react-native-gesture-handler ~2.14.0
react-native-reanimated ~3.6.0
react-native-tab-view ^3.5.2
react-native-pager-view 6.2.3
react-native 0.73.6
expo ^50.0.1
node v21.7.1
npm or yarn yarn
github-actions[bot] commented 1 month ago

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

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

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

github-actions[bot] commented 1 month ago

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

Lurtroxx commented 1 month ago

@github-actions Updated!

Lurtroxx commented 1 month ago

Yes the issue still happens after updating these packages.

https://github.com/react-navigation/react-navigation/assets/32040179/7d0631db-6f77-44bc-9512-48845bf06b60