react-native-navigation icon indicating copy to clipboard operation
react-native-navigation copied to clipboard

Published 20 hours ago • verified publisher icon wix

Text In bottom bar has been cutoff in iPad 12.9 inch (ios 15.4)

Open huytd1na opened this issue 3 years ago • 9 comments

🐛 Bug Report

  1. Text has been cutoff in iPad 12.9 inch (ios 15.4)

Expected behavior

  • Text will show the full text

Actual Behavior

  • Text doesn't show the full text
  • Screen Shot 2022-04-23 at 22 34 58

Your Environment

  • React Native Navigation version: 7.27.0
  • React Native version: 0.63
  • Platform(s) (iOS, Android, or both?): IOS
  • Device info (Simulator/Device? OS version? Debug/Release?): Simulator IPAD PRO 5th 12.9 inch- IOS 15.4

Are you willing to resolve this issue by submitting a Pull Request?

  • ✖️   Yes, I have the time, and I know how to start.
  • ✅   Yes, I have the time, but I don't know how to start. I would need guidance.
  • ✖️   No, I don’t have the time and I’m okay to wait for the community / maintainers to resolve this issue.

huytd1na avatar Apr 23 '22 15:04 huytd1na

Thanks for reporting this issue, there have been multiple reports of this: most of them are closed without solution. For example: https://github.com/wix/react-native-navigation/issues/6533

There is one still open however, so yours is a duplicate of: https://github.com/wix/react-native-navigation/issues/6923

haveneersrobin avatar May 31 '22 14:05 haveneersrobin

Ok, guys, let's resolve it together. Based on this commit https://github.com/wix/react-native-navigation/commit/bafe9979abfeb6c651808c17eb13b36715abb8da I found, that the issue is in lib/ios/TabBarItemAppearanceCreator.m file. If comment on these 2 lines:

- (void)setTitleAttributes:(UITabBarItem *)tabItem titleAttributes:(NSDictionary *)titleAttributes {
//  tabItem.standardAppearance.stackedLayoutAppearance.normal.titleTextAttributes = titleAttributes;
    tabItem.standardAppearance.compactInlineLayoutAppearance.normal.titleTextAttributes =
        titleAttributes;
    tabItem.standardAppearance.inlineLayoutAppearance.normal.titleTextAttributes = titleAttributes;
}

- (void)setSelectedTitleAttributes:(UITabBarItem *)tabItem
           selectedTitleAttributes:(NSDictionary *)selectedTitleAttributes {
//  tabItem.standardAppearance.stackedLayoutAppearance.selected.titleTextAttributes = selectedTitleAttributes;
    tabItem.standardAppearance.compactInlineLayoutAppearance.selected.titleTextAttributes =
        selectedTitleAttributes;
    tabItem.standardAppearance.inlineLayoutAppearance.selected.titleTextAttributes =
        selectedTitleAttributes;
}

the issue disappeared for me on iOS 15.4: THEN: 1 NOW: image

So, if it works for you and you need to solve it right now, you can create a patch and apply it to your project as a temporary solution. I'm not a super iOS developer to create a PR, because I actually don't know what is happening here and why this line break it, but the definite place is determined and if somebody can help with a general solution - please share your thoughts.

olegderecha avatar Jun 20 '22 16:06 olegderecha

@olegderecha thank for your solution.

this elipses issue has caused my most recent App Submission (July 19, 2022) to be rejected by Apple due to their "4.0.0 Design: Preamble"

hoping your solution gets my new build through the Review process.

stoopkid1 avatar Jul 20 '22 17:07 stoopkid1

@olegderecha Thank you for this post. This issue has been hitting me on iPad for over a year and your workaround seems to have finally made it go away.

zzorba avatar Aug 15 '22 20:08 zzorba

So, in testing the fix today, I noticed the side effect of removing this line. Basically the default theming (in my case color, which I had overriden) returns when the tabs are selected. So we will likely need some middle-ground between the two.

I can't seem to see which option is tripping this though, AFAICT even if I remove all bottomTab/bottomTabs options, it still ends up with ellipsis without the removal suggested here.

Edit: it appears to work fine on iPad actually, but the color style on iPhones no longer matches my desired behavior.

zzorba avatar Aug 16 '22 22:08 zzorba

This stack overflow thread suggests it is an IOS API bug (introduced in IOS 13 and apparently never fixed). https://stackoverflow.com/questions/69318520/ipados-15-uitabbar-title-cut-off

The suggestion was that adding the NSParagraphStyle.default style to the normal attribute would fix the issue.

Edit: Tried this, my Objective-C is not the best but I didn't seem to be able to fix it using this technique. But I am fairly convinced at this point that we're looking at an IOS bug, and not a 'react-native-navigation' bug -- i.e. if you use the feature as it is documented, it will not work. Also like many iOS bugs, it seems like Apple has no interest in fixing it.

zzorba avatar Aug 16 '22 22:08 zzorba

@zzorba , do you have a code solution for this? If your solution handles the real issue (not like mine, seems), we can create a PR to RNN then.

olegderecha avatar Aug 19 '22 07:08 olegderecha

No, unfortunately my attempts at fixing it did not work. I've settled on using your solution for now -- would rather have a highlighted blue tab than have it cutoff.

zzorba avatar Aug 19 '22 13:08 zzorba

So, I tried something else. I'n not sure if it is a universal fix but it seems to exhibit the correct behavior on both phones and tablets now. Basically the idea is detect if its an iPad and don't apply the problematic titleTextAttributes to the iPad controller which apple has left broken for the last 3 iOS releases.

--- a/node_modules/react-native-navigation/lib/ios/TabBarItemAppearanceCreator.m
+++ b/node_modules/react-native-navigation/lib/ios/TabBarItemAppearanceCreator.m
@@ -10,7 +10,9 @@ - (UITabBarItem *)createTabBarItem:(UITabBarItem *)mergeItem {
 }
 
 - (void)setTitleAttributes:(UITabBarItem *)tabItem titleAttributes:(NSDictionary *)titleAttributes {
-    tabItem.standardAppearance.stackedLayoutAppearance.normal.titleTextAttributes = titleAttributes;
+    if (UI_USER_INTERFACE_IDIOM() != UIUserInterfaceIdiomPad) {
+        tabItem.standardAppearance.stackedLayoutAppearance.normal.titleTextAttributes = titleAttributes;
+    }
     tabItem.standardAppearance.compactInlineLayoutAppearance.normal.titleTextAttributes =
         titleAttributes;
     tabItem.standardAppearance.inlineLayoutAppearance.normal.titleTextAttributes = titleAttributes;
@@ -18,8 +20,9 @@ - (void)setTitleAttributes:(UITabBarItem *)tabItem titleAttributes:(NSDictionary
 
 - (void)setSelectedTitleAttributes:(UITabBarItem *)tabItem
            selectedTitleAttributes:(NSDictionary *)selectedTitleAttributes {
-    tabItem.standardAppearance.stackedLayoutAppearance.selected.titleTextAttributes =
-        selectedTitleAttributes;
+    if (UI_USER_INTERFACE_IDIOM() != UIUserInterfaceIdiomPad) {
+        tabItem.standardAppearance.stackedLayoutAppearance.selected.titleTextAttributes = selectedTitleAttributes;
+    }
     tabItem.standardAppearance.compactInlineLayoutAppearance.selected.titleTextAttributes =
         selectedTitleAttributes;
     tabItem.standardAppearance.inlineLayoutAppearance.selected.titleTextAttributes =

zzorba avatar Sep 07 '22 16:09 zzorba

Having same issue. Can we change the position of text to be under the icon for iPad? I couldn't found the way for that either.

crv342 avatar Dec 20 '22 20:12 crv342

just remove the font-weight and add a font family with a bold text the issue will be resolved plus if you had different number of tabs according to your selection 1st what you have to do is check if your tabs length is greater then 1 then used the focus query other wise you just need to add the font family fontFamily: categoryList.length > 1? focused ?bold:font_description:bold,

myexploitss avatar Jan 17 '23 13:01 myexploitss

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.

skuzoluk avatar Jan 18 '23 13:01 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.

Yes. I even faced this solution but we can add 1 2 spaces otherwise the ui will be disturbed if its cutting 1 2 digits then we can add { } space like that

myexploitss avatar Jan 18 '23 13:01 myexploitss

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.

Yes. I even faced this solution but we can add 1 2 spaces otherwise the ui will be disturbed if its cutting 1 2 digits then we can add { } space like that

I have added spaces if only it is an ipad. Have you tried that

skuzoluk avatar Jan 18 '23 13:01 skuzoluk

Ok, guys, let's resolve it together. Based on this commit bafe997 I found, that the issue is in lib/ios/TabBarItemAppearanceCreator.m file. If comment on these 2 lines:

- (void)setTitleAttributes:(UITabBarItem *)tabItem titleAttributes:(NSDictionary *)titleAttributes {
//  tabItem.standardAppearance.stackedLayoutAppearance.normal.titleTextAttributes = titleAttributes;
    tabItem.standardAppearance.compactInlineLayoutAppearance.normal.titleTextAttributes =
        titleAttributes;
    tabItem.standardAppearance.inlineLayoutAppearance.normal.titleTextAttributes = titleAttributes;
}

- (void)setSelectedTitleAttributes:(UITabBarItem *)tabItem
           selectedTitleAttributes:(NSDictionary *)selectedTitleAttributes {
//  tabItem.standardAppearance.stackedLayoutAppearance.selected.titleTextAttributes = selectedTitleAttributes;
    tabItem.standardAppearance.compactInlineLayoutAppearance.selected.titleTextAttributes =
        selectedTitleAttributes;
    tabItem.standardAppearance.inlineLayoutAppearance.selected.titleTextAttributes =
        selectedTitleAttributes;
}

the issue disappeared for me on iOS 15.4: THEN: 1 NOW: image

So, if it works for you and you need to solve it right now, you can create a patch and apply it to your project as a temporary solution. I'm not a super iOS developer to create a PR, because I actually don't know what is happening here and why this line break it, but the definite place is determined and if somebody can help with a general solution - please share your thoughts.

This may work, but the problem is that it does not apply the style to the text, for example in our case the text of the selected tab bar is green and if I comment this it turns blue.

Any other way to patch the navigation to fix this?

Thanks!

marf avatar Apr 06 '23 11:04 marf

Still facing this issue with the latest version 7.33.4

Screenshot 2023-06-15 at 13 25 21

agestaun avatar Jun 15 '23 11:06 agestaun

I'm facing the same problem on v7.34.0. The issue will be fixed by centered the text:

        createFromDictionary:[tabItem titleTextAttributesForState:UIControlStateNormal]
                  fontFamily:fontFamily
                    fontSize:fontSize
                  fontWeight:fontWeight
                       color:textColor
                    centered:YES];
    [self setTitleAttributes:tabItem titleAttributes:normalAttributes];

    NSDictionary *selectedAttributes = [RNNFontAttributesCreator
        createFromDictionary:[tabItem titleTextAttributesForState:UIControlStateSelected]
                  fontFamily:fontFamily
                    fontSize:fontSize
                  fontWeight:fontWeight
                       color:selectedTextColor
                    centered:YES];```

thuongtv-vn avatar Jun 21 '23 08:06 thuongtv-vn

the same issue image

arashkevich25 avatar Oct 15 '23 20:10 arashkevich25

Hi - I am having the same issue . Also How i can increase the padding? i am afraid this will be a showstopper.

Screenshot 2024-01-04 at 11 06 15 AM

uma-uc avatar Jan 04 '24 19:01 uma-uc