Skip to content

Displayed TabBar font and badge color props (iOS >= 13) #613

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
grahammendick merged 3 commits into from
Jul 10, 2022
Merged

Displayed TabBar font and badge color props (iOS >= 13) #613

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5f1fbd3
Used appearance for fonts on tab bar
grahammendick Jul 10, 2022
a116868
Used appearance for badge color on tab bar
grahammendick Jul 10, 2022
c9f34a5
Applied font/badge appearance changes in new arch
grahammendick Jul 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion NavigationReactNative/src/TabBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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)} />
Expand Down
6 changes: 6 additions & 0 deletions NavigationReactNative/src/TabBarNativeComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 4 additions & 0 deletions NavigationReactNative/src/ios/NVTabBarComponentView.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
35 changes: 30 additions & 5 deletions NavigationReactNative/src/ios/NVTabBarComponentView.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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];
}
Expand Down
4 changes: 1 addition & 3 deletions NavigationReactNative/src/ios/NVTabBarItemComponentView.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
5 changes: 5 additions & 0 deletions NavigationReactNative/src/ios/NVTabBarManager.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
6 changes: 6 additions & 0 deletions NavigationReactNative/src/ios/NVTabBarView.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
52 changes: 32 additions & 20 deletions NavigationReactNative/src/ios/NVTabBarView.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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];
Expand Down Expand Up @@ -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
Expand Down