Large title options (#3331)

* add addicional options to tabbar

* fix tests

docs/docs/styling.md

@@ -10,7 +10,6 @@ export default class StyledScreen extends Component {
     return {
       topBar: {
         title: {
-          largeTitle: false,
           text: 'My Screen'
         },
         drawBehind: true,
@@ -81,6 +80,12 @@ Navigation.mergeOptions(this.props.componentId, {
     component: {
       name: 'example.CustomTopBar'
     },
+    largeTitle: {
+      visible: true,
+      fontSize: 30,
+      color: 'red',
+      fontFamily: 'Helvetica'
+    },
     title: {
       text: 'Title',
       fontSize: 14,
@@ -167,11 +172,16 @@ Navigation.mergeOptions(this.props.componentId, {
     transparent: false,
     noBorder: false,
     blur: false,
-    largeTitle: false,
     backButtonImage: require('icon.png'),
     backButtonHidden: false,
     backButtonTitle: 'Back',
     hideBackButtonTitle: false,
+    largeTitle: {
+      visible: true,
+      fontSize: 30,
+      color: 'red',
+      fontFamily: 'Helvetica'
+    },
   },
   bottomTabs: {
     translucent: true,

lib/ios/RNNLargeTitleOptions.h

@@ -0,0 +1,10 @@
+#import "RNNOptions.h"
+#import "RNNComponentOptions.h"
+
+@interface RNNLargeTitleOptions : RNNOptions
+
+@property (nonatomic, strong) NSNumber* fontSize;
+@property (nonatomic, strong) NSNumber* visible;
+@property (nonatomic, strong) NSNumber* color;
+@property (nonatomic, strong) NSString* fontFamily;
+@end

lib/ios/RNNLargeTitleOptions.m

@@ -0,0 +1,49 @@
+#import "RNNLargeTitleOptions.h"
+#import "RNNTitleViewHelper.h"
+
+
+@implementation RNNLargeTitleOptions
+
+- (void)applyOn:(UIViewController *)viewController {
+
+	if (@available(iOS 11.0, *)) {
+		
+		viewController.navigationItem.largeTitleDisplayMode = UINavigationItemLargeTitleDisplayModeNever;
+	
+		if ([self.visible boolValue]){
+			viewController.navigationController.navigationBar.prefersLargeTitles = YES;
+			viewController.navigationItem.largeTitleDisplayMode = UINavigationItemLargeTitleDisplayModeAlways;
+		} else {
+			viewController.navigationController.navigationBar.prefersLargeTitles = NO;
+		}
+		
+		NSDictionary* fontAttributes = [self fontAttributes];
+		viewController.navigationController.navigationBar.largeTitleTextAttributes = fontAttributes;
+	}
+}
+
+- (NSDictionary *)fontAttributes {
+	NSMutableDictionary* navigationBarTitleTextAttributes = [NSMutableDictionary new];
+	if (self.fontFamily || self.fontSize || self.color) {
+		if (self.color) {
+			navigationBarTitleTextAttributes[NSForegroundColorAttributeName] = [RCTConvert UIColor:self.color];
+		}
+		if (self.fontFamily){
+			if (self.fontSize) {
+				navigationBarTitleTextAttributes[NSFontAttributeName] = [UIFont fontWithName:self.fontFamily size:[self.fontSize floatValue]];
+			} else {
+				navigationBarTitleTextAttributes[NSFontAttributeName] = [UIFont fontWithName:self.fontFamily size:20];
+			}
+		} else if (self.fontSize) {
+			navigationBarTitleTextAttributes[NSFontAttributeName] = [UIFont systemFontOfSize:[self.fontSize floatValue]];
+		}
+	}
+	
+	return navigationBarTitleTextAttributes;
+}
+
+- (NSNumber *)fontSize {
+	return _fontSize ? _fontSize : nil;
+}
+
+@end

lib/ios/RNNTitleOptions.m

@@ -12,10 +12,7 @@
 	NSDictionary* fontAttributes = [self fontAttributes];
 	
 	viewController.navigationController.navigationBar.titleTextAttributes = fontAttributes;
-	if (@available(iOS 11.0, *)){
-		viewController.navigationController.navigationBar.largeTitleTextAttributes = fontAttributes;
-	}
-	
+
 	if (self.subtitle.text) {
 		RNNTitleViewHelper* titleViewHelper = [[RNNTitleViewHelper alloc] init:viewController title:self.text subtitle:self.subtitle.text titleImageData:nil isSetSubtitle:NO];
 		[titleViewHelper setup:self];

lib/ios/RNNTopBarOptions.h

@@ -1,4 +1,5 @@
 #import "RNNOptions.h"
+#import "RNNLargeTitleOptions.h"
 #import "RNNTitleOptions.h"
 #import "RNNSubtitleOptions.h"
 #import "RNNBackgroundOptions.h"
@@ -17,8 +18,8 @@
 @property (nonatomic, strong) NSNumber* noBorder;
 @property (nonatomic, strong) NSNumber* blur;
 @property (nonatomic, strong) NSNumber* animate;
-@property (nonatomic, strong) NSNumber* largeTitle;
 @property (nonatomic, strong) NSString* testID;
+@property (nonatomic, strong) RNNLargeTitleOptions* largeTitle;
 @property (nonatomic, strong) RNNTitleOptions* title;
 @property (nonatomic, strong) RNNSubtitleOptions* subtitle;
 @property (nonatomic, strong) RNNBackgroundOptions* background;

lib/ios/RNNTopBarOptions.m

@@ -28,20 +28,10 @@ extern const NSInteger BLUR_TOPBAR_TAG;
 
 - (void)applyOn:(UIViewController*)viewController {
 	[self.title applyOn:viewController];
+	[self.largeTitle applyOn:viewController];
 	[self.background applyOn:viewController];
 	
 	if (@available(iOS 11.0, *)) {
-		if (self.largeTitle){
-			if ([self.largeTitle boolValue]) {
-				viewController.navigationController.navigationBar.prefersLargeTitles = YES;
-				viewController.navigationItem.largeTitleDisplayMode = UINavigationItemLargeTitleDisplayModeAlways;
-			} else {
-				viewController.navigationItem.largeTitleDisplayMode = UINavigationItemLargeTitleDisplayModeNever;
-			}
-		} else {
-			viewController.navigationController.navigationBar.prefersLargeTitles = NO;
-			viewController.navigationItem.largeTitleDisplayMode = UINavigationItemLargeTitleDisplayModeNever;
-		}
 		if ([self.searchBar boolValue] && !viewController.navigationItem.searchController) {
 			UISearchController *search = [[UISearchController alloc]initWithSearchResultsController:nil];
 			search.dimsBackgroundDuringPresentation = NO;

lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

@@ -61,6 +61,8 @@
 		2DCD9196200014A900EDC75D /* RNNBridgeManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 2DCD9194200014A900EDC75D /* RNNBridgeManager.m */; };
 		390AD477200F499D00A8250D /* RNNSwizzles.h in Headers */ = {isa = PBXBuildFile; fileRef = 390AD475200F499D00A8250D /* RNNSwizzles.h */; };
 		390AD478200F499D00A8250D /* RNNSwizzles.m in Sources */ = {isa = PBXBuildFile; fileRef = 390AD476200F499D00A8250D /* RNNSwizzles.m */; };
+		4534E72520CB6724009F8185 /* RNNLargeTitleOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 4534E72320CB6724009F8185 /* RNNLargeTitleOptions.h */; };
+		4534E72620CB6724009F8185 /* RNNLargeTitleOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 4534E72420CB6724009F8185 /* RNNLargeTitleOptions.m */; };
 		5016E8EF20209690009D4F7C /* RNNCustomTitleView.h in Headers */ = {isa = PBXBuildFile; fileRef = 5016E8ED2020968F009D4F7C /* RNNCustomTitleView.h */; };
 		5016E8F020209690009D4F7C /* RNNCustomTitleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 5016E8EE2020968F009D4F7C /* RNNCustomTitleView.m */; };
 		50175CD1207A2AA1004FE91B /* RNNComponentOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 50175CCF207A2AA1004FE91B /* RNNComponentOptions.h */; };
@@ -76,7 +78,6 @@
 		50451D0E2042F70900695F00 /* RNNTransition.m in Sources */ = {isa = PBXBuildFile; fileRef = 50451D0C2042F70900695F00 /* RNNTransition.m */; };
 		5048862D20BE976D000908DE /* RNNLayoutOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 5048862B20BE976D000908DE /* RNNLayoutOptions.h */; };
 		5048862E20BE976D000908DE /* RNNLayoutOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 5048862C20BE976D000908DE /* RNNLayoutOptions.m */; };
-		504AFE641FFE53070076E904 /* RNNOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 504AFE621FFE53070076E904 /* RNNOptions.h */; };
 		504AFE651FFE53070076E904 /* RNNOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 504AFE631FFE53070076E904 /* RNNOptions.m */; };
 		504AFE741FFFF0540076E904 /* RNNTopTabsOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 504AFE721FFFF0540076E904 /* RNNTopTabsOptions.h */; };
 		504AFE751FFFF0540076E904 /* RNNTopTabsOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 504AFE731FFFF0540076E904 /* RNNTopTabsOptions.m */; };
@@ -267,6 +268,8 @@
 		2DCD9194200014A900EDC75D /* RNNBridgeManager.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNBridgeManager.m; sourceTree = "<group>"; };
 		390AD475200F499D00A8250D /* RNNSwizzles.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNSwizzles.h; sourceTree = "<group>"; };
 		390AD476200F499D00A8250D /* RNNSwizzles.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNSwizzles.m; sourceTree = "<group>"; };
+		4534E72320CB6724009F8185 /* RNNLargeTitleOptions.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNLargeTitleOptions.h; sourceTree = "<group>"; };
+		4534E72420CB6724009F8185 /* RNNLargeTitleOptions.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNLargeTitleOptions.m; sourceTree = "<group>"; };
 		5016E8ED2020968F009D4F7C /* RNNCustomTitleView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNCustomTitleView.h; sourceTree = "<group>"; };
 		5016E8EE2020968F009D4F7C /* RNNCustomTitleView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNCustomTitleView.m; sourceTree = "<group>"; };
 		50175CCF207A2AA1004FE91B /* RNNComponentOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNComponentOptions.h; sourceTree = "<group>"; };
@@ -519,6 +522,8 @@
 		504AFE611FFE52EF0076E904 /* Options */ = {
 			isa = PBXGroup;
 			children = (
+				4534E72320CB6724009F8185 /* RNNLargeTitleOptions.h */,
+				4534E72420CB6724009F8185 /* RNNLargeTitleOptions.m */,
 				E33AC20220B5C3880090DB8A /* RNNStatusBarOptions.h */,
 				E33AC20320B5C3890090DB8A /* RNNStatusBarOptions.m */,
 				504AFE621FFE53070076E904 /* RNNOptions.h */,
@@ -822,10 +827,10 @@
 				507F44201FFA8A8800D9425B /* RNNRootViewProtocol.h in Headers */,
 				50570BEA2063E09B006A1B5C /* RNNTitleViewHelper.h in Headers */,
 				263905CA1E4C6F440023D7D3 /* SidebarLuvocracyAnimation.h in Headers */,
+				4534E72520CB6724009F8185 /* RNNLargeTitleOptions.h in Headers */,
 				50762D08205E96C200E3D18A /* RNNModalAnimation.h in Headers */,
 				390AD477200F499D00A8250D /* RNNSwizzles.h in Headers */,
 				263905B11E4C6F440023D7D3 /* MMDrawerController.h in Headers */,
-				504AFE641FFE53070076E904 /* RNNOptions.h in Headers */,
 				263905B91E4C6F440023D7D3 /* RCCDrawerController.h in Headers */,
 				263905B31E4C6F440023D7D3 /* MMDrawerVisualState.h in Headers */,
 				502CB43A20CBCA180019B2FE /* RNNBridgeManagerDelegate.h in Headers */,
@@ -996,6 +1001,7 @@
 				263905BA1E4C6F440023D7D3 /* RCCDrawerController.m in Sources */,
 				50F5DFC21F407A8C001A00BC /* RNNTabBarController.m in Sources */,
 				263905BC1E4C6F440023D7D3 /* RCCDrawerHelper.m in Sources */,
+				4534E72620CB6724009F8185 /* RNNLargeTitleOptions.m in Sources */,
 				507E7D58201DDD3000444E6C /* RNNAnimationOptions.m in Sources */,
 				2145452A1F4DC85F006E8DA1 /* RCTHelpers.m in Sources */,
 				2DCD9196200014A900EDC75D /* RNNBridgeManager.m in Sources */,

lib/ios/ReactNativeNavigationTests/RNNRootViewControllerTest.m

@@ -225,6 +225,78 @@
 	
 }
 
+
+-(void)testTopBarLargeTitle_default {
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+	
+	XCTAssertEqual(self.uut.navigationItem.largeTitleDisplayMode,  UINavigationItemLargeTitleDisplayModeNever);
+}
+-(void)testTopBarLargeTitle_true {
+	self.options.topBar.largeTitle.visible = @(1);
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+	
+	XCTAssertEqual(self.uut.navigationItem.largeTitleDisplayMode, UINavigationItemLargeTitleDisplayModeAlways);
+}
+-(void)testTopBarLargeTitle_false {
+	self.options.topBar.largeTitle.visible  = @(0);
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+	
+	XCTAssertEqual(self.uut.navigationItem.largeTitleDisplayMode, UINavigationItemLargeTitleDisplayModeNever);
+}
+
+
+-(void)testTopBarLargeTitleFontSize_withoutTextFontFamily_withoutTextColor {
+	NSNumber* topBarTextFontSizeInput = @(15);
+	self.options.topBar.largeTitle.fontSize = topBarTextFontSizeInput;
+	__unused RNNNavigationController* nav = [[RNNNavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+	UIFont* expectedFont = [UIFont systemFontOfSize:15];
+	XCTAssertTrue([self.uut.navigationController.navigationBar.largeTitleTextAttributes[@"NSFont"] isEqual:expectedFont]);
+}
+
+-(void)testTopBarLargeTitleFontSize_withoutTextFontFamily_withTextColor {
+	NSNumber* topBarTextFontSizeInput = @(15);
+	NSNumber* inputColor = @(0xFFFF0000);
+	self.options.topBar.largeTitle.fontSize = topBarTextFontSizeInput;
+	self.options.topBar.largeTitle.color = inputColor;
+	__unused RNNNavigationController* nav = [[RNNNavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+	UIFont* expectedFont = [UIFont systemFontOfSize:15];
+	UIColor* expectedColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
+	XCTAssertTrue([self.uut.navigationController.navigationBar.largeTitleTextAttributes[@"NSFont"] isEqual:expectedFont]);
+	XCTAssertTrue([self.uut.navigationController.navigationBar.largeTitleTextAttributes[@"NSColor"] isEqual:expectedColor]);
+}
+
+-(void)testTopBarLargeTitleFontSize_withTextFontFamily_withTextColor {
+	NSNumber* topBarTextFontSizeInput = @(15);
+	NSNumber* inputColor = @(0xFFFF0000);
+	NSString* inputFont = @"HelveticaNeue";
+	self.options.topBar.largeTitle.fontSize = topBarTextFontSizeInput;
+	self.options.topBar.largeTitle.color = inputColor;
+	self.options.topBar.largeTitle.fontFamily = inputFont;
+	__unused RNNNavigationController* nav = [[RNNNavigationController alloc] initWithRootViewController:self.uut];
+	[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.navigationController.navigationBar.largeTitleTextAttributes[@"NSFont"] isEqual:expectedFont]);
+	XCTAssertTrue([self.uut.navigationController.navigationBar.largeTitleTextAttributes[@"NSColor"] isEqual:expectedColor]);
+}
+
+-(void)testTopBarLargeTitleFontSize_withTextFontFamily_withoutTextColor {
+	NSNumber* topBarTextFontSizeInput = @(15);
+	NSString* inputFont = @"HelveticaNeue";
+	self.options.topBar.largeTitle.fontSize = topBarTextFontSizeInput;
+	self.options.topBar.largeTitle.fontFamily = inputFont;
+	__unused RNNNavigationController* nav = [[RNNNavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+	UIFont* expectedFont = [UIFont fontWithName:inputFont size:15];
+	XCTAssertTrue([self.uut.navigationController.navigationBar.largeTitleTextAttributes[@"NSFont"] isEqual:expectedFont]);
+}
+
+
 -(void)testTopBarTextFontSize_withoutTextFontFamily_withoutTextColor {
 	NSNumber* topBarTextFontSizeInput = @(15);
 	self.options.topBar.title.fontSize = topBarTextFontSizeInput;
@@ -492,26 +564,6 @@
 	XCTAssertNil([self.uut.navigationController.navigationBar viewWithTag:BLUR_TOPBAR_TAG]);
 }
 
--(void)testTopBarLargeTitle_default {
-	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
-	[self.uut viewWillAppear:false];
-	
-	XCTAssertEqual(self.uut.navigationItem.largeTitleDisplayMode,  UINavigationItemLargeTitleDisplayModeNever);
-}
--(void)testTopBarLargeTitle_true {
-	self.options.topBar.largeTitle = @(1);
-	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
-	[self.uut viewWillAppear:false];
-	
-	XCTAssertEqual(self.uut.navigationItem.largeTitleDisplayMode, UINavigationItemLargeTitleDisplayModeAlways);
-}
--(void)testTopBarLargeTitle_false {
-	self.options.topBar.largeTitle  = @(0);
-	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
-	[self.uut viewWillAppear:false];
-	
-	XCTAssertEqual(self.uut.navigationItem.largeTitleDisplayMode, UINavigationItemLargeTitleDisplayModeNever);
-}
 -(void)testTopBarBlur_false {
 	NSNumber* topBarBlurInput = @(0);
 	self.options.topBar.blur = topBarBlurInput;

playground/src/screens/CustomTransitionDestination.js

@@ -18,7 +18,9 @@ class CustomTransitionDestination extends Component {
           text: 'ye babyyyyyy',
           fontFamily: 'HelveticaNeue-Italic'
         },
-        largeTitle: false
+        largeTitle: {
+          visible: false
+        }      
       }
     };
   }

playground/src/screens/CustomTransitionOrigin.js

@@ -15,7 +15,9 @@ class CustomTransitionOrigin extends Component {
           fontFamily: 'HelveticaNeue-Italic',
           fontSize: 16
         },
-        largeTitle: false,
+        largeTitle: {
+          visible: false
+        },
         translucent: true
       }
     };

playground/src/screens/OptionsScreen.js

@@ -28,8 +28,10 @@ class OptionsScreen extends Component {
           color: 'black',
           fontSize: 16,
           alignment: 'center',
-          fontFamily: 'HelveticaNeue-Italic',
-          largeTitle: false
+          fontFamily: 'HelveticaNeue-Italic'
+        },
+        largeTitle: {
+          visible: false
         },
         subtitle: {
           text: 'Static Subtitle',
@@ -179,9 +181,11 @@ class OptionsScreen extends Component {
         title: {
           text: 'Dynamic Title',
           color: '#00FFFF',
-          largeTitle: false,
           fontSize: 20,
           fontFamily: 'HelveticaNeue-CondensedBold'
+        },
+        largeTitle: {
+          visible: false
         }
       }
     });

playground/src/screens/SearchScreen.js

@@ -22,7 +22,9 @@ class SearchControllerScreen extends Component {
         title: {
           text: 'Search'
         },
-        largeTitle: true,
+        largeTitle: {
+          visible: true
+        },
         searchBar: true,
         searchBarHiddenWhenScrolling: true,
         translucent: true,

playground/src/screens/TopTabOptionsScreen.js

@@ -41,7 +41,9 @@ class TopTabOptionsScreen extends PureComponent {
           fontSize: 16,
           fontFamily: 'HelveticaNeue-CondensedBold'
         },
-        largeTitle: false,
+        largeTitle: {
+          visible: false,
+        },
         buttonColor: 'red',
       }
     });

playground/src/screens/WelcomeScreen.js

@@ -17,9 +17,11 @@ class WelcomeScreen extends Component {
       },
       topBar: {
         title: {
-          largeTitle: false,
           title: 'My Screen'
         },
+        largeTitle: {
+          visible: false,
+        },
         drawBehind: true,
         visible: false,
         animate: false