[iOS 26+] Native Bottom Tab Navigator labels truncated with ellipsis and mispositioned when navigating to tabs with image icons

Current behavior

Description

When using createNativeBottomTabNavigator from @react-navigation/bottom-tabs/unstable on iOS 26+ with Liquid Glass support, tab bar labels have multiple visual issues under specific conditions:

• Labels are truncated with ellipsis - "Programs" shows as "Pro...", "Products" shows as "Pro..."
• Labels are not in their correct positions - The labels appear misaligned/offset from where they should be

Conditions for Bug to Occur

• Using the unstable native bottom tab navigator - createNativeBottomTabNavigator from @react-navigation/bottom-tabs/unstable (NOT the regular createBottomTabNavigator)
• Using type: 'image' for tab bar icons like

   options={{
     tabBarIcon: {
       type: 'image',
       source: require('./icon.png'),
     },
   }}

• Navigating FROM screen TO a screen containing the native bottom tabs

Additional Observations

• Using SF Symbol icons instead of image-based icons, issue does NOT appear
• App starts directly on the Main tabs (persisted session, no navigation transition), issue does NOT appear
• Issue is happening in both debug and release mode
• Issue happening more often on iOS device and less happens on simulator
• Changing font size, font weight of labels does NOT fix the issue
• Tapping on any tab fixes BOTH issues. Labels immediately show full text AND move to correct positions after user interaction
• The issue is timing-related. Adding a delay (~1000ms) before rendering the tab navigator fixes the issue

export function MainTabsNavigatorLiquidGlass() {
  const [isReady, setIsReady] = useState(false);
  
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsReady(true);
    }, 1000); // Needs ~1000ms delay to work reliably
    
    return () => clearTimeout(timer);
  }, []);
  
  if (!isReady) {
    return <PlaceholderView />;
  }

  return (
    <NativeBottomTabs.Navigator>
      {/* screens */}
    </NativeBottomTabs.Navigator>
  );
}

https://github.com/user-attachments/assets/b2bb810e-bf6d-4e5a-ae28-e71ba14dc88f

Expected behavior

In iOS 26+, when we have native iOS bottom tab bar from @react-navigation/bottom-tabs/unstable

• Tab labels should display fully without truncation: "Home", "Programs", "Progress", "Notebook", "More"
• Tab labels should be correctly positioned and centered directly under their respective icons

Reproduction

https://github.com/ghayoor-cbq/react-navigation-bottom-tab-issue

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-drawer-layout
• react-native-tab-view

Environment

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