Apply custom title font attributes to largeTitle (#183)

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.

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;

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;

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