Allow the fontweight for the title to be customized (#706)

Added ability to change the fontWeight of the header title on iOS.
software-mansion · Dec 7, 2020 · aa57d19 · aa57d19
1 parent 6bd47cb
commit aa57d19
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -190,6 +190,10 @@ Customize the font family to be used for the title.
 
 Customize the size of the font to be used for the title.
 
+#### `titleFontWeight` (iOS only)
+
+Customize the weight of the font to be used for the title.
+
 #### `titleColor`
 
 Allows for setting text color of the title.

diff --git a/TestsExample/App.js b/TestsExample/App.js
@@ -20,10 +20,11 @@ import Test649 from './src/Test649';
 import Test654 from './src/Test654';
 import Test691 from './src/Test691';
 import Test702 from './src/Test702';
+import Test706 from './src/Test706';
 import Test713 from './src/Test713';
 
 enableScreens();
 
 export default function App() {
   return <Test42 />;
-};
+}
diff --git a/TestsExample/src/Test706.js b/TestsExample/src/Test706.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import {Button, Text, ScrollView, View} from 'react-native';
+import {NavigationContainer} from '@react-navigation/native';
+import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+
+function HomeScreen({navigation}) {
+  return (
+    <ScrollView>
+      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+        <Text style={{fontSize: 24}}>Home screen with a 'bold' title</Text>
+        <Button
+          onPress={() => navigation.navigate('Details')}
+          title="Go to Details"
+        />
+      </View>
+    </ScrollView>
+  );
+}
+
+function DetailsScreen() {
+  return (
+    <ScrollView>
+      <View>
+        <Text>Details screen with a 'light' title</Text>
+      </View>
+    </ScrollView>
+  );
+}
+
+const RootStack = createNativeStackNavigator();
+
+function RootStackScreen() {
+  return (
+    <RootStack.Navigator
+      screenOptions={{
+        headerTitleStyle: {fontWeight: '900'},
+        headerLargeTitle: true,
+        headerLargeTitleStyle: {
+          fontWeight: '900',
+        },
+      }}>
+      <RootStack.Screen name="Home" component={HomeScreen} />
+      <RootStack.Screen
+        name="Details"
+        component={DetailsScreen}
+        options={{
+          headerTitleStyle: {fontWeight: '100'},
+          headerLargeTitleStyle: {
+            fontWeight: '100',
+          },
+        }}
+      />
+    </RootStack.Navigator>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <RootStackScreen />
+    </NavigationContainer>
+  );
+}
diff --git a/createNativeStackNavigator/README.md b/createNativeStackNavigator/README.md
@@ -100,6 +100,7 @@ Style object for header title. Supported properties:
 
 - `fontFamily`
 - `fontSize`
+- `fontWeight` (iOS only).
 - `color`
 
 #### `headerTopInsetEnabled`

diff --git a/ios/RNSScreenStackHeaderConfig.h b/ios/RNSScreenStackHeaderConfig.h
@@ -17,6 +17,7 @@ typedef NS_ENUM(NSInteger, RNSStatusBarStyle) {
 @property (nonatomic, retain) NSString *title;
 @property (nonatomic, retain) NSString *titleFontFamily;
 @property (nonatomic, retain) NSNumber *titleFontSize;
+@property (nonatomic, retain) NSString *titleFontWeight;
 @property (nonatomic, retain) UIColor *titleColor;
 @property (nonatomic, retain) NSString *backTitle;
 @property (nonatomic, retain) NSString *backTitleFontFamily;
@@ -28,6 +29,7 @@ typedef NS_ENUM(NSInteger, RNSStatusBarStyle) {
 @property (nonatomic) BOOL largeTitle;
 @property (nonatomic, retain) NSString *largeTitleFontFamily;
 @property (nonatomic, retain) NSNumber *largeTitleFontSize;
+@property (nonatomic, retain) NSString *largeTitleFontWeight;
 @property (nonatomic, retain) UIColor *largeTitleBackgroundColor;
 @property (nonatomic) BOOL largeTitleHideShadow;
 @property (nonatomic, retain) UIColor *largeTitleColor;

diff --git a/ios/RNSScreenStackHeaderConfig.m b/ios/RNSScreenStackHeaderConfig.m
@@ -145,16 +145,18 @@ + (void)setAnimatedConfig:(UIViewController *)vc withConfig:(RNSScreenStackHeade
     [navbar setTranslucent:config.translucent];
     [navbar setValue:@(hideShadow ? YES : NO) forKey:@"hidesShadow"];
 
-    if (config.titleFontFamily || config.titleFontSize || config.titleColor) {
+    if (config.titleFontFamily || config.titleFontSize || config.titleFontWeight || config.titleColor) {
       NSMutableDictionary *attrs = [NSMutableDictionary new];
 
       if (config.titleColor) {
         attrs[NSForegroundColorAttributeName] = config.titleColor;
       }
 
+      NSString *family = config.titleFontFamily ?: nil;
       NSNumber *size = config.titleFontSize ?: @17;
-      if (config.titleFontFamily) {
-        attrs[NSFontAttributeName] = [RCTFont updateFont:nil withFamily:config.titleFontFamily size:size weight:nil style:nil variant:nil scaleMultiplier:1.0];
+      NSString *weight = config.titleFontWeight ?: nil;
+      if (family || weight) {
+        attrs[NSFontAttributeName] = [RCTFont updateFont:nil withFamily:family size:size weight:weight style:nil variant:nil scaleMultiplier:1.0];
       } else {
         attrs[NSFontAttributeName] = [UIFont boldSystemFontOfSize:[size floatValue]];
       }
@@ -163,14 +165,16 @@ + (void)setAnimatedConfig:(UIViewController *)vc withConfig:(RNSScreenStackHeade
 
 #if (TARGET_OS_IOS)
     if (@available(iOS 11.0, *)) {
-      if (config.largeTitle && (config.largeTitleFontFamily || config.largeTitleFontSize || config.largeTitleColor || config.titleColor)) {
+      if (config.largeTitle && (config.largeTitleFontFamily || config.largeTitleFontSize || config.largeTitleFontWeight || config.largeTitleColor || config.titleColor)) {
         NSMutableDictionary *largeAttrs = [NSMutableDictionary new];
         if (config.largeTitleColor || config.titleColor) {
           largeAttrs[NSForegroundColorAttributeName] = config.largeTitleColor ? config.largeTitleColor : config.titleColor;
         }
+        NSString *largeFamily = config.largeTitleFontFamily ?: nil;
         NSNumber *largeSize = config.largeTitleFontSize ?: @34;
-        if (config.largeTitleFontFamily) {
-          largeAttrs[NSFontAttributeName] = [RCTFont updateFont:nil withFamily:config.largeTitleFontFamily size:largeSize weight:nil style:nil variant:nil scaleMultiplier:1.0];
+        NSNumber *largeWeight = config.largeTitleFontWeight ?: nil;
+        if (largeFamily || largeWeight) {
+          largeAttrs[NSFontAttributeName] = [RCTFont updateFont:nil withFamily:largeFamily size:largeSize weight:largeWeight style:nil variant:nil scaleMultiplier:1.0];
         } else {
           largeAttrs[NSFontAttributeName] = [UIFont systemFontOfSize:[largeSize floatValue] weight:UIFontWeightBold];
         }
@@ -291,32 +295,36 @@ + (UINavigationBarAppearance*)buildAppearance:(UIViewController *)vc withConfig:
     appearance.shadowColor = nil;
   }
 
-  if (config.titleFontFamily || config.titleFontSize || config.titleColor) {
+  if (config.titleFontFamily || config.titleFontSize || config.titleFontWeight || config.titleColor) {
     NSMutableDictionary *attrs = [NSMutableDictionary new];
 
     if (config.titleColor) {
       attrs[NSForegroundColorAttributeName] = config.titleColor;
     }
 
+    NSString *family = config.titleFontFamily ?: nil;
     NSNumber *size = config.titleFontSize ?: @17;
-    if (config.titleFontFamily) {
-      attrs[NSFontAttributeName] = [RCTFont updateFont:nil withFamily:config.titleFontFamily size:size weight:nil style:nil variant:nil scaleMultiplier:1.0];
+    NSString *weight = config.titleFontWeight ?: nil;
+    if (family || weight) {
+      attrs[NSFontAttributeName] = [RCTFont updateFont:nil withFamily:config.titleFontFamily size:size weight:weight style:nil variant:nil scaleMultiplier:1.0];
     } else {
       attrs[NSFontAttributeName] = [UIFont boldSystemFontOfSize:[size floatValue]];
     }
     appearance.titleTextAttributes = attrs;
   }
 
-  if (config.largeTitleFontFamily || config.largeTitleFontSize || config.largeTitleColor || config.titleColor) {
+  if (config.largeTitleFontFamily || config.largeTitleFontSize || config.largeTitleFontWeight || config.largeTitleColor || config.titleColor) {
     NSMutableDictionary *largeAttrs = [NSMutableDictionary new];
 
     if (config.largeTitleColor || config.titleColor) {
       largeAttrs[NSForegroundColorAttributeName] = config.largeTitleColor ? config.largeTitleColor : config.titleColor;
     }
 
+    NSString *largeFamily = config.largeTitleFontFamily ?: nil;
     NSNumber *largeSize = config.largeTitleFontSize ?: @34;
-    if (config.largeTitleFontFamily) {
-      largeAttrs[NSFontAttributeName] = [RCTFont updateFont:nil withFamily:config.largeTitleFontFamily size:largeSize weight:nil style:nil variant:nil scaleMultiplier:1.0];
+    NSString *largeWeight = config.largeTitleFontWeight ?: nil;
+    if (largeFamily || largeWeight) {
+      largeAttrs[NSFontAttributeName] = [RCTFont updateFont:nil withFamily:largeFamily size:largeSize weight:largeWeight style:nil variant:nil scaleMultiplier:1.0];
     } else {
       largeAttrs[NSFontAttributeName] = [UIFont systemFontOfSize:[largeSize floatValue] weight:UIFontWeightBold];
     }
@@ -559,6 +567,7 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(title, NSString)
 RCT_EXPORT_VIEW_PROPERTY(titleFontFamily, NSString)
 RCT_EXPORT_VIEW_PROPERTY(titleFontSize, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(titleFontWeight, NSString)
 RCT_EXPORT_VIEW_PROPERTY(titleColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(backTitle, NSString)
 RCT_EXPORT_VIEW_PROPERTY(backTitleFontFamily, NSString)
@@ -570,6 +579,7 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(largeTitle, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(largeTitleFontFamily, NSString)
 RCT_EXPORT_VIEW_PROPERTY(largeTitleFontSize, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(largeTitleFontWeight, NSString)
 RCT_EXPORT_VIEW_PROPERTY(largeTitleColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(largeTitleBackgroundColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(largeTitleHideShadow, BOOL)

diff --git a/native-stack/README.md b/native-stack/README.md
@@ -141,6 +141,7 @@ Style object for header title. Supported properties:
 
 - `fontFamily`
 - `fontSize`
+- `fontWeight` (iOS only).
 - `color`
 
 #### `headerTopInsetEnabled`

diff --git a/src/createNativeStackNavigator.js b/src/createNativeStackNavigator.js
@@ -113,6 +113,8 @@ class StackView extends React.Component {
         headerLargeTitleStyle && headerLargeTitleStyle.fontFamily,
       largeTitleFontSize:
         headerLargeTitleStyle && headerLargeTitleStyle.fontSize,
+      largeTitleFontWeight:
+        headerLargeTitleStyle && headerLargeTitleStyle.fontWeight,
       statusBarAnimation,
       statusBarHidden,
       statusBarStyle,
@@ -121,6 +123,7 @@ class StackView extends React.Component {
         (headerTitleStyle && headerTitleStyle.color) || headerTintColor,
       titleFontFamily: headerTitleStyle && headerTitleStyle.fontFamily,
       titleFontSize: headerTitleStyle && headerTitleStyle.fontSize,
+      titleFontWeight: headerTitleStyle && headerTitleStyle.fontWeight,
       translucent: translucent === undefined ? false : translucent,
     };
 

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -204,6 +204,11 @@ declare module 'react-native-screens' {
      * @description Customize the size of the font to be used for the large title.
      */
     largeTitleFontSize?: number;
+    /**
+     * @host (iOS only)
+     * @description Customize the weight of the font to be used for the large title.
+     */
+    largeTitleFontWeight?: string;
     /**
      * @description Boolean that allows for disabling drop shadow under navigation header when the edge of any scrollable content reaches the matching edge of the navigation bar.
      */
@@ -239,6 +244,11 @@ declare module 'react-native-screens' {
      * @description Customize the size of the font to be used for the title.
      */
     titleFontSize?: number;
+    /**
+     * * @host (iOS only)
+     * @description Customize the weight of the font to be used for the title.
+     */
+    titleFontWeight?: string;
     /**
      * @host (Android only)
      * @description A flag to that lets you opt out of insetting the header. You may want to set this to `false` if you use an opaque status bar. Defaults to `true`.

diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx
@@ -154,6 +154,7 @@ export type NativeStackNavigationOptions = {
   headerLargeTitleStyle?: {
     fontFamily?: string;
     fontSize?: number;
+    fontWeight?: string;
     color?: string;
   };
   /**
@@ -189,11 +190,13 @@ export type NativeStackNavigationOptions = {
    * Style object for header title. Supported properties:
    * - fontFamily
    * - fontSize
+   * - fontWeight (iOS only)
    * - color
    */
   headerTitleStyle?: {
     fontFamily?: string;
     fontSize?: number;
+    fontWeight?: string;
     color?: string;
   };
   /**

diff --git a/src/native-stack/views/HeaderConfig.tsx b/src/native-stack/views/HeaderConfig.tsx
@@ -76,6 +76,7 @@ export default function HeaderConfig({
       largeTitleColor={headerLargeTitleStyle.color}
       largeTitleFontFamily={largeTitleFontFamily}
       largeTitleFontSize={headerLargeTitleStyle.fontSize}
+      largeTitleFontWeight={headerLargeTitleStyle.fontWeight}
       largeTitleHideShadow={headerLargeTitleHideShadow}
       statusBarAnimation={statusBarAnimation}
       statusBarHidden={statusBarHidden}
@@ -96,6 +97,7 @@ export default function HeaderConfig({
       }
       titleFontFamily={titleFontFamily}
       titleFontSize={headerTitleStyle.fontSize}
+      titleFontWeight={headerTitleStyle.fontWeight}
       topInsetEnabled={headerTopInsetEnabled}
       translucent={headerTranslucent === true}>
       {headerRight !== undefined ? (