[ui][ios] Add variable color support to Image component (expo#39852)

Author: morellodev

apps/native-component-list/src/screens/UI/ImageScreen.ios.tsx

@@ -0,0 +1,56 @@
+import { Host, HStack, Image, Slider, VStack } from '@expo/ui/swift-ui';
+import * as React from 'react';
+import { useState } from 'react';
+
+import { ScrollPage, Section } from '../../components/Page';
+
+export default function ImageScreen() {
+  const [variableValue, setVariableValue] = useState(0.5);
+
+  return (
+    <ScrollPage>
+      <Section title="Basic SF Symbols">
+        <Host matchContents>
+          <HStack spacing={16}>
+            <Image systemName="heart" size={32} />
+            <Image systemName="star" size={32} />
+            <Image systemName="folder" size={32} />
+            <Image systemName="gear" size={32} />
+          </HStack>
+        </Host>
+      </Section>
+
+      <Section title="Tinted SF Symbols">
+        <Host matchContents>
+          <HStack spacing={16}>
+            <Image systemName="heart" size={32} color="red" />
+            <Image systemName="star" size={32} color="blue" />
+            <Image systemName="folder" size={32} color="green" />
+            <Image systemName="gear" size={32} color="yellow" />
+          </HStack>
+        </Host>
+      </Section>
+
+      <Section title="Variable Color">
+        <Host matchContents>
+          <VStack alignment="center" spacing={8}>
+            <HStack spacing={8}>
+              <Image systemName="cellularbars" size={32} variableValue={variableValue} />
+              <Image systemName="wifi" size={32} variableValue={variableValue} />
+              <Image
+                systemName="antenna.radiowaves.left.and.right"
+                size={32}
+                variableValue={variableValue}
+              />
+            </HStack>
+            <Slider min={0} max={1} value={variableValue} onValueChange={setVariableValue} />
+          </VStack>
+        </Host>
+      </Section>
+    </ScrollPage>
+  );
+}
+
+ImageScreen.navigationOptions = {
+  title: 'Image (SwiftUI)',
+};

apps/native-component-list/src/screens/UI/UIScreen.ios.tsx

@@ -170,6 +170,14 @@ export const UIScreens = [
       return optionalRequire(() => require('./ShapesScreen'));
     },
   },
+  {
+    name: 'Image component',
+    route: 'ui/image',
+    options: {},
+    getComponent() {
+      return optionalRequire(() => require('./ImageScreen'));
+    },
+  },
 ];
 
 export default function UIScreen() {

packages/expo-ui/CHANGELOG.md

@@ -6,6 +6,7 @@
 
 ### 🎉 New features
 
+- [iOS] Add `variableValue` prop to Image component for SF Symbols with variable color support ([#39852](https://github.com/expo/expo/pull/39852) by [@morellodev](https://github.com/morellodev))
 - [iOS] Adds `Rectangle`, `RoundedRectangle`, `UnevenRoundedRectangle`, `Circle`, `Ellipse`, `Capsule` shape components and `fill` modifier ([#39793](https://github.com/expo/expo/pull/39793) by [@nishan](https://github.com/intergalacticspacehighway))
 - [iOS] Add `ignoreSafeArea` modifier ([#39804](https://github.com/expo/expo/pull/39804) by [@nishan](https://github.com/intergalacticspacehighway))
 - [iOS] Add SF symbol typings ([#39802](https://github.com/expo/expo/pull/39802) by [@nishan](https://github.com/intergalacticspacehighway))

packages/expo-ui/build/swift-ui/Image/index.d.ts

@@ -13,6 +13,7 @@ internal final class ImageViewProps: ExpoSwiftUI.ViewProps, CommonViewModifierPr
   @Field var systemName: String = ""
   @Field var size: Double?
   @Field var color: Color?
+  @Field var variableValue: Double?
   @Field var useTapGesture: Bool?
   var onTap = EventDispatcher()
 }
@@ -21,7 +22,16 @@ internal struct ImageView: ExpoSwiftUI.View {
   @ObservedObject var props: ImageViewProps
 
   var body: some View {
-    Image(systemName: props.systemName)
+    let image: Image
+
+    if #available(iOS 16.0, tvOS 16.0, *) {
+      image = Image(systemName: props.systemName, variableValue: props.variableValue)
+    } else {
+      image = Image(systemName: props.systemName)
+    }
+
+    return
+      image
       .font(.system(size: CGFloat(props.size ?? 24)))
       .foregroundColor(props.color)
       .modifier(CommonViewModifiers(props: props))

packages/expo-ui/build/swift-ui/Image/index.d.ts.map

@@ -20,6 +20,14 @@ export interface ImageProps extends CommonViewModifierProps {
    * Can be a color name like '#ff00ff', 'red', 'blue', etc.
    */
   color?: string;
+  /**
+   * The variable value for SF Symbols with variable color support.
+   * Can be a number between 0.0 and 1.0.
+   * Only works with SF Symbols that support variable color.
+   *
+   * Requires iOS 16.0+.
+   */
+  variableValue?: number;
 
   /**
    * Callback triggered when the view is pressed.