diff --git a/README.md b/README.md index 38465bab..ca977168 100644 --- a/README.md +++ b/README.md @@ -218,6 +218,18 @@ Allows for customizing font family to be used for back button title on iOS. Allows for customizing font size to be used for back button title on iOS. +#### `largeTitle` (iOS only) + +When set to `true` it makes the title display using the large title effect. + +#### `largeTitleFontFamily` (iOS only) + +Customize font family to be used for the large title. + +#### `largeTitleFontSize` (iOS only) + +Customize the size of the font to be used for the large title. + ## Guide for native component authors If you are adding a new native component to be used from the React Native app, you may want it to respond to navigation lifecycle events. diff --git a/createNativeStackNavigator.js b/createNativeStackNavigator.js index 62d01211..addb531f 100644 --- a/createNativeStackNavigator.js +++ b/createNativeStackNavigator.js @@ -44,6 +44,7 @@ class StackView extends React.Component { headerTintColor, gestureEnabled, largeTitle, + headerLargeTitleStyle, translucent, } = options; @@ -67,6 +68,10 @@ class StackView extends React.Component { color: headerTintColor, gestureEnabled: gestureEnabled === undefined ? true : gestureEnabled, largeTitle, + largeTitleFontFamily: + headerLargeTitleStyle && headerLargeTitleStyle.fontFamily, + largeTitleFontSize: + headerLargeTitleStyle && headerLargeTitleStyle.fontSize, }; const hasHeader = headerMode !== 'none' && options.header !== null; diff --git a/ios/RNSScreenStackHeaderConfig.h b/ios/RNSScreenStackHeaderConfig.h index 009987bd..15817bd0 100644 --- a/ios/RNSScreenStackHeaderConfig.h +++ b/ios/RNSScreenStackHeaderConfig.h @@ -14,6 +14,8 @@ @property (nonatomic, retain) UIColor *color; @property (nonatomic) BOOL hide; @property (nonatomic) BOOL largeTitle; +@property (nonatomic, retain) NSString *largeTitleFontFamily; +@property (nonatomic, retain) NSNumber *largeTitleFontSize; @property (nonatomic) BOOL hideBackButton; @property (nonatomic) BOOL hideShadow; @property (nonatomic) BOOL translucent; diff --git a/ios/RNSScreenStackHeaderConfig.m b/ios/RNSScreenStackHeaderConfig.m index 0b17f468..97067744 100644 --- a/ios/RNSScreenStackHeaderConfig.m +++ b/ios/RNSScreenStackHeaderConfig.m @@ -106,7 +106,22 @@ } [navbar setTitleTextAttributes:attrs]; } - + + if (@available(iOS 11.0, *) && config.largeTitle) { + if (config.largeTitleFontFamily || config.largeTitleFontSize || config.titleColor) { + NSMutableDictionary *largeAttrs = [NSMutableDictionary new]; + if (config.titleColor) { + largeAttrs[NSForegroundColorAttributeName] = config.titleColor; + } + CGFloat largeSize = config.largeTitleFontSize ? [config.largeTitleFontSize floatValue] : 34; + if (config.largeTitleFontFamily) { + largeAttrs[NSFontAttributeName] = [UIFont fontWithName:config.largeTitleFontFamily size:largeSize]; + } else { + largeAttrs[NSFontAttributeName] = [UIFont boldSystemFontOfSize:largeSize]; + } + [navbar setLargeTitleTextAttributes:largeAttrs]; + } + } } + (void)setTitleAttibutes:(NSDictionary *)attrs forButton:(UIBarButtonItem *)button @@ -235,6 +250,8 @@ RCT_EXPORT_VIEW_PROPERTY(backTitleFontSize, NSString) RCT_EXPORT_VIEW_PROPERTY(backgroundColor, UIColor) RCT_EXPORT_VIEW_PROPERTY(color, UIColor) RCT_EXPORT_VIEW_PROPERTY(largeTitle, BOOL) +RCT_EXPORT_VIEW_PROPERTY(largeTitleFontFamily, NSString) +RCT_EXPORT_VIEW_PROPERTY(largeTitleFontSize, NSNumber) RCT_EXPORT_VIEW_PROPERTY(hideBackButton, BOOL) RCT_EXPORT_VIEW_PROPERTY(hideShadow, BOOL) // `hidden` is an UIView property, we need to use different name internally