Resolve fonts using RCTFont (#6546)

Until now, passing `fontWeight` resulted in using the system fonts. Now it will resolve the font weight with the specified font family.

Closes #6010

Co-authored-by: Guy Carmeli <guyca@users.noreply.github.com>
Co-authored-by: wixmobile <mobile1@wix.com>

lib/ios/RNNFontAttributesCreator.m

@@ -1,7 +1,8 @@
 #import "RNNFontAttributesCreator.h"
 #import "RCTConvert+UIFontWeight.h"
+#import <React/RCTFont.h>
 
-#define DEFAULT_FONT_SIZE 17.0f
+#define DEFAULT_FONT_SIZE @(17.0f)
 
 @implementation RNNFontAttributesCreator
 
@@ -22,29 +23,19 @@ + (NSDictionary *)createFromDictionary:(NSDictionary *)attributesDictionary font
 + (NSDictionary *)createFromDictionary:(NSDictionary *)attributesDictionary fontFamily:(NSString *)fontFamily fontSize:(NSNumber *)fontSize fontWeight:(NSString *)fontWeight color:(UIColor *)color {
 	NSMutableDictionary* titleTextAttributes = [NSMutableDictionary dictionaryWithDictionary:attributesDictionary];
     UIFont* currentFont = attributesDictionary[NSFontAttributeName];
-
-	CGFloat resolvedFontSize = [self resolveFontSize:currentFont fontSize:fontSize];
+	NSNumber* resolvedFontSize = [self resolveFontSize:currentFont fontSize:fontSize];
 
     titleTextAttributes[NSForegroundColorAttributeName] = color;
-
-    if (fontWeight) {
-        titleTextAttributes[NSFontAttributeName] = [UIFont systemFontOfSize:resolvedFontSize weight:[RCTConvert UIFontWeight:fontWeight]];
-    } else if (fontFamily){
-        titleTextAttributes[NSFontAttributeName] = [UIFont fontWithName:fontFamily size:resolvedFontSize];
-    } else if (fontSize && currentFont) {
-        titleTextAttributes[NSFontAttributeName] = [UIFont fontWithDescriptor:currentFont.fontDescriptor size:resolvedFontSize];
-    } else if (fontSize) {
-        titleTextAttributes[NSFontAttributeName] = [UIFont systemFontOfSize:resolvedFontSize];
-    }
+    titleTextAttributes[NSFontAttributeName] = [RCTFont updateFont:currentFont withFamily:fontFamily size:resolvedFontSize weight:fontWeight style:nil variant:nil scaleMultiplier:1.0];
 
 	return titleTextAttributes;
 }
 
-+ (CGFloat)resolveFontSize:(UIFont *)currentFont fontSize:(NSNumber *)fontSize {
++ (NSNumber *)resolveFontSize:(UIFont *)currentFont fontSize:(NSNumber *)fontSize {
     if (fontSize) {
-        return fontSize.floatValue;
+        return fontSize;
     } else if (currentFont) {
-        return currentFont.fontDescriptor.pointSize;
+        return @(currentFont.fontDescriptor.pointSize);
     } else {
         return DEFAULT_FONT_SIZE;
     }

lib/src/interfaces/Options.ts

@@ -6,13 +6,17 @@ import { ImageRequireSource, Insets } from 'react-native';
 declare type Color = string | symbol;
 type FontFamily = string;
 type FontWeight =
-  | 'regular'
-  | 'bold'
+  | 'normal'
+  | 'ultralight'
   | 'thin'
-  | 'ultraLight'
   | 'light'
+  | 'regular'
   | 'medium'
   | 'semibold'
+  | 'demibold'
+  | 'extrabold'
+  | 'ultrabold'
+  | 'bold'
   | 'heavy'
   | 'black';
 export type LayoutOrientation = 'portrait' | 'landscape';

playground/ios/NavigationTests/RNNFontAttributesCreatorTest.m

@@ -19,16 +19,17 @@ - (void)testCreateWithFontFamily_shouldCreateAttributes {
 	XCTAssertEqual(font.pointSize, fontSize.floatValue);
 }
 
-- (void)testCreateWithFontFamily_shouldIgnoreFontFamilyWhenFontWeightIsNotNil {
-	NSString* familyName = @"Helvetica";
+- (void)testCreateWithFontFamily_shouldResolveFontFamilyWithFontWeight {
+	NSString* familyName = @"Courier";
 	NSString* fontWeight = @"bold";
 	NSNumber* fontSize = @(20);
 	UIColor* fontColor = UIColor.blueColor;
 
 	NSDictionary* attributes = [RNNFontAttributesCreator createWithFontFamily:familyName fontSize:fontSize fontWeight:fontWeight color:fontColor];
 	UIFont* font = attributes[NSFontAttributeName];
+
 	XCTAssertEqual(attributes[NSForegroundColorAttributeName], fontColor);
-    XCTAssertFalse([familyName isEqualToString:font.familyName]);
+    XCTAssertTrue([[font.fontDescriptor objectForKey:UIFontDescriptorFaceAttribute] isEqualToString:@"Bold"]);
 	XCTAssertEqual(font.pointSize, fontSize.floatValue);
 }
 

playground/ios/NavigationTests/RNNRootViewControllerTest.m

@@ -10,6 +10,22 @@
 #import "RNNUIBarButtonItem.h"
 #import "RNNBottomTabsController+Helpers.h"
 
+@interface UIFont (Utils)
+
+- (BOOL)isEqual:(UIFont *)font;
+
+@end
+
+@implementation UIFont (Utils)
+
+- (BOOL)isEqualToFont:(UIFont *)font {
+	return [self.fontName isEqualToString:font.fontName] &&
+			self.pointSize == font.pointSize &&
+			[[self.fontDescriptor objectForKey:UIFontDescriptorFaceAttribute] isEqualToString:[font.fontDescriptor objectForKey:UIFontDescriptorFaceAttribute]];
+}
+
+@end
+
 @interface RNNComponentViewController (EmbedInTabBar)
 - (void)embedInTabBarController;
 @end
@@ -220,9 +236,11 @@ - (void)testTopBarLargeTitleFontSize_withoutTextFontFamily_withoutTextColor {
 	__unused RNNStackController* nav = [self createNavigationController];
 	UIFont* initialFont = self.uut.navigationController.navigationBar.standardAppearance.largeTitleTextAttributes[@"NSFont"];
 	[self.uut viewWillAppear:false];
+
 	UIFont* expectedFont = [UIFont fontWithDescriptor:initialFont.fontDescriptor size:topBarTextFontSizeInput.floatValue];
-	XCTAssertTrue([self.uut.navigationItem.standardAppearance.largeTitleTextAttributes[@"NSFont"] isEqual:expectedFont]);
-	XCTAssertTrue([self.uut.navigationItem.scrollEdgeAppearance.largeTitleTextAttributes[@"NSFont"] isEqual:expectedFont]);
+
+	XCTAssertTrue([self.uut.navigationItem.standardAppearance.largeTitleTextAttributes[@"NSFont"] isEqualToFont:expectedFont]);
+	XCTAssertTrue([self.uut.navigationItem.scrollEdgeAppearance.largeTitleTextAttributes[@"NSFont"] isEqualToFont:expectedFont]);
 }
 
 - (void)testTopBarLargeTitleFontSize_withoutTextFontFamily_withTextColor {
@@ -235,10 +253,8 @@ - (void)testTopBarLargeTitleFontSize_withoutTextFontFamily_withTextColor {
 	[self.uut viewWillAppear:false];
 	UIFont* expectedFont = [UIFont fontWithDescriptor:initialFont.fontDescriptor size:topBarTextFontSizeInput.floatValue];
 	UIColor* expectedColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
-	XCTAssertTrue([self.uut.navigationItem.standardAppearance.largeTitleTextAttributes[@"NSFont"] isEqual:expectedFont]);
-	XCTAssertTrue([self.uut.navigationItem.standardAppearance.largeTitleTextAttributes[@"NSColor"] isEqual:expectedColor]);
-	XCTAssertTrue([self.uut.navigationItem.scrollEdgeAppearance.largeTitleTextAttributes[@"NSFont"] isEqual:expectedFont]);
-	XCTAssertTrue([self.uut.navigationItem.scrollEdgeAppearance.largeTitleTextAttributes[@"NSColor"] isEqual:expectedColor]);
+	XCTAssertTrue([self.uut.navigationItem.standardAppearance.largeTitleTextAttributes[@"NSFont"] isEqualToFont:expectedFont]);
+	XCTAssertTrue([self.uut.navigationItem.scrollEdgeAppearance.largeTitleTextAttributes[@"NSFont"] isEqualToFont:expectedFont]);
 }
 
 - (void)testTopBarLargeTitleFontSize_withTextFontFamily_withTextColor {
@@ -253,7 +269,7 @@ - (void)testTopBarLargeTitleFontSize_withTextFontFamily_withTextColor {
 	[self.uut viewWillAppear:false];
 	UIColor* expectedColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
 	UIFont* expectedFont = [UIFont fontWithName:inputFont size:15];
-	XCTAssertTrue([self.uut.navigationItem.standardAppearance.largeTitleTextAttributes[@"NSFont"] isEqual:expectedFont]);
+	XCTAssertTrue([self.uut.navigationItem.standardAppearance.largeTitleTextAttributes[@"NSFont"] isEqualToFont:expectedFont]);
 	XCTAssertTrue([self.uut.navigationItem.standardAppearance.largeTitleTextAttributes[@"NSColor"] isEqual:expectedColor]);
 }
 
@@ -265,8 +281,8 @@ - (void)testTopBarLargeTitleFontSize_withTextFontFamily_withoutTextColor {
 	__unused RNNStackController* nav = [self createNavigationController];
 	[self.uut viewWillAppear:false];
 	UIFont* expectedFont = [UIFont fontWithName:inputFont size:15];
-	XCTAssertTrue([self.uut.navigationItem.standardAppearance.largeTitleTextAttributes[@"NSFont"] isEqual:expectedFont]);
-	XCTAssertTrue([self.uut.navigationItem.scrollEdgeAppearance.largeTitleTextAttributes[@"NSFont"] isEqual:expectedFont]);
+	XCTAssertTrue([self.uut.navigationItem.standardAppearance.largeTitleTextAttributes[@"NSFont"] isEqualToFont:expectedFont]);
+	XCTAssertTrue([self.uut.navigationItem.scrollEdgeAppearance.largeTitleTextAttributes[@"NSFont"] isEqualToFont:expectedFont]);
 }
 
 
@@ -277,7 +293,7 @@ - (void)testTopBarTextFontSize_withoutTextFontFamily_withoutTextColor {
 	UIFont* initialFont = self.uut.navigationController.navigationBar.standardAppearance.titleTextAttributes[@"NSFont"];
 	[self.uut viewWillAppear:false];
 	UIFont* expectedFont = [UIFont fontWithDescriptor:initialFont.fontDescriptor size:topBarTextFontSizeInput.floatValue];
-	XCTAssertTrue([self.uut.navigationItem.standardAppearance.titleTextAttributes[@"NSFont"] isEqual:expectedFont]);
+	XCTAssertTrue([self.uut.navigationItem.standardAppearance.titleTextAttributes[@"NSFont"] isEqualToFont:expectedFont]);
 }
 
 - (void)testTopBarTextFontSize_withoutTextFontFamily_withTextColor {
@@ -290,7 +306,7 @@ - (void)testTopBarTextFontSize_withoutTextFontFamily_withTextColor {
 	[self.uut viewWillAppear:false];
 	UIFont* expectedFont = [UIFont fontWithDescriptor:initialFont.fontDescriptor size:topBarTextFontSizeInput.floatValue];
 	UIColor* expectedColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
-	XCTAssertTrue([self.uut.navigationItem.standardAppearance.titleTextAttributes[@"NSFont"] isEqual:expectedFont]);
+	XCTAssertTrue([self.uut.navigationItem.standardAppearance.titleTextAttributes[@"NSFont"] isEqualToFont:expectedFont]);
 	XCTAssertTrue([self.uut.navigationItem.standardAppearance.titleTextAttributes[@"NSColor"] isEqual:expectedColor]);
 }