MaterialTopTabNavigator Icon Layout Shifting

[Lurtroxx]

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.

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-04-13.at.13.08.13.mp4

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

• 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

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

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]

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

• @react-navigation/drawer

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:

• @react-navigation/native (found: 6.0.13, latest: 6.1.17)
• @react-navigation/bottom-tabs (found: 6.4.0, latest: 6.5.20)
• @react-navigation/stack (found: 6.3.4, latest: 6.3.29)

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

[github-actions]

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

• @react-navigation/native (found: 6.0.13, latest: 6.1.17)
• @react-navigation/bottom-tabs (found: 6.4.0, latest: 6.5.20)
• @react-navigation/stack (found: 6.3.4, latest: 6.3.29)

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

[Lurtroxx]

@github-actions Updated!

[Lurtroxx]

Yes the issue still happens after updating these packages.

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-04-13.at.13.39.43.mp4