Allow the fontweight for the title to be customized

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`
+
+Customize the weight of the font to be used for the title.
+
 #### `titleColor`
 
 Allows for setting text color of the title.

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 />;
-};
+  return <Test706 />;
+}

TestsExample/ios/Podfile.lock

@@ -514,4 +514,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 123196e881422a7a7f3a9c228d6113e8de498360
 
-COCOAPODS: 1.9.3
+COCOAPODS: 1.10.0

TestsExample/src/Test706.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import {Button, Text, View} from 'react-native';
+import {NavigationContainer} from '@react-navigation/native';
+import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+
+function HomeScreen({navigation}) {
+  return (
+    <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>
+  );
+}
+
+function DetailsScreen() {
+  return (
+    <View>
+      <Text>Details screen with a 'light' title</Text>
+    </View>
+  );
+}
+
+const RootStack = createNativeStackNavigator();
+
+function RootStackScreen() {
+  return (
+    <RootStack.Navigator
+      screenOptions={{
+        headerTitleStyle: {fontWeight: '900'},
+      }}>
+      <RootStack.Screen name="Home" component={HomeScreen} />
+      <RootStack.Screen
+        name="Details"
+        component={DetailsScreen}
+        options={{headerTitleStyle: {fontWeight: '100'}}}
+      />
+    </RootStack.Navigator>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <RootStackScreen />
+    </NavigationContainer>
+  );
+}

createNativeStackNavigator/README.md

@@ -100,6 +100,7 @@ Style object for header title. Supported properties:
 
 - `fontFamily`
 - `fontSize`
+- `fontWeight`
 - `color`
 
 #### `headerTopInsetEnabled`

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;

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 (config.titleFontFamily || config.titleFontWeight) {
+        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]];
       }
@@ -291,16 +293,18 @@ + (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 (config.titleFontFamily || config.titleFontWeight) {
+      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]];
     }
@@ -559,6 +563,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)

native-stack/README.md

@@ -141,6 +141,7 @@ Style object for header title. Supported properties:
 
 - `fontFamily`
 - `fontSize`
+- `fontWeight`
 - `color`
 
 #### `headerTopInsetEnabled`

src/createNativeStackNavigator.js

@@ -121,6 +121,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,
     };
 

src/index.d.ts

@@ -239,6 +239,10 @@ declare module 'react-native-screens' {
      * @description Customize the size of the font to be used for the title.
      */
     titleFontSize?: number;
+    /**
+     * @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`.

src/native-stack/types.tsx

@@ -194,6 +194,7 @@ export type NativeStackNavigationOptions = {
   headerTitleStyle?: {
     fontFamily?: string;
     fontSize?: number;
+    fontWeight?: string;
     color?: string;
   };
   /**

src/native-stack/views/HeaderConfig.tsx

@@ -96,6 +96,7 @@ export default function HeaderConfig({
       }
       titleFontFamily={titleFontFamily}
       titleFontSize={headerTitleStyle.fontSize}
+      titleFontWeight={headerTitleStyle.fontWeight}
       topInsetEnabled={headerTopInsetEnabled}
       translucent={headerTranslucent === true}>
       {headerRight !== undefined ? (