search

wix / react-native-navigation

A complete native navigation solution for React Native
https://wix.github.io/react-native-navigation/
MIT License
13.04k stars 2.67k forks source link

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

Closed huytd1na closed 1 year ago

huytd1na commented 2 years ago

🐛 Bug Report

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

Expected behavior

Actual Behavior

Your Environment

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

haveneersrobin commented 2 years ago

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

olegderecha commented 2 years ago

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.

stoopkid1 commented 2 years ago

@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.

zzorba commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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.

olegderecha commented 2 years ago

@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.

zzorba commented 2 years ago

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 commented 2 years ago

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 =
crv342 commented 1 year ago

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.

myexploitss commented 1 year ago

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,

skuzoluk commented 1 year ago

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.

myexploitss commented 1 year ago

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

skuzoluk commented 1 year ago

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

marf commented 1 year ago

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!

agestaun commented 1 year ago

Still facing this issue with the latest version 7.33.4

Screenshot 2023-06-15 at 13 25 21

thuongtv-vn commented 1 year ago

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];```
arashkevich25 commented 1 year ago

the same issue

image
uma-uc commented 10 months ago

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