Merge pull request #613 from grahammendick/tabbar-appearance

grahammendick · Jul 10, 2022 · 18c2b2a · 18c2b2a · gezquinndesign · Jul 17, 2022
2 parents e8532d3 + c9f34a5
commit 18c2b2a
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 29 deletions.
diff --git a/NavigationReactNative/src/TabBar.tsx b/NavigationReactNative/src/TabBar.tsx
@@ -48,7 +48,7 @@ class TabBar extends React.Component<any, any> {
         bottomTabs = bottomTabs != null ? bottomTabs : primary;
         var tabBarItems = React.Children.toArray(children).filter(child => !!child);
         var titleOnly = !tabBarItems.find(({props}: any) => props.title && props.image);
-        var {fontFamily, fontWeight, fontStyle, fontSize} = (tabBarItems[0] as any)?.props || {};
+        var {fontFamily, fontWeight, fontStyle, fontSize, badgeColor} = (tabBarItems[0] as any)?.props || {};
         var tabViewHeight = !primary ? (titleOnly ? 48 : 72) : 56
         tabViewHeight = Platform.OS === 'android' ? tabViewHeight : 28;
         var TabBarPager = (Platform.OS === 'ios' || !I18nManager.isRTL) ? NVTabBarPager : NVTabBarPagerRTL;
@@ -89,7 +89,10 @@ class TabBar extends React.Component<any, any> {
                     barTintColor={barTintColor}
                     selectedTintColor={selectedTintColor}
                     unselectedTintColor={unselectedTintColor}
+                    badgeColor={badgeColor}
                     scrollsToTop={scrollsToTop}
+                    fontFamily={fontFamily} fontWeight={fontWeight}
+                    fontStyle={fontStyle} fontSize={fontSize}
                     mostRecentEventCount={this.state.mostRecentEventCount}
                     style={styles.tabBar}>
                         <BackButton onPress={() => this.changeTab(0)} />

diff --git a/NavigationReactNative/src/TabBarNativeComponent.js b/NavigationReactNative/src/TabBarNativeComponent.js
@@ -11,7 +11,13 @@ type NativeProps = $ReadOnly<{|
   barTintColor: ColorValue,
   selectedTintColor: ColorValue,
   unselectedTintColor: ColorValue,
+  badgeColor: ColorValue,
   scrollsToTop: boolean,
+  fontFamily: string,
+  fontWeight: string,
+  fontStyle: string,
+  fontSize?: WithDefault<Float, -1>,
+  testID: string,
   mostRecentEventCount: Int32,
   onTabSelected: DirectEventHandler<$ReadOnly<{|
     tab: Int32,

diff --git a/NavigationReactNative/src/ios/NVTabBarComponentView.h b/NavigationReactNative/src/ios/NVTabBarComponentView.h
@@ -7,6 +7,10 @@ NS_ASSUME_NONNULL_BEGIN
 @interface NVTabBarComponentView : RCTViewComponentView <UITabBarControllerDelegate>
 
 @property (nonatomic, assign) BOOL scrollsToTop;
+@property (nonatomic, copy) NSString *fontFamily;
+@property (nonatomic, copy) NSString *fontWeight;
+@property (nonatomic, copy) NSString *fontStyle;
+@property (nonatomic, copy) NSNumber *fontSize;
 @property (nonatomic, assign) NSInteger mostRecentEventCount;
 
 @end

diff --git a/NavigationReactNative/src/ios/NVTabBarComponentView.mm b/NavigationReactNative/src/ios/NVTabBarComponentView.mm
@@ -11,6 +11,7 @@
 #import "RCTFabricComponentsPlugins.h"
 #import <React/UIView+React.h>
 #import <React/RCTConversions.h>
+#import <React/RCTFont.h>
 #import <React/RCTI18nUtil.h>
 #import <React/RCTScrollViewComponentView.h>
 
@@ -61,19 +62,43 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
         [_tabBarController.tabBar setTintColor: selectedTintColor];
     if ([_tabBarController.tabBar unselectedItemTintColor] != unselectedTintColor)
         [_tabBarController.tabBar setUnselectedItemTintColor: unselectedTintColor];
-    if (@available(iOS 15.0, *)) {
-        UITabBarAppearance *appearance = nil;
+    if (@available(iOS 13.0, *)) {
+        UITabBarAppearance *appearance = [UITabBarAppearance new];
+        [appearance configureWithDefaultBackground];
         if (barTintColor) {
-            appearance = [UITabBarAppearance new];
-            [appearance configureWithDefaultBackground];
             if (CGColorGetAlpha(barTintColor.CGColor) == 0)
                 [appearance configureWithTransparentBackground];
             if (CGColorGetAlpha(barTintColor.CGColor) == 1)
                 [appearance configureWithOpaqueBackground];
             [appearance setBackgroundColor:barTintColor];
         }
+        _fontFamily = [[NSString alloc] initWithUTF8String: newViewProps.fontFamily.c_str()];
+        _fontFamily = _fontFamily.length ? _fontFamily : nil;
+        _fontWeight = [[NSString alloc] initWithUTF8String: newViewProps.fontWeight.c_str()];
+        _fontWeight = _fontWeight.length ? _fontWeight : nil;
+        _fontStyle = [[NSString alloc] initWithUTF8String: newViewProps.fontStyle.c_str()];
+        _fontStyle = _fontStyle.length ? _fontStyle : nil;
+        _fontSize = @(newViewProps.fontSize);
+        _fontSize = [_fontSize intValue] >= 0 ? _fontSize : nil;
+        UIFont *baseFont = !self.fontFamily ? [UIFont systemFontOfSize:UIFont.labelFontSize] : nil;
+        NSNumber *size = !self.fontSize ? @10 : self.fontSize;
+        NSString *weight = !self.fontWeight ? @"500" : self.fontWeight;
+        UIFont *font = [RCTFont updateFont:baseFont withFamily:self.fontFamily size:size weight:weight style:self.fontStyle variant:nil scaleMultiplier:1];
+        NSMutableDictionary *attributes = [NSMutableDictionary new];
+        if (self.fontFamily || self.fontWeight || self.fontStyle || self.fontSize) {
+            attributes[NSFontAttributeName] = font;
+        }
+        UITabBarItemAppearance *itemAppearance = [UITabBarItemAppearance new];
+        UIColor *badgeColor = RCTUIColorFromSharedColor(newViewProps.badgeColor);
+        [itemAppearance.normal setBadgeBackgroundColor:badgeColor];
+        [itemAppearance.selected setBadgeBackgroundColor:badgeColor];
+        [itemAppearance.normal setTitleTextAttributes:attributes];
+        [itemAppearance.selected setTitleTextAttributes:attributes];
+        appearance.stackedLayoutAppearance = itemAppearance;
+        appearance.compactInlineLayoutAppearance = itemAppearance;
         _tabBarController.tabBar.standardAppearance = appearance;
-        _tabBarController.tabBar.scrollEdgeAppearance = appearance;
+        if (@available(iOS 15.0, *))
+            _tabBarController.tabBar.scrollEdgeAppearance = appearance;
     } else {
         [_tabBarController.tabBar setBarTintColor:barTintColor];
     }

diff --git a/NavigationReactNative/src/ios/NVTabBarItemComponentView.mm b/NavigationReactNative/src/ios/NVTabBarItemComponentView.mm
@@ -89,9 +89,7 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
     NSString *badge = [[NSString alloc] initWithUTF8String: newViewProps.badge.c_str()];
     if (self.tab.badgeValue != badge)
         self.tab.badgeValue = !!badge.length ? badge : nil;
-    UIColor *badgeColor = RCTUIColorFromSharedColor(newViewProps.badgeColor);
-    if (self.tab.badgeColor != badgeColor)
-        self.tab.badgeColor = UIColor.greenColor;
+    self.tab.badgeColor = RCTUIColorFromSharedColor(newViewProps.badgeColor);
     NSString *uri = [[NSString alloc] initWithUTF8String:newViewProps.image.uri.c_str()];
     if (![uri length]) {
         _image = nil;

diff --git a/NavigationReactNative/src/ios/NVTabBarManager.m b/NavigationReactNative/src/ios/NVTabBarManager.m
@@ -18,7 +18,12 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(barTintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(selectedTintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(unselectedTintColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(badgeColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(scrollsToTop, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(fontFamily, NSString)
+RCT_EXPORT_VIEW_PROPERTY(fontWeight, NSString)
+RCT_EXPORT_VIEW_PROPERTY(fontStyle, NSString)
+RCT_EXPORT_VIEW_PROPERTY(fontSize, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(mostRecentEventCount, NSInteger)
 RCT_EXPORT_VIEW_PROPERTY(onTabSelected, RCTDirectEventBlock)
 

diff --git a/NavigationReactNative/src/ios/NVTabBarView.h b/NavigationReactNative/src/ios/NVTabBarView.h
@@ -4,7 +4,13 @@
 @interface NVTabBarView : UIView <UITabBarControllerDelegate>
 
 @property (nonatomic, assign) NSInteger tabCount;
+@property (nonatomic, copy) UIColor *barTintColor;
+@property (nonatomic, copy) UIColor *badgeColor;
 @property (nonatomic, assign) BOOL scrollsToTop;
+@property (nonatomic, copy) NSString *fontFamily;
+@property (nonatomic, copy) NSString *fontWeight;
+@property (nonatomic, copy) NSString *fontStyle;
+@property (nonatomic, copy) NSNumber *fontSize;
 @property (nonatomic, assign) NSInteger mostRecentEventCount;
 @property (nonatomic, copy) RCTDirectEventBlock onTabSelected;
 

diff --git a/NavigationReactNative/src/ios/NVTabBarView.m b/NavigationReactNative/src/ios/NVTabBarView.m
@@ -4,6 +4,7 @@
 
 #import <UIKit/UIKit.h>
 #import <React/UIView+React.h>
+#import <React/RCTFont.h>
 #import <React/RCTI18nUtil.h>
 #import <React/RCTScrollView.h>
 
@@ -34,26 +35,6 @@ - (void)setSelectedTab:(NSInteger)selectedTab
     }
 }
 
-- (void)setBarTintColor:(UIColor *)barTintColor
-{
-    if (@available(iOS 15.0, *)) {
-        UITabBarAppearance *appearance = nil;
-        if (barTintColor) {
-            appearance = [UITabBarAppearance new];
-            [appearance configureWithDefaultBackground];
-            if (CGColorGetAlpha(barTintColor.CGColor) == 0)
-                [appearance configureWithTransparentBackground];
-            if (CGColorGetAlpha(barTintColor.CGColor) == 1)
-                [appearance configureWithOpaqueBackground];
-            [appearance setBackgroundColor:barTintColor];
-        }
-        _tabBarController.tabBar.standardAppearance = appearance;
-        _tabBarController.tabBar.scrollEdgeAppearance = appearance;
-    } else {
-        [_tabBarController.tabBar setBarTintColor:barTintColor];
-    }
-}
-
 - (void)setSelectedTintColor:(UIColor *)selectedTintColor
 {
     [_tabBarController.tabBar setTintColor: selectedTintColor];
@@ -96,6 +77,37 @@ - (void)didSetProps:(NSArray<NSString *> *)changedProps
         }
         [self selectTab];
     }
+    if (@available(iOS 13.0, *)) {
+        UITabBarAppearance *appearance = [UITabBarAppearance new];
+        [appearance configureWithDefaultBackground];
+        if (_barTintColor) {
+            if (CGColorGetAlpha(_barTintColor.CGColor) == 0)
+                [appearance configureWithTransparentBackground];
+            if (CGColorGetAlpha(_barTintColor.CGColor) == 1)
+                [appearance configureWithOpaqueBackground];
+            [appearance setBackgroundColor:_barTintColor];
+        }
+        UIFont *baseFont = !self.fontFamily ? [UIFont systemFontOfSize:UIFont.labelFontSize] : nil;
+        NSNumber *size = !self.fontSize ? @10 : self.fontSize;
+        NSString *weight = !self.fontWeight ? @"500" : self.fontWeight;
+        UIFont *font = [RCTFont updateFont:baseFont withFamily:self.fontFamily size:size weight:weight style:self.fontStyle variant:nil scaleMultiplier:1];
+        NSMutableDictionary *attributes = [NSMutableDictionary new];
+        if (self.fontFamily || self.fontWeight || self.fontStyle || self.fontSize) {
+            attributes[NSFontAttributeName] = font;
+        }
+        UITabBarItemAppearance *itemAppearance = [UITabBarItemAppearance new];
+        [itemAppearance.normal setBadgeBackgroundColor:_badgeColor];
+        [itemAppearance.selected setBadgeBackgroundColor:_badgeColor];
+        [itemAppearance.normal setTitleTextAttributes:attributes];
+        [itemAppearance.selected setTitleTextAttributes:attributes];
+        appearance.stackedLayoutAppearance = itemAppearance;
+        appearance.compactInlineLayoutAppearance = itemAppearance;
+        _tabBarController.tabBar.standardAppearance = appearance;
+        if (@available(iOS 15.0, *))
+            _tabBarController.tabBar.scrollEdgeAppearance = appearance;
+    } else {
+        [_tabBarController.tabBar setBarTintColor:_barTintColor];
+    }
 }
 
 - (void)didMoveToWindow