Bottom tabs text is cut off on iPad

[d4vidi]

What happened?

Complete info: WOARNN-568

The text in some of the bottom tabs is cut off -

What was the expected behaviour?

No response

Was it tested on latest react-native-navigation?

• I have tested this issue on the latest react-native-navigation release and it still reproduces.

Help us reproduce this issue!

No response

In what environment did this happen?

React Native Navigation version:
React Native version:
Has Fabric (React Native's new rendering system) enabled: (yes/no)
Node version:
Device model:
iOS version:

[phuongwd]

Related to

1. Text In bottom bar has been cutoff in iPad 12.9 inch (ios 15.4) #7506
2. Text in bottom bar is cut off in ipad #7827

Patch

diff --git a/node_modules/react-native-navigation/lib/ios/RNNTabBarItemCreator.m b/node_modules/react-native-navigation/lib/ios/RNNTabBarItemCreator.m
index d313bfc..c22f984 100644
--- a/node_modules/react-native-navigation/lib/ios/RNNTabBarItemCreator.m
+++ b/node_modules/react-native-navigation/lib/ios/RNNTabBarItemCreator.m
@@ -91,13 +91,19 @@
     NSNumber *fontSize = [bottomTabOptions.fontSize withDefault:@(10)];
     NSString *fontWeight = [bottomTabOptions.fontWeight withDefault:nil];
 
+    /**
+     * The title of tabbar item has been cut off in iPad 12.9 with iOS 15.4.
+     * It was mentioned at https://github.com/wix/react-native-navigation/issues/7506
+     * Hotfix: centered the text will resolve problem.
+     */
+
     NSDictionary *normalAttributes = [RNNFontAttributesCreator
         createFromDictionary:[tabItem titleTextAttributesForState:UIControlStateNormal]
                   fontFamily:fontFamily
                     fontSize:fontSize
                   fontWeight:fontWeight
                        color:textColor
-                    centered:NO];
+                    centered:TRUE];
     [self setTitleAttributes:tabItem titleAttributes:normalAttributes];
 
     NSDictionary *selectedAttributes = [RNNFontAttributesCreator
@@ -106,7 +112,7 @@
                     fontSize:fontSize
                   fontWeight:fontWeight
                        color:selectedTextColor
-                    centered:NO];
+                    centered:TRUE];
     [self setSelectedTitleAttributes:tabItem selectedTitleAttributes:selectedAttributes];
 }

[asafkorem]

Thanks for the patch suggestion @phuongwd, I will check that now 🙂

[asafkorem]

Fix is here: #7863, will release a patch version soon

[phuongwd]

Thanks for the patch suggestion @phuongwd, I will check that now 🙂

Credit to thuongtv-vn #7506 (comment)

[asafkorem]

The fix will be released in the next patch version. @phuongwd you will both get credit in the release notes 😄

[asafkorem]

Released with 7.38.4