feat(components): initial Image implementation

Author: mgcrea

example/src/views/FullFormExample.tsx

@@ -8,6 +8,7 @@ export const FullFormExample: FunctionComponent = () => {
       <SwiftUI style={{flex: 1}}>
         <SwiftUI.Text text="FullFormExample" />
         <SwiftUI.Form>
+          <ImageSection />
           <RectangleSection />
           <TextFieldSection />
           <PickerSection />
@@ -163,3 +164,23 @@ const RectangleSection: FunctionComponent = () => {
     </SwiftUI.Section>
   );
 };
+
+const ImageSection: FunctionComponent = () => {
+  const [color, setColor] = useState('blue');
+
+  return (
+    <SwiftUI.Section header="Rectangle Example">
+      <SwiftUI.Image
+        name="star.fill"
+        isSystemImage={true}
+        tintColor="#FF0000"
+        style={{width: 50, height: 50}}
+      />
+
+      <SwiftUI.Button
+        title={`Change flag to ${color === 'blue' ? 'Italy' : 'France'}`}
+        onPress={() => setColor(color === 'blue' ? 'green' : 'blue')}
+      />
+    </SwiftUI.Section>
+  );
+};

ios/SwiftUINode.swift

@@ -88,12 +88,14 @@ private struct NodeWrapper: Decodable {
       node = try GenericNode<RectangleProps>(from: decoder)
     case "Spacer":
       node = try GenericNode<SpacerProps>(from: decoder)
+    case "Image":
+      node = try GenericNode<ImageProps>(from: decoder)
     default:
       throw DecodingError.typeMismatch(
         (any SwiftUINode).self,
         DecodingError.Context(
           codingPath: container.codingPath,
-          debugDescription: "Unknown type: \(type)"
+          debugDescription: "Unknown node type: \(type)"
         )
       )
     }

ios/SwiftUIRootView.swift

@@ -186,6 +186,8 @@ public class SwiftUIRootView: SwiftUIContainerView {
       AnyView(RectangleView(props: rectangle.props))
     case let spacer as GenericNode<SpacerProps>:
       AnyView(SpacerView(props: spacer.props))
+    case let image as GenericNode<ImageProps>:
+      AnyView(ImageView(props: image.props))
     default:
       AnyView(EmptyView())
     }
@@ -260,11 +262,15 @@ public class SwiftUIRootView: SwiftUIContainerView {
       case let sheet as GenericNode<SheetProps>:
         let updatedProps = try decoder.decode(SheetProps.self, from: updatedPropsData)
         sheet.props.merge(from: updatedProps)
-        
+
       case let rectangle as GenericNode<RectangleProps>:
         let updatedProps = try decoder.decode(RectangleProps.self, from: updatedPropsData)
         rectangle.props.merge(from: updatedProps)
 
+      case let image as GenericNode<ImageProps>:
+        let updatedProps = try decoder.decode(ImageProps.self, from: updatedPropsData)
+        image.props.merge(from: updatedProps)
+
       default:
         print("Unsupported node type for updateChildProps: \(type(of: node))")
       }

ios/components/Image/ImageProps.swift

@@ -0,0 +1,54 @@
+import SwiftUI
+
+public final class ImageProps: ObservableObject, Decodable {
+  @Published var name: String = ""
+  @Published var isSystemImage: Bool = false
+  @Published var resizeMode: ImageResizeMode
+  @Published var tintColor: String?
+  @Published var style: StyleProps?
+
+  enum ImageResizeMode: String, CaseIterable {
+    case `default`
+    case cover
+    case contain
+    case stretch
+    case center
+
+    @ViewBuilder
+    func applyResizeMode(_ image: Image) -> some View {
+      switch self {
+      case .cover:
+        image.resizable().scaledToFill()
+      case .contain:
+        image.resizable().scaledToFit()
+      case .stretch:
+        image.resizable()
+      case .center:
+        image
+      case .default:
+        image
+      }
+    }
+  }
+
+  enum CodingKeys: String, CodingKey {
+    case name, 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
+    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
+    resizeMode = other.resizeMode
+    tintColor = other.tintColor
+    style = other.style
+  }
+}

ios/components/Image/ImageView.swift

@@ -0,0 +1,11 @@
+import SwiftUI
+
+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 tintedImage = props.tintColor != nil ? image.foregroundColor(Color(hex: props.tintColor!)) : image
+    return props.resizeMode.applyResizeMode(baseImage).foregroundStyle(Color.red).applyStyles(props.style)
+  }
+}

src/SwiftUI.tsx

@@ -6,6 +6,7 @@ import {
   Form,
   Group,
   HStack,
+  Image,
   Picker,
   Rectangle,
   Section,
@@ -95,3 +96,4 @@ SwiftUI.ZStack = ZStack;
 SwiftUI.Sheet = Sheet;
 SwiftUI.Rectangle = Rectangle;
 SwiftUI.Spacer = Spacer;
+SwiftUI.Image = Image;

src/components/Image.tsx

@@ -0,0 +1,17 @@
+import { useSwiftUINode } from "../hooks";
+import type { FunctionComponentWithId, NativeViewStyle } from "../types";
+
+export type NativeImageProps = {
+  name: string;
+  isSystemImage?: boolean;
+  resizeMode?: "cover" | "contain" | "stretch" | "center";
+  tintColor?: string;
+  style?: NativeViewStyle;
+};
+
+export const Image: FunctionComponentWithId<NativeImageProps> = ({ ...props }) => {
+  useSwiftUINode("Image", props);
+  return null;
+};
+
+Image.displayName = "Image";

src/components/index.ts

@@ -3,6 +3,7 @@ export * from "./DatePicker";
 export * from "./Form";
 export * from "./Group";
 export * from "./HStack";
+export * from "./Image";
 export * from "./Picker";
 export * from "./Rectangle";
 export * from "./Section";