React-native-navigation: Tab bar text cut off and ellipsized on iPadOS 14

[reidab]

Issue Description

When rendering a tab bar on an iPad running iPadOS Public Beta 6, text labels for tab bar items are truncated.

Steps to Reproduce / Code Snippets / Screenshots

---

Environment

• React Native Navigation version: Reproduced on playground app built from master
• React Native version: 0.63.2
• Platform(s) (iOS, Android, or both?): iOS: iPadOS 14 Public Beta 6
• Device info (Simulator/Device? OS version? Debug/Release?): iPad Pro 11" 2018

[danilobuerger]

I can reproduce this. However, I am not sure if it is worth pursuing as this could very well just be an iPadOS beta bug. Maybe we should circle back on this once the GM is out.

[bennettk]

FWIW- this is also an issue when running on an Apple Silicon Mac, since that effectively runs your app as an iPad. No GM there yet either, but it seems like we're nearing the end of the beta period.

[danilobuerger]

Confirmed on iPadOS 14 GM

[danilobuerger]

@yogevbd This seems to be caused by applying NSForegroundColorAttributeName to the UITabBarItem standardAppearance. When removing the color, the labels are not truncated. However, on a fresh iOS project (no rn) this doesn't happen. Suggesting we have some further code that modifies this behavior. Any idea?

[yogevbd]

That's weird.. I will give it a look today

[yogevbd]

This issue really looks like a bug in iOS itself.. I will open a ticket for apple.

[LeeJunhui]

@yogevbd Does Apple give some solution about this issue😂

[guyca]

@yogevbd Can you please add a link to the ticket? Thanks! 👍

[bennettk]

FWIW- a team member found a workaround for this by adding an NSForegroundColorAttributeName to the titleTextAttributes in setTitleAttributes / setSelectedTitleAttributes in TabBarItemAppearanceCreator:

    if (@available(iOS 14.0, *)) {
      UIColor *color = [selectedTitleAttributes valueForKey:@"NSColor"];
      if (color) {
        tabItem.standardAppearance.inlineLayoutAppearance.selected.titleTextAttributes = @{NSForegroundColorAttributeName: color};
      }
    }

not sure if this fixes all cases, but it works for us so far so we're swizzling the RNN implementation for now... but obviously if the fix landed in RNN, we'd much prefer to use that. :)

[danilobuerger]

@bennettk Nice, do you want to create a PR for it?

[bennettk]

@danilobuerger can do- https://github.com/wix/react-native-navigation/pull/6690

[guyca]

Reopening as #6690 was reverted. @bennettk let's reproduce the regression pointed out by @danilobuerger and submit a new PR?

[bennettk]

@guyca hi, sorry- been buried with a lot of day job work :) should have a chance to take a look early next week.

[zzorba]

Curious if there is a workaround that anyone has found around this issue. I've started hearing more complaints from users as more people update to IOS 14.

[Adegeminas]

Hi guys!

Looks like there is a way to reproduce this even after bugfix in iOS 14.2 (simulator and production)

"react-native": "^0.63.3"
"react-native-navigation": "^7.4.0-snapshot.1328" (and the same story with 7.8.1)

I'm re-setting root after going to background (using hardware button) and back again like this:

Navigation.events().registerAppLaunchedListener(() => that.startApp())

So, for the first time i'm returning from background state i see truncated text of bottom tabs.

Any idea?

[kabus202]

@Adegeminas, i have the sam on iOS/* and i have this only on the first resume.

To reproduce:
background -> resume app -> { ellipsis dots } -> click on each tab -> background -> resume -> all visible

What i also discovered is: when you remove fontSize from bottomTab options, it's also working without any problems

[Adegeminas]

@kabus202 thanks for fontSize tip. Removing that options works, but i need it)

[kabus202]

@Adegeminas thanks for confirming this. @guyca can we reopen this one?

[Brett-Best]

Related to https://github.com/Tencent/QMUI_iOS/issues/1110 which was fixed by https://github.com/Tencent/QMUI_iOS/blob/09cdc055f63a4ef88a75cfeefc3e5521eef7bbd1/QMUIKit/UIKitExtensions/UITabBar%2BQMUI.m#L198-L226.

I also was able to workaround the issue in a blank project by setting the attribute paragraphStyle to NSParagraphStyle.default of the titleTextAttributes.