feat(Image): add support for local image

Author: mgcrea

example/src/assets/logo.png

@@ -1,6 +1,12 @@
 import {SwiftUI} from '@mgcrea/react-native-swiftui/src';
 import {useState, type FunctionComponent} from 'react';
-import {View} from 'react-native';
+import {Image, View} from 'react-native';
+import logoImage from '../assets/logo.png';
+
+console.log({
+  logoImage,
+  resolvedLogoImage: Image.resolveAssetSource(logoImage),
+});
 
 export const FullFormExample: FunctionComponent = () => {
   return (
@@ -166,20 +172,31 @@ const RectangleSection: FunctionComponent = () => {
 };
 
 const ImageSection: FunctionComponent = () => {
-  const [color, setColor] = useState('blue');
+  const [icon, setIcon] = useState('iphone');
 
   return (
-    <SwiftUI.Section header="Rectangle Example">
-      <SwiftUI.Image
-        name="star.fill"
-        isSystemImage={true}
-        tintColor="#FF0000"
-        style={{width: 50, height: 50}}
-      />
-
+    <SwiftUI.Section header="Image Example">
+      <SwiftUI.HStack>
+        <SwiftUI.Image
+          source={logoImage}
+          resizeMode="contain"
+          style={{
+            width: 128,
+            height: 128,
+            borderWidth: 1,
+            borderColor: 'blue',
+            borderRadius: 64,
+          }}
+        />
+        <SwiftUI.Image
+          name={`system:${icon}`}
+          // tintColor="#FF0000"
+          style={{width: 128, height: 128, fontSize: 64, color: 'blue'}}
+        />
+      </SwiftUI.HStack>
       <SwiftUI.Button
-        title={`Change flag to ${color === 'blue' ? 'Italy' : 'France'}`}
-        onPress={() => setColor(color === 'blue' ? 'green' : 'blue')}
+        title={`Change icon to ${icon === 'iphone' ? 'ipad' : 'iphone'}`}
+        onPress={() => setIcon(icon === 'iphone' ? 'ipad' : 'iphone')}
       />
     </SwiftUI.Section>
   );

example/src/views/FullFormExample.tsx

@@ -1,8 +1,8 @@
 import SwiftUI
 
 public final class ImageProps: ObservableObject, Decodable {
-  @Published var name: String = ""
-  @Published var isSystemImage: Bool = false
+  @Published var name: String?
+  @Published var sourceUri: String?
   @Published var resizeMode: ImageResizeMode
   @Published var tintColor: String?
   @Published var style: StyleProps?
@@ -32,21 +32,21 @@ public final class ImageProps: ObservableObject, Decodable {
   }
 
   enum CodingKeys: String, CodingKey {
-    case name, isSystemImage, resizeMode, tintColor, style
+    case name, sourceUri, isSystemImage, resizeMode, tintColor, style
   }
 
   public required init(from decoder: Decoder) throws {
     let container = try decoder.container(keyedBy: CodingKeys.self)
-    name = try container.decode(String.self, forKey: .name)
-    isSystemImage = try container.decodeIfPresent(Bool.self, forKey: .isSystemImage) ?? false
+    name = try container.decodeIfPresent(String.self, forKey: .name)
+    sourceUri = try container.decodeIfPresent(String.self, forKey: .sourceUri)
     resizeMode = try ImageResizeMode(rawValue: container.decodeIfPresent(String.self, forKey: .resizeMode) ?? "") ?? .default
     tintColor = try container.decodeIfPresent(String.self, forKey: .tintColor)
     style = try container.decodeIfPresent(StyleProps.self, forKey: .style)
   }
 
   public func merge(from other: ImageProps) {
     name = other.name
-    isSystemImage = other.isSystemImage
+    sourceUri = other.sourceUri
     resizeMode = other.resizeMode
     tintColor = other.tintColor
     style = other.style

ios/components/Image/ImageProps.swift

@@ -4,8 +4,24 @@ public struct ImageView: View {
   @ObservedObject public var props: ImageProps
 
   public var body: some View {
-    let baseImage = props.isSystemImage ? Image(systemName: props.name) : Image(props.name)
+    let image: Image
+    if let sourceUri = props.sourceUri, // Check for URI-based image first
+       let url = URL(string: sourceUri),
+       let data = try? Data(contentsOf: url),
+       let uiImage = UIImage(data: data)
+    {
+      image = Image(uiImage: uiImage) // Load from URI
+    } else if let name = props.name { // Fall back to named image
+      if name.hasPrefix("system:") {
+        let systemName = String(name.dropFirst("system:".count))
+        image = Image(systemName: systemName) // Load system image
+      } else {
+        image = Image(name) // Load named asset
+      }
+    } else {
+      return AnyView(Text("No image source provided")) // Fallback if neither is set
+    }
     // let tintedImage = props.tintColor != nil ? image.foregroundColor(Color(hex: props.tintColor!)) : image
-    return props.resizeMode.applyResizeMode(baseImage).foregroundStyle(Color.red).applyStyles(props.style)
+    return AnyView(props.resizeMode.applyResizeMode(image).applyStyles(props.style))
   }
 }

ios/components/Image/ImageView.swift

@@ -34,15 +34,16 @@ extension View {
   }
 
   private func applyTextStyles(_ style: StyleProps) -> some View {
-    return applyIf(style.fontWeight != nil) { view in
+    return applyIf(style.color != nil) { $0.foregroundStyle(style.color!) }
+    .applyIf(style.font != nil) { $0.font(style.font!) }
+    .applyIf(style.fontSize != nil) { $0.font(.system(size: style.fontSize!)) }
+    .applyIf(style.fontWeight != nil) { view in
       if #available(iOS 16.0, *) {
         return AnyView(view.fontWeight(style.fontWeight!))
       } else {
         return AnyView(view)
       }
     }
-    .applyIf(style.font != nil) { $0.font(style.font!) }
-    .applyIf(style.fontSize != nil) { $0.font(.system(size: style.fontSize!)) }
   }
 
   @ViewBuilder

ios/extensions/View+Styling.swift

@@ -1,16 +1,18 @@
+import { Image as BaseImage, type ImageSourcePropType } from "react-native";
 import { useSwiftUINode } from "../hooks";
-import type { FunctionComponentWithId, NativeViewStyle } from "../types";
+import type { FunctionComponentWithId, NativeTextStyle } from "../types";
 
 export type NativeImageProps = {
-  name: string;
-  isSystemImage?: boolean;
+  name?: string;
+  source?: ImageSourcePropType;
   resizeMode?: "cover" | "contain" | "stretch" | "center";
   tintColor?: string;
-  style?: NativeViewStyle;
+  style?: NativeTextStyle;
 };
 
-export const Image: FunctionComponentWithId<NativeImageProps> = ({ ...props }) => {
-  useSwiftUINode("Image", props);
+export const Image: FunctionComponentWithId<NativeImageProps> = ({ source, ...props }) => {
+  const sourceUri = source ? BaseImage.resolveAssetSource(source).uri : undefined;
+  useSwiftUINode("Image", { sourceUri, ...props });
   return null;
 };