feat: Add support for SF Symbols with customizable font size and weight as segment values on ios

README.md

@@ -191,11 +191,51 @@ Background color color of the control. (iOS 13+ only)
 
 ### `values`
 
-The labels for the control's segment buttons, in order.
+The labels for the control's segment buttons, in order. Supports strings, image sources (`require()`), and SF Symbol objects (iOS 13+ only).
 
-| Type    | Required |
-| ------- | -------- |
-| (string | number   | Image)[] | No |
+| Type                              | Required |
+| --------------------------------- | -------- |
+| `(string \| number \| SFSymbol)[]` | No       |
+
+#### Using SF Symbols (iOS 13+ only)
+
+You can use [SF Symbols](https://developer.apple.com/sf-symbols/) as segment values by passing an object with a `systemImage` key:
+
+```javascript
+<SegmentedControl
+  values={[
+    {systemImage: 'list.bullet'},
+    {systemImage: 'square.grid.2x2'},
+    {systemImage: 'rectangle.grid.1x2'},
+  ]}
+  selectedIndex={0}
+/>
+```
+
+SF Symbol objects support the following properties:
+
+| Property      | Type     | Default     | Description                                          |
+| ------------- | -------- | ----------- | ---------------------------------------------------- |
+| `systemImage` | string   | *required*  | The SF Symbol name (e.g., `'star.fill'`, `'heart'`)  |
+| `fontSize`    | number   | `19`        | The point size of the symbol                         |
+| `weight`      | string   | `'regular'` | Symbol weight: `'ultraLight'`, `'thin'`, `'light'`, `'regular'`, `'medium'`, `'semibold'`, `'bold'`, `'heavy'`, `'black'` |
+
+You can also mix text and SF Symbols:
+
+```javascript
+<SegmentedControl
+  values={[
+    'All',
+    {systemImage: 'star.fill', fontSize: 16, weight: 'semibold'},
+    {systemImage: 'clock', fontSize: 16},
+  ]}
+  selectedIndex={0}
+/>
+```
+
+> **Note:** SF Symbols are only supported on iOS. On Android and Web, segments with SF Symbol values will render as empty.
+
+---
 
 ### `appearance`
 

example/App.js

@@ -7,7 +7,7 @@
 
 import SegmentedControl from '..';
 import React, {useEffect, useState} from 'react';
-import {ScrollView, StyleSheet, Text, View, useColorScheme} from 'react-native';
+import {ScrollView, StyleSheet, Text, View, Platform, useColorScheme} from 'react-native';
 
 const App = () => {
   const colorScheme = useColorScheme();
@@ -53,6 +53,36 @@ const App = () => {
           ]}
         />
       </View>
+      {Platform.OS === 'ios' && (
+        <View style={styles.segmentContainer}>
+          <Text style={[styles.text, {color: textColor}]}>
+            Segmented controls can have SF Symbols (iOS only)
+          </Text>
+          <SegmentedControl
+            values={[
+              {systemImage: 'list.bullet'},
+              {systemImage: 'square.grid.2x2'},
+              {systemImage: 'rectangle.grid.1x2'},
+            ]}
+            selectedIndex={0}
+          />
+        </View>
+      )}
+      {Platform.OS === 'ios' && (
+        <View style={styles.segmentContainer}>
+          <Text style={[styles.text, {color: textColor}]}>
+            SF Symbols can be mixed with text
+          </Text>
+          <SegmentedControl
+            values={[
+              'All',
+              {systemImage: 'star.fill', fontSize: 16, weight: 'semibold'},
+              {systemImage: 'clock', fontSize: 16},
+            ]}
+            selectedIndex={0}
+          />
+        </View>
+      )}
       <View style={styles.segmentSection}>
         <Text style={[styles.text, {color: textColor}]}>
           Segmented controls can have pre-selected values

index.d.ts

@@ -12,6 +12,41 @@ import {
 
 type Constructor<T> = new (...args: any[]) => T;
 
+export type SFSymbolWeight =
+  | 'ultraLight'
+  | 'thin'
+  | 'light'
+  | 'regular'
+  | 'medium'
+  | 'semibold'
+  | 'bold'
+  | 'heavy'
+  | 'black';
+
+/**
+ * Represents an SF Symbol configuration (iOS 13+ only).
+ * SF Symbols are Apple's built-in icon system providing thousands of
+ * configurable symbols that automatically align with text and adapt to
+ * the system appearance.
+ */
+export type SFSymbol = {
+  /**
+   * The name of the SF Symbol (e.g., 'star.fill', 'heart', 'gear').
+   * See https://developer.apple.com/sf-symbols/ for the full list.
+   */
+  systemImage: string;
+  /**
+   * The point size of the symbol. Default is 19.
+   */
+  fontSize?: number;
+  /**
+   * The weight of the symbol. Default is 'regular'.
+   */
+  weight?: SFSymbolWeight;
+};
+
+export type SegmentValue = string | number | SFSymbol;
+
 export interface NativeSegmentedControlIOSChangeEvent extends TargetedEvent {
   value: string;
   selectedSegmentIndex: number;
@@ -70,7 +105,7 @@ export interface SegmentedControlProps extends ViewProps {
   /**
    * Callback that is called when the user taps a segment; passes the segment's value as an argument
    */
-  onValueChange?: (value: string) => void;
+  onValueChange?: (value: SegmentValue) => void;
 
   /**
    * The index in props.values of the segment to be (pre)selected.
@@ -90,8 +125,9 @@ export interface SegmentedControlProps extends ViewProps {
 
   /**
    * The labels for the control's segment buttons, in order.
+   * Supports strings, image sources (require()), and SF Symbol objects (iOS 13+ only).
    */
-  values?: string[];
+  values?: SegmentValue[];
 
   /**
    * (iOS 13+ only)

ios/RNCSegmentedControl.m

@@ -24,20 +24,80 @@ - (instancetype)initWithFrame:(CGRect)frame {
 }
 
 - (void)setValues:(NSArray *)values {
-	[self removeAllSegments];
-	for (id segment in values) {
-		if ([segment isKindOfClass:[NSMutableDictionary class]]){
-			UIImage *image = [[RCTConvert UIImage:segment] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
-			[self insertSegmentWithImage:image
-								 atIndex:self.numberOfSegments
-								animated:NO];
-		} else {
-			[self insertSegmentWithTitle:(NSString *)segment
-								 atIndex:self.numberOfSegments
-								animated:NO];
-		}
-	}
-	super.selectedSegmentIndex = _selectedIndex;
+  [self removeAllSegments];
+
+  for (id segment in values) {
+    if ([segment isKindOfClass:[NSDictionary class]]) {
+
+      NSDictionary *dict = (NSDictionary *)segment;
+      UIImage *image = nil;
+
+      // 🔹 CASE 1: SF Symbol
+      if (dict[@"systemImage"]) {
+
+#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) &&      \
+    __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0
+        if (@available(iOS 13.0, *)) {
+
+          NSString *systemName = dict[@"systemImage"];
+
+          CGFloat fontSize = dict[@"fontSize"] ? [dict[@"fontSize"] floatValue] : 19.0;
+
+          UIImageSymbolWeight weight = UIImageSymbolWeightRegular;
+
+          if (dict[@"weight"]) {
+            NSString *weightString = dict[@"weight"];
+
+            if ([weightString isEqualToString:@"ultraLight"])
+              weight = UIImageSymbolWeightUltraLight;
+            else if ([weightString isEqualToString:@"thin"])
+              weight = UIImageSymbolWeightThin;
+            else if ([weightString isEqualToString:@"light"])
+              weight = UIImageSymbolWeightLight;
+            else if ([weightString isEqualToString:@"medium"])
+              weight = UIImageSymbolWeightMedium;
+            else if ([weightString isEqualToString:@"semibold"])
+              weight = UIImageSymbolWeightSemibold;
+            else if ([weightString isEqualToString:@"bold"])
+              weight = UIImageSymbolWeightBold;
+            else if ([weightString isEqualToString:@"heavy"])
+              weight = UIImageSymbolWeightHeavy;
+            else if ([weightString isEqualToString:@"black"])
+              weight = UIImageSymbolWeightBlack;
+          }
+
+          UIImageSymbolConfiguration *config =
+            [UIImageSymbolConfiguration configurationWithPointSize:fontSize
+                                                            weight:weight];
+
+          image = [[UIImage systemImageNamed:systemName]
+                     imageByApplyingSymbolConfiguration:config];
+
+          image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+        }
+#endif
+      }
+      else {
+        image = [[RCTConvert UIImage:segment]
+                   imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
+      }
+
+      if (image) {
+        [self insertSegmentWithImage:image
+                             atIndex:self.numberOfSegments
+                            animated:NO];
+      }
+    }
+
+    else if ([segment isKindOfClass:[NSString class]]) {
+
+      [self insertSegmentWithTitle:(NSString *)segment
+                           atIndex:self.numberOfSegments
+                          animated:NO];
+    }
+  }
+
+  super.selectedSegmentIndex = _selectedIndex;
 }
 
 - (void)setSelectedIndex:(NSInteger)selectedIndex {

js/SegmentedControl.ios.js

@@ -84,9 +84,17 @@ class SegmentedControlIOS extends React.Component<Props> {
               }
             : undefined
         }
-        values={values.map((val) =>
-          typeof val === 'string' ? val : Image.resolveAssetSource(val),
-        )}
+        values={values.map((val) => {
+          if (typeof val === 'string') {
+            return val;
+          }
+          // SF Symbol objects have a systemImage key — pass through as-is
+          if (typeof val === 'object' && val !== null && val.systemImage) {
+            return val;
+          }
+          // Image sources (require() numbers or objects) need resolution
+          return Image.resolveAssetSource(val);
+        })}
         {...props}
         ref={forwardedRef}
         style={[styles.segmentedControl, this.props.style]}

js/SegmentedControlTab.js

@@ -16,10 +16,10 @@ import {
   Platform,
 } from 'react-native';
 
-import type {FontStyle, ViewStyle} from './types';
+import type {FontStyle, ViewStyle, SFSymbol} from './types';
 
 type Props = $ReadOnly<{|
-  value: string | number | Object,
+  value: string | number | SFSymbol,
   tintColor?: ?string,
   onSelect: () => void,
   selected: boolean,
@@ -103,7 +103,10 @@ export const SegmentedControlTab = ({
         ios: typeof value === 'string' ? value : testID,
       })}>
       <View style={styles.default}>
-        {typeof value === 'number' || typeof value === 'object' ? (
+        {typeof value === 'object' && value !== null && value.systemImage ? (
+          // SF Symbols are iOS-only; on Android/Web render nothing
+          null
+        ) : typeof value === 'number' || typeof value === 'object' ? (
           <Image source={value} style={styles.segmentImage} />
         ) : isBase64(value) ? (
           <Image source={{uri: value}} style={styles.segmentImage} />

js/types.js

@@ -16,6 +16,37 @@ export type Event = SyntheticEvent<
 
 export type ViewStyle = ViewStyleProp;
 
+export type SFSymbolWeight =
+  | 'ultraLight'
+  | 'thin'
+  | 'light'
+  | 'regular'
+  | 'medium'
+  | 'semibold'
+  | 'bold'
+  | 'heavy'
+  | 'black';
+
+/**
+ * Represents an SF Symbol configuration (iOS 13+ only).
+ */
+export type SFSymbol = $ReadOnly<{|
+  /**
+   * The name of the SF Symbol (e.g., 'star.fill', 'heart', 'gear').
+   */
+  systemImage: string,
+  /**
+   * The point size of the symbol. Default is 19.
+   */
+  fontSize?: number,
+  /**
+   * The weight of the symbol. Default is 'regular'.
+   */
+  weight?: SFSymbolWeight,
+|}>;
+
+export type SegmentValue = string | number | SFSymbol;
+
 export type FontStyle = $ReadOnly<{|
   /**
    * Font Color of Segmented Control
@@ -51,7 +82,7 @@ export type SegmentedControlProps = $ReadOnly<{|
   /**
    * The labels for the control's segment buttons, in order.
    */
-  values: $ReadOnlyArray<string | number | Object>,
+  values: $ReadOnlyArray<SegmentValue>,
   /**
    * The index in `props.values` of the segment to be (pre)selected.
    */
@@ -60,7 +91,7 @@ export type SegmentedControlProps = $ReadOnly<{|
    * Callback that is called when the user taps a segment;
    * passes the segment's value as an argument
    */
-  onValueChange?: ?(value: string | number | Object) => mixed,
+  onValueChange?: ?(value: SegmentValue) => mixed,
   /**
    * Callback that is called when the user taps a segment;
    * passes the event as an argument