Merge branch 'main' into support-images-from-media-library

Author: bglgwyng

android/src/main/java/com/margelo/nitro/image/HybridImageView.kt

@@ -5,6 +5,19 @@ import android.view.View
 import android.widget.ImageView
 
 class HybridImageView(context: Context): HybridNitroImageViewSpec() {
+    override var resizeMode: ResizeMode? = ResizeMode.CONTAIN
+        set(value) {
+            field = value
+            imageView.scaleType = when (value) {
+                ResizeMode.COVER -> ImageView.ScaleType.CENTER_CROP
+                ResizeMode.CONTAIN -> ImageView.ScaleType.FIT_CENTER
+                ResizeMode.STRETCH -> ImageView.ScaleType.FIT_XY
+                ResizeMode.CENTER -> ImageView.ScaleType.CENTER
+                null -> ImageView.ScaleType.FIT_CENTER
+            }
+            updateImage()
+        }
+
     override var image: HybridImageSpec? = null
         set(value) {
             field = value

example/ios/Podfile.lock

@@ -47,7 +47,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SDWebImage
     - Yoga
-  - NitroModules (0.26.3):
+  - NitroModules (0.26.4):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1890,7 +1890,7 @@ DEPENDENCIES:
   - glog (from `../../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - hermes-engine (from `../../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
   - NitroImage (from `../node_modules/react-native-nitro-image`)
-  - NitroModules (from `../../node_modules/react-native-nitro-modules`)
+  - NitroModules (from `../node_modules/react-native-nitro-modules`)
   - RCT-Folly (from `../../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
   - RCT-Folly/Fabric (from `../../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
   - RCTDeprecation (from `../../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation`)
@@ -1988,7 +1988,7 @@ EXTERNAL SOURCES:
   NitroImage:
     :path: "../node_modules/react-native-nitro-image"
   NitroModules:
-    :path: "../../node_modules/react-native-nitro-modules"
+    :path: "../node_modules/react-native-nitro-modules"
   RCT-Folly:
     :podspec: "../../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
   RCTDeprecation:
@@ -2134,7 +2134,7 @@ SPEC CHECKSUMS:
   hermes-engine: 94ed01537bdeccaab1adbf94b040d115d6fa1a7f
   libwebp: 02b23773aedb6ff1fd38cec7a77b81414c6842a8
   NitroImage: 7f0a8fda3268c7169c9f4f23437d5841cbf4c96a
-  NitroModules: f36b94e48ff1705fc6b84bc1953f40e2da4196c2
+  NitroModules: 763fe03c46a734a615e648ff2c77158cd26d8f89
   RCT-Folly: e78785aa9ba2ed998ea4151e314036f6c49e6d82
   RCTDeprecation: c3e3f5b4ea83e7ff3bc86ce09e2a54b7affd687d
   RCTRequired: ee438439880dffc9425930d1dd1a3c883ee6879c

example/package.json

@@ -5,7 +5,7 @@
     "scripts": {
         "android": "react-native run-android",
         "ios": "react-native run-ios",
-        "lint": "biome check . --fix",
+        "lint": "biome check .",
         "start": "react-native start --client-logs",
         "pods": "bundle install && cd ios && bundle exec pod install"
     },
@@ -37,4 +37,4 @@
     "engines": {
         "node": ">=18"
     }
-}
+}

example/src/NitroImageTab.tsx

@@ -1,14 +1,8 @@
-import React, { useMemo } from "react";
-import { FlatList, StyleSheet, Text, View } from "react-native";
-import { NitroImage, useWebImage } from "react-native-nitro-image";
+import { useMemo } from "react";
+import { FlatList, Text, View } from "react-native";
+import { NitroWebImage } from "react-native-nitro-image";
 import { createImageURLs } from "./createImageURLs";
 
-function AsyncImageImpl({ url }: { url: string }): React.ReactNode {
-    const image = useWebImage(url);
-    return <NitroImage style={styles.image} image={image} />;
-}
-const AsyncImage = React.memo(AsyncImageImpl);
-
 export function NitroImageTab() {
     const imageURLs = useMemo(() => createImageURLs(), []);
 
@@ -19,15 +13,10 @@ export function NitroImageTab() {
                 numColumns={4}
                 windowSize={3}
                 data={imageURLs}
-                renderItem={({ item: url }) => <AsyncImage url={url} />}
+                renderItem={({ item: url }) => (
+                    <NitroWebImage url={url} resizeMode="cover" />
+                )}
             />
         </View>
     );
 }
-
-const styles = StyleSheet.create({
-    image: {
-        width: "25%",
-        aspectRatio: 1,
-    },
-});

ios/HybridImageView.swift

@@ -12,6 +12,24 @@ class HybridImageView: HybridNitroImageViewSpec {
   let imageView = UIImageView(image: nil)
   var view: UIView { imageView }
 
+  var resizeMode: ResizeMode? {
+    didSet {
+      let mode = resizeMode ?? .contain
+      switch mode {
+        case .cover:
+            imageView.contentMode = .scaleAspectFill
+            imageView.clipsToBounds = true
+        case .contain:
+            imageView.contentMode = .scaleAspectFit
+        case .stretch:
+            imageView.contentMode = .scaleToFill
+        case .center:
+            imageView.contentMode = .center
+      }
+      updateImage()
+    }
+  }
+  
   var image: (any HybridImageSpec)? {
     didSet {
       updateImage()
@@ -23,7 +41,6 @@ class HybridImageView: HybridNitroImageViewSpec {
     print("Updating ImageView's image...")
 
     print("Frame: \(imageView.frame)")
-    imageView.contentMode = .scaleAspectFit
     imageView.image = hybridImage.uiImage
   }
 }