feat: Add Custom Font Weight Styling

README.md

@@ -202,6 +202,7 @@ An object container
 - `color`: color of segment text
 - `fontSize`: font-size of segment text
 - `fontFamily`: font-family of segment text
+- `fontWeight`: font-weight of segment text
 
 ### `activeFontStyle`
 
@@ -213,6 +214,7 @@ An object container
 - `color`: overrides color of selected segment text
 - `fontSize`: overrides font-size of selected segment text
 - `fontFamily`: overrides font-family of selected segment text
+- `fontWeight`: overrides font-weight of selected segment text
 
 ## Maintainers
 

js/SegmentedControlTab.js

@@ -45,12 +45,13 @@ export const SegmentedControlTab = ({
 }: Props): React.Node => {
   const colorSchemeHook = useColorScheme();
   const colorScheme = appearance || colorSchemeHook;
-  const {color: textColor, fontSize, fontFamily} = fontStyle;
+  const {color: textColor, fontSize, fontFamily, fontWeight} = fontStyle;
 
   const {
     color: activeColor,
     fontSize: activeFontSize,
     fontFamily: activeFontFamily,
+    fontWeight: activeFontWeight,
   } = activeFontStyle;
 
   const getColor = () => {
@@ -69,12 +70,14 @@ export const SegmentedControlTab = ({
     fontFamily: activeFontFamily || fontFamily,
     fontSize: activeFontSize || fontSize,
     color: activeColor || color,
+    fontWeight: activeFontWeight || fontWeight || styles.activeText.fontWeight,
   };
 
   const idleStyle = {
     color,
     fontSize: fontSize,
     fontFamily: fontFamily,
+    fontWeight: fontWeight,
   };
 
   return (

js/types.js

@@ -26,6 +26,21 @@ export type FontStyle = $ReadOnly<{|
    * Font Family of the Segmented Control
    */
   fontFamily?: string,
+  /**
+   * Font Weight of the Segmented Control
+   */
+  fontWeight?:
+    | 'normal'
+    | 'bold'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900',
 |}>;
 
 export type SegmentedControlProps = $ReadOnly<{|