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.

[wilsontr]

I was able to get this working by reverting the change made in #6784, per @ryanbourneuk's comment. I will be using patch-package to handle this for now.

[brsaylor2]

Removing fontSize does not work for me. Please ignore - I don't see this issue at all after updating from 6.7.5 to 7.11.2

[ddcrobert]

In case that helps someone, I had a similar issue like @Adegeminas, fixed it by changing default appareance's custom font / fontsize. I added this line in AppDelegate.m, ahead of RNN initialization. [[UITabBarItem appearance] setTitleTextAttributes:@{NSFontAttributeName: [UIFont fontWithName:@“SomeFont-Bold” size:10.0f]} forState:UIControlStateNormal];

[priyak-sdei]

Issue is still replicating. I have even upgraded the latest library version "react-native-navigation": "7.11.3", But still issue is happening, when switching the Apps from background and then come back.

[kabus202]

@priyak-sdei i opened a separate issue for this a while ago see: https://github.com/wix/react-native-navigation/issues/6923

[kabus202]

@Brett-Best can you share your example pls?

[Brett-Best]

@kabus202

func configure(itemAppearance: UITabBarItemAppearance) -> UITabBarItemAppearance {
  with(itemAppearance) {
    // Setting a paragraph style worksaround an issue where the tab title would be truncated on iPadOS.
    //
    // SEE: https://github.com/Tencent/QMUI_iOS/issues/1110 & https://github.com/wix/react-native-navigation/issues/6533
    let paragraphStyle = NSParagraphStyle.default

    with($0.normal) {
      $0.iconColor = .asset(.tabBarUnselectedTint)
      $0.titleTextAttributes.merge([
        .foregroundColor: UIColor.asset(.tabBarUnselectedTint),
        .paragraphStyle: paragraphStyle
      ]) { _, new in new }
    }

    with($0.selected) {
      $0.iconColor = .asset(.tabBarTint)
      $0.titleTextAttributes.merge([
        .foregroundColor: UIColor.asset(.tabBarTint),
        .paragraphStyle: paragraphStyle
      ]) { _, new in new }
    }
  }
}

[kabus202]

@Brett-Best where to put this?

[kabus202]

Did you guys find a proper solution for this?

[arcziby]

Bug is still appearing on iPhones.

Properly view:

Bug:

any updates ?

[kabus202]

@arcziby revert those 2 lines https://github.com/wix/react-native-navigation/pull/6784/files and it will be working for the mobile part but on ipad it's still existing...

[doublerebel]

Here's a fix that is working for us:

self.tabBar.subviews.forEach {
    if let label = $0.subviews[1] as? UILabel {
        label.lineBreakMode = .byClipping
    }
}

We set the tab bar titles in viewWillAppear for our UITabBar subclass, calling this code after setting the label title works every time. It's a bit of a hack but it seems simpler than most of the other solutions. This fix is inspired by a solution posted in StackOverflow.

[piuholo]

This issue still persists on iOS 15.4 with react-native-navigation 7.26.0 and React Native version 0.67.4. Strangely, if no text or icon color is applied to selected or unselected tabs, the text is not truncated but selecting tabs makes the text and icon move around / change size.

[haveneersrobin]

Happening for me as well...

• react-native: 0.66.1
• react-native-navigation: 7.25.1

[zzorba]

Yeah, this is definitely still happening on iOS with the recent react-native + react-native-navigation.

[leejunhui]

On iOS 15.4, this issue happens again 😂

[olegderecha]

Ok, guys, let's solve it together here: https://github.com/wix/react-native-navigation/issues/7506#issuecomment-1160668701

[skuzoluk]

I have a simple solution. It is weird but just works :) Why not just add some extra space after text like:

const extraSpace = '         ';
bottomTab: {
    text: 'Screen Title' + extraSpace
}

Otherwise the issue still exists even after i have tried the solutions above.