react-native-nitro-image-pipeline 1.1.0 → 1.2.1

package/README.md

@@ -10,7 +10,7 @@ A high-performance image loading, caching, and processing library for React Nati
 
 - Load remote images with built-in memory and disk caching
 - Prefetch single or multiple images in the background
-- Apply Gaussian blur and rounded corners (uniform or per-corner) at load time
+- Resize (aspect-fill, center-crop) and apply Gaussian blur and rounded corners (uniform or per-corner) at load time
 - Apply Gaussian blur to already-loaded images
 - Clear the image cache on demand
 - `useImage` hook for declarative image loading in components
@@ -38,36 +38,80 @@ bun add react-native-nitro-image-pipeline react-native-nitro-modules react-nativ
 
 ## Usage
 
+### `<PipelineImage>` component
+
+The zero-math way to load an image in a component — no manual `PixelRatio` conversions:
+
+```tsx
+import { PipelineImage } from 'react-native-nitro-image-pipeline';
+
+function MyComponent() {
+  return (
+    <PipelineImage
+      url="https://example.com/photo.jpg"
+      style={styles.photo} // bitmap is sized to this layout × PixelRatio.get()
+      blur={2} // points, like style
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  photo: { width: 300, height: 200, borderRadius: 12 }, // baked into the bitmap
+});
+```
+
+Numeric `width`/`height` in `style` load immediately; percentage or flex-based sizes wait for the
+first `onLayout` before fetching, so the full-size image is never requested just to be squeezed
+into a small view. `blur` is in points **on this component only** — it's converted to bitmap
+pixels internally, unlike the pixel-based values used everywhere else in this library.
+`cornerRadius` works the same way, but if you don't pass it, it's derived instead from `style`'s
+`borderRadius` (or the per-corner `borderTopLeftRadius`/etc. properties, e.g. a "ticket" shape) —
+so a style that already rounds the view rounds the bitmap too, with no separate prop. Pass
+`cornerRadius` explicitly to override that. `onLoad`/`onError` callbacks are supported, and every
+other prop (`resizeMode`, `recyclingKey`, `testID`, …) is passed straight through to
+`NativeNitroImage`.
+
 ### `useImage` hook
 
 The simplest way to load an image in a component:
 
 ```tsx
-import { useImage } from 'react-native-nitro-image-pipeline';
+import { PixelRatio, useImage, resizeForStyle } from 'react-native-nitro-image-pipeline';
 
 function MyComponent() {
   const { image, error } = useImage({
     url: 'https://example.com/photo.jpg',
-    blur: 4, // Gaussian sigma in source pixels — same result on iOS and Android
-    cornerRadius: 12,
+    blur: 4, // Gaussian sigma in bitmap pixels — same result on iOS and Android
+    // Resize to the size you display (points × screen scale) so the corner
+    // radii apply 1:1 to what you see instead of the full-resolution source.
+    resize: resizeForStyle(styles.image), // display size × PixelRatio.get()
+    cornerRadius: 12 * PixelRatio.get(), // bitmap pixels
   });
 
   if (error) return <Text>Failed to load image</Text>;
   if (!image) return <ActivityIndicator />;
 
   // use `image` with react-native-nitro-image
-  return <NitroImage source={image} />;
+  return <NitroImage image={image} style={styles.image} />;
 }
+
+const styles = StyleSheet.create({ image: { width: 300, height: 200 } });
 ```
 
+Pass `enabled: false` to defer the request — used internally by `<PipelineImage>` to wait for
+layout before it has a size to resize to.
+
 ### Direct API
 
 ```ts
 import { NitroImagePipeline } from 'react-native-nitro-image-pipeline';
 
-// Load an image with options
+// Load an image with options. resize and cornerRadius are in pixels of the
+// produced bitmap: without resize, the radius applies to the full-resolution
+// source and shrinks along with it when displayed small.
 const image = await NitroImagePipeline.loadImage('https://example.com/photo.jpg', {
-  blur: 4, // Gaussian sigma in source pixels — see "Blur units"
+  blur: 4, // Gaussian sigma in bitmap pixels — see "Blur units"
+  resize: { width: 600, height: 400 }, // aspect-fill + center-crop, exact output size
   cornerRadius: 12,
   cache: 'disk',
 });
@@ -75,6 +119,7 @@ const image = await NitroImagePipeline.loadImage('https://example.com/photo.jpg'
 // Per-corner radii — e.g. a "ticket" shape with larger bottom corners.
 // The rounding is baked into the bitmap, so no view-layer masking is needed.
 const ticket = await NitroImagePipeline.loadImage('https://example.com/photo.jpg', {
+  resize: { width: 600, height: 400 },
   cornerRadius: { topLeft: 24, topRight: 24, bottomLeft: 48, bottomRight: 48 },
 });
 
@@ -103,8 +148,39 @@ Loads an image from a URL and returns a `Promise<Image>`.
 | Option | Type | Default | Description |
 |---|---|---|---|
 | `blur` | `number` | `0` | Gaussian blur strength applied at load time — see [Blur units](#blur-units) |
-| `cornerRadius` | `number \| CornerRadii` | `0` | Corner radius in points — a single number for all four corners, or `{ topLeft?, topRight?, bottomLeft?, bottomRight? }` for independent per-corner radii (omitted corners stay square) |
+| `resize` | `{ width, height }` | source size | Target bitmap size in pixels. Scales to fill and center-crops (CSS `object-fit: cover`, upscaling if needed) before `blur`/`cornerRadius` run, so their pixel units refer to this final size. Typically your display size in points × `PixelRatio.get()` |
+| `cornerRadius` | `number \| CornerRadii` | `0` | Corner radius in pixels of the produced bitmap — a single number for all four corners, or `{ topLeft?, topRight?, bottomLeft?, bottomRight? }` for independent per-corner radii (omitted corners stay square). Pair with `resize` for radii that match your layout |
+| `cache` | `'memory' \| 'disk' \| 'none'` | platform default | Caching strategy |
+
+### `<PipelineImage>`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `url` | `string` | — | Image URL to load |
+| `style` | `StyleProp<ViewStyle>` | — | Layout style; also determines the resize target (see [`resizeForStyle`](#resizeforstyle-style--resizeforlayoutwidth-height)) and, if `cornerRadius` is omitted, the corner radius (see [`cornerRadiusForStyle`](#cornerradiusforstylestyle)) |
+| `blur` | `number` | `0` | Gaussian blur strength, in **points** (converted to bitmap pixels internally) |
+| `cornerRadius` | `number \| CornerRadii` | derived from `style` | Corner radius, in **points** (converted to bitmap pixels internally). When omitted, derived from `style`'s `borderRadius`/`borderTopLeftRadius`/etc.; square if neither is set |
 | `cache` | `'memory' \| 'disk' \| 'none'` | platform default | Caching strategy |
+| `onLoad` | `(image: Image) => void` | — | Called when the image finishes loading |
+| `onError` | `(error: Error) => void` | — | Called if loading fails |
+| `onLayout` | `(event: LayoutChangeEvent) => void` | — | Standard `View` layout callback; also drives the deferred resize for non-numeric sizes |
+| `…NativeNitroImage props` | — | — | Everything else (`resizeMode`, `recyclingKey`, `testID`, …) is passed through to `NativeNitroImage` |
+
+### `resizeForStyle(style)` / `resizeForLayout(width, height)`
+
+Converts a layout size in points to a bitmap `resize` option in pixels. Returns
+`{ width, height }` in whole pixels via `PixelRatio.getPixelSizeForLayoutSize`, or `undefined` for
+non-numeric sizes (e.g. `'100%'`, `undefined`) — `resizeForStyle` reads `style.width`/`style.height`,
+`resizeForLayout` takes explicit numbers.
+
+### `cornerRadiusForStyle(style)`
+
+Converts a view style's `borderRadius`/`borderTopLeftRadius`/`borderTopRightRadius`/
+`borderBottomLeftRadius`/`borderBottomRightRadius` (in points) into a `cornerRadius` option — a
+plain number for uniform `borderRadius` alone, or a `CornerRadii` object once any per-corner
+property is set (falling back to `borderRadius` for the corners left unset). Returns `undefined`
+when none are set. This is what `<PipelineImage>` uses internally when its `cornerRadius` prop is
+omitted.
 
 ### `preLoadImage(url)`
 

package/android/src/main/java/com/margelo/nitro/nitroimagepipeline/HybridNitroImagePipeline.kt

@@ -14,6 +14,7 @@ import coil3.request.ImageRequest
 import coil3.request.SuccessResult
 import coil3.request.allowHardware
 import coil3.request.transformations
+import coil3.size.Scale
 import coil3.size.Size
 import coil3.transform.RoundedCornersTransformation
 import com.google.net.cronet.okhttptransport.CronetInterceptor
@@ -22,6 +23,8 @@ import com.margelo.nitro.core.Promise
 import com.margelo.nitro.image.HybridImage
 import com.margelo.nitro.image.HybridImageSpec
 import com.margelo.nitro.nitroimagepipeline.transform.BlurTransformation
+import com.margelo.nitro.nitroimagepipeline.transform.ResizeTransformation
+import kotlin.math.roundToInt
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.async
 import kotlinx.coroutines.awaitAll
@@ -40,23 +43,34 @@ class HybridNitroImagePipeline : HybridNitroImagePipelineSpec() {
 
   override fun loadImage(url: String, options: Options?): Promise<HybridImageSpec> = Promise.async {
     val blur = options?.blur?.toFloat() ?: 0f
+    val resize =
+        options?.resize?.let { r ->
+          val width = r.width.roundToInt()
+          val height = r.height.roundToInt()
+          if (width > 0 && height > 0) width to height else null
+        }
     val transformations = buildList {
+      // Resize first: blur sigma and corner radii are in pixels of the bitmap
+      // they run on, so they must see the final size.
+      resize?.let { (width, height) -> add(ResizeTransformation(width, height)) }
       if (blur > 0f) add(BlurTransformation(context, blur))
-      options?.cornerRadius?.match(
-          first = { radius ->
-            if (radius > 0.0) add(RoundedCornersTransformation(radius.toFloat()))
-          },
-          second = { radii ->
-            // RoundedCornersTransformation rejects negative radii; treat them as square.
-            val topLeft = (radii.topLeft?.toFloat() ?: 0f).coerceAtLeast(0f)
-            val topRight = (radii.topRight?.toFloat() ?: 0f).coerceAtLeast(0f)
-            val bottomLeft = (radii.bottomLeft?.toFloat() ?: 0f).coerceAtLeast(0f)
-            val bottomRight = (radii.bottomRight?.toFloat() ?: 0f).coerceAtLeast(0f)
-            if (topLeft > 0f || topRight > 0f || bottomLeft > 0f || bottomRight > 0f) {
-              add(RoundedCornersTransformation(topLeft, topRight, bottomLeft, bottomRight))
-            }
-          },
-      )
+      options
+          ?.cornerRadius
+          ?.match(
+              first = { radius ->
+                if (radius > 0.0) add(RoundedCornersTransformation(radius.toFloat()))
+              },
+              second = { radii ->
+                // RoundedCornersTransformation rejects negative radii; treat them as square.
+                val topLeft = (radii.topLeft?.toFloat() ?: 0f).coerceAtLeast(0f)
+                val topRight = (radii.topRight?.toFloat() ?: 0f).coerceAtLeast(0f)
+                val bottomLeft = (radii.bottomLeft?.toFloat() ?: 0f).coerceAtLeast(0f)
+                val bottomRight = (radii.bottomRight?.toFloat() ?: 0f).coerceAtLeast(0f)
+                if (topLeft > 0f || topRight > 0f || bottomLeft > 0f || bottomRight > 0f) {
+                  add(RoundedCornersTransformation(topLeft, topRight, bottomLeft, bottomRight))
+                }
+              },
+          )
     }
     val request =
         ImageRequest.Builder(context)
@@ -77,6 +91,13 @@ class HybridNitroImagePipeline : HybridNitroImagePipelineSpec() {
                 }
                 null -> Unit // Coil defaults: both enabled
               }
+              // Ask the decoder for the target size so a large source is
+              // subsampled near it instead of decoded at full resolution;
+              // ResizeTransformation then makes the size exact.
+              resize?.let { (width, height) ->
+                size(width, height)
+                scale(Scale.FILL)
+              }
             }
             .allowHardware(true)
             .transformations(transformations)

package/android/src/main/java/com/margelo/nitro/nitroimagepipeline/transform/ResizeTransformation.kt

@@ -0,0 +1,58 @@
+package com.margelo.nitro.nitroimagepipeline.transform
+
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.graphics.Matrix
+import android.graphics.Paint
+import coil3.size.Size
+import coil3.transform.Transformation
+import kotlin.math.max
+
+/**
+ * Scales the input to fill exactly [width] × [height] pixels and center-crops the overflow (CSS
+ * `object-fit: cover`), upscaling smaller sources. It runs before [BlurTransformation] and rounded
+ * corners so their pixel units refer to the final bitmap — matching Nuke's
+ * `ImageProcessors.Resize(contentMode: .aspectFill, crop: true)` on iOS.
+ */
+class ResizeTransformation(
+    private val width: Int,
+    private val height: Int,
+) : Transformation() {
+
+  init {
+    require(width > 0 && height > 0) { "width and height must be > 0." }
+  }
+
+  override val cacheKey = "${ResizeTransformation::class.java.name}-$width-$height"
+
+  override suspend fun transform(input: Bitmap, size: Size): Bitmap {
+    val softwareInput =
+        if (input.config == Bitmap.Config.HARDWARE) input.copy(Bitmap.Config.ARGB_8888, false)
+        else input
+    if (softwareInput.width == width && softwareInput.height == height) return softwareInput
+
+    val scale = max(width.toFloat() / softwareInput.width, height.toFloat() / softwareInput.height)
+    val matrix =
+        Matrix().apply {
+          setScale(scale, scale)
+          postTranslate(
+              (width - softwareInput.width * scale) / 2f,
+              (height - softwareInput.height * scale) / 2f,
+          )
+        }
+    val config = softwareInput.config ?: Bitmap.Config.ARGB_8888
+    val output = Bitmap.createBitmap(width, height, config)
+    Canvas(output)
+        .drawBitmap(softwareInput, matrix, Paint(Paint.ANTI_ALIAS_FLAG or Paint.FILTER_BITMAP_FLAG))
+    return output
+  }
+
+  override fun equals(other: Any?): Boolean {
+    if (this === other) return true
+    return other is ResizeTransformation && width == other.width && height == other.height
+  }
+
+  override fun hashCode(): Int = 31 * width + height
+
+  override fun toString() = "ResizeTransformation(width=$width, height=$height)"
+}

package/ios/HybridNitroImagePipeline.swift

@@ -103,41 +103,68 @@ class HybridNitroImagePipeline: HybridNitroImagePipelineSpec {
     private var pipeline: ImagePipeline { Self.sharedPipeline }
     private var prefetcher: ImagePrefetcher { Self.sharedPrefetcher }
 
+    private static func cacheOptions(for cache: CacheOption?) -> ImageRequest.Options {
+        switch cache {
+        case .memory: [.disableDiskCache]
+        case .disk:   [.disableMemoryCache]
+        case .none?:  [.disableDiskCache, .disableMemoryCache]
+        default:      []
+        }
+    }
+
+    /// The processor that bakes `cornerRadius` into the bitmap, or `nil` when
+    /// no corner is actually rounded.
+    private static func cornerRadiusProcessor(
+        for cornerRadius: Variant_Double_CornerRadii?
+    ) -> (any ImageProcessing)? {
+        switch cornerRadius {
+        case .first(let radius):
+            guard radius > 0 else { return nil }
+            // `unit: .pixels` is required: Nuke defaults to `.points`, which
+            // multiplies the radius by the screen scale. The radius is
+            // documented — and implemented on Android and in
+            // RoundedCornersProcessor — as bitmap pixels.
+            return ImageProcessors.RoundedCorners(radius: radius, unit: .pixels)
+        case .second(let radii):
+            let roundedCorners = RoundedCornersProcessor(radii: radii)
+            return roundedCorners.hasRounding ? roundedCorners : nil
+        case nil:
+            return nil
+        }
+    }
+
+    private static func processors(for options: Options?) -> [any ImageProcessing] {
+        var processors: [any ImageProcessing] = []
+        // Resize first: blur sigma and corner radii are defined in pixels
+        // of the bitmap they run on, so they must see the final size.
+        if let resize = options?.resize, resize.width > 0, resize.height > 0 {
+            processors.append(ImageProcessors.Resize(
+                size: CGSize(width: resize.width, height: resize.height),
+                unit: .pixels,
+                contentMode: .aspectFill,
+                crop: true,
+                upscale: true
+            ))
+        }
+        if let blur = options?.blur, blur > 0 {
+            processors.append(GaussianBlurProcessor(sigma: blur))
+        }
+        if let roundedCorners = cornerRadiusProcessor(for: options?.cornerRadius) {
+            processors.append(roundedCorners)
+        }
+        return processors
+    }
+
     func loadImage(url: String, options: Options?) throws -> Promise<any HybridImageSpec> {
         return Promise.async {
             guard let imageUrl = URL(string: url) else {
                 throw RuntimeError.error(withMessage: "Invalid URL: \(url)")
             }
 
-            let cacheOptions: ImageRequest.Options = switch options?.cache {
-            case .memory: [.disableDiskCache]
-            case .disk:   [.disableMemoryCache]
-            case .none?:  [.disableDiskCache, .disableMemoryCache]
-            default:      []
-            }
-
-            var processors: [any ImageProcessing] = []
-            if let blur = options?.blur, blur > 0 {
-                processors.append(GaussianBlurProcessor(sigma: blur))
-            }
-            switch options?.cornerRadius {
-            case .first(let radius):
-                if radius > 0 {
-                    processors.append(.roundedCorners(radius: radius))
-                }
-            case .second(let radii):
-                let roundedCorners = RoundedCornersProcessor(radii: radii)
-                if roundedCorners.hasRounding {
-                    processors.append(roundedCorners)
-                }
-            case nil:
-                break
-            }
-
             let imgRequest = ImageRequest(
                 url: imageUrl,
-                processors: processors,
-                options: cacheOptions
+                processors: Self.processors(for: options),
+                options: Self.cacheOptions(for: options?.cache)
             )
 
             let image = try await self.pipeline.image(for: imgRequest)

package/ios/RoundedCornersProcessor.swift

@@ -12,8 +12,11 @@ import Foundation
 import Nuke
 import UIKit
 
-/// Nuke processor that rounds each corner with its own radius (in points,
-/// like `ImageProcessors.RoundedCorners` with `unit: .points`).
+/// Nuke processor that rounds each corner with its own radius, measured in
+/// pixels of the bitmap it receives (like `ImageProcessors.RoundedCorners`
+/// with `unit: .points` on the scale-1 images the pipeline decodes). Runs
+/// after `ImageProcessors.Resize` when `Options.resize` is set, so the radii
+/// refer to the final output size.
 struct RoundedCornersProcessor: ImageProcessing {
     let topLeft: CGFloat
     let topRight: CGFloat
@@ -75,7 +78,7 @@ struct RoundedCornersProcessor: ImageProcessing {
             (rect.width, topLeft + topRight),
             (rect.width, bottomLeft + bottomRight),
             (rect.height, topLeft + bottomLeft),
-            (rect.height, topRight + bottomRight),
+            (rect.height, topRight + bottomRight)
         ] where pair > edge {
             scale = min(scale, edge / pair)
         }

package/lib/commonjs/NitroImagePipeline.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NitroImagePipeline = void 0;
+var _reactNativeNitroModules = require("react-native-nitro-modules");
+const NitroImagePipeline = exports.NitroImagePipeline = _reactNativeNitroModules.NitroModules.createHybridObject('NitroImagePipeline');
+//# sourceMappingURL=NitroImagePipeline.js.map

package/lib/commonjs/NitroImagePipeline.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNativeNitroModules","require","NitroImagePipeline","exports","NitroModules","createHybridObject"],"sourceRoot":"../../src","sources":["NitroImagePipeline.ts"],"mappings":";;;;;;AAAA,IAAAA,wBAAA,GAAAC,OAAA;AAIO,MAAMC,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAC7BE,qCAAY,CAACC,kBAAkB,CAAyB,oBAAoB,CAAC","ignoreList":[]}

package/lib/commonjs/PipelineImage.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PipelineImage = PipelineImage;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNativeNitroImage = require("react-native-nitro-image");
+var _resizeForStyle = require("./resizeForStyle");
+var _useImage = require("./useImage");
+var _jsxRuntime = require("react/jsx-runtime");
+function sameSize(a, b) {
+  return a?.width === b?.width && a?.height === b?.height;
+}
+function scaleRadius(cornerRadius, scale) {
+  if (typeof cornerRadius === 'number') {
+    return cornerRadius * scale;
+  }
+  return {
+    topLeft: (cornerRadius.topLeft ?? 0) * scale,
+    topRight: (cornerRadius.topRight ?? 0) * scale,
+    bottomLeft: (cornerRadius.bottomLeft ?? 0) * scale,
+    bottomRight: (cornerRadius.bottomRight ?? 0) * scale
+  };
+}
+
+/**
+ * A `NativeNitroImage` that loads `url` through the pipeline at exactly the
+ * size it is displayed: the bitmap is resized to the view's size in points ×
+ * `PixelRatio.get()`, so `blur` and `cornerRadius` (both in points here) apply
+ * 1:1 to what is on screen and large sources are never decoded at full size.
+ *
+ * A numeric `width`/`height` in `style` starts loading immediately; otherwise
+ * (`'50%'`, `flex`, `aspectRatio`, …) loading waits for the first `onLayout`.
+ * If the layout size later changes, a new variant is loaded and swapped in
+ * without flashing. Without an explicit `cornerRadius` prop, `style`'s
+ * `borderRadius`-family properties are baked into the bitmap instead — no
+ * separate view-layer rounding needed.
+ * @example
+ * ```tsx
+ * <PipelineImage
+ *   url="https://example.com/photo.jpg"
+ *   style={{ width: 300, height: 200 }}
+ *   cornerRadius={24}
+ * />
+ * ```
+ */
+function PipelineImage({
+  url,
+  blur = 0,
+  cornerRadius,
+  cache,
+  onLoad,
+  onError,
+  style,
+  onLayout,
+  ...viewProps
+}) {
+  const scale = _reactNative.PixelRatio.get();
+  const styleSize = (0, _resizeForStyle.resizeForStyle)(style);
+  const [layoutSize, setLayoutSize] = (0, _react.useState)(undefined);
+  // A numeric style is what the caller declared, so it wins and starts the
+  // request a frame earlier; the measured layout is the fallback.
+  const resize = styleSize ?? layoutSize;
+  // Same precedence: an explicit prop wins over what style implies.
+  const effectiveCornerRadius = cornerRadius ?? (0, _resizeForStyle.cornerRadiusForStyle)(style) ?? 0;
+  const {
+    image,
+    error
+  } = (0, _useImage.useImage)({
+    url,
+    blur: blur * scale,
+    cornerRadius: scaleRadius(effectiveCornerRadius, scale),
+    cache,
+    resize,
+    enabled: resize !== undefined
+  });
+
+  // Latest callbacks in refs so inline arrow props don't re-fire the effects.
+  const onLoadRef = (0, _react.useRef)(onLoad);
+  const onErrorRef = (0, _react.useRef)(onError);
+  (0, _react.useEffect)(() => {
+    onLoadRef.current = onLoad;
+    onErrorRef.current = onError;
+  });
+  (0, _react.useEffect)(() => {
+    if (image) onLoadRef.current?.(image);
+  }, [image]);
+  (0, _react.useEffect)(() => {
+    if (error) onErrorRef.current?.(error);
+  }, [error]);
+  const handleLayout = event => {
+    onLayout?.(event);
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    const next = (0, _resizeForStyle.resizeForLayout)(width, height);
+    // Always record it (even when a numeric style is in charge) so a later
+    // switch to a non-numeric style has a size to fall back on.
+    setLayoutSize(prev => sameSize(prev, next) ? prev : next);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeNitroImage.NativeNitroImage, {
+    ...viewProps,
+    style: style,
+    onLayout: handleLayout,
+    image: image
+  });
+}
+//# sourceMappingURL=PipelineImage.js.map

package/lib/commonjs/PipelineImage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_reactNativeNitroImage","_resizeForStyle","_useImage","_jsxRuntime","sameSize","a","b","width","height","scaleRadius","cornerRadius","scale","topLeft","topRight","bottomLeft","bottomRight","PipelineImage","url","blur","cache","onLoad","onError","style","onLayout","viewProps","PixelRatio","get","styleSize","resizeForStyle","layoutSize","setLayoutSize","useState","undefined","resize","effectiveCornerRadius","cornerRadiusForStyle","image","error","useImage","enabled","onLoadRef","useRef","onErrorRef","useEffect","current","handleLayout","event","nativeEvent","layout","next","resizeForLayout","prev","jsx","NativeNitroImage"],"sourceRoot":"../../src","sources":["PipelineImage.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/index.js

@@ -3,85 +3,44 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NitroImagePipeline = void 0;
-exports.useImage = useImage;
-var _react = require("react");
-var _reactNativeNitroModules = require("react-native-nitro-modules");
-const NitroImagePipeline = exports.NitroImagePipeline = _reactNativeNitroModules.NitroModules.createHybridObject('NitroImagePipeline');
-/**
- * A hook to asynchronously load an image from the
- * given {@linkcode AsyncImageSource} into memory.
- * @example
- * ```ts
- * const { image, error } = useImage({ filePath: '/tmp/image.jpg' })
- * ```
- */
-function useImage({
-  url,
-  blur = 0,
-  cornerRadius = 0,
-  cache
-}) {
-  const [image, setImage] = (0, _react.useState)({
-    image: undefined,
-    error: undefined
-  });
-  const loadedUrlRef = (0, _react.useRef)(url);
-
-  // Split the option into primitives so an inline `{ topLeft: 24, ... }`
-  // literal (new identity every render) doesn't re-trigger the effect.
-  const isUniformRadius = typeof cornerRadius === 'number';
-  const uniformRadius = isUniformRadius ? cornerRadius : 0;
-  const {
-    topLeft = 0,
-    topRight = 0,
-    bottomLeft = 0,
-    bottomRight = 0
-  } = isUniformRadius ? {} : cornerRadius;
-  (0, _react.useEffect)(() => {
-    let cancelled = false;
-    // Only reset to the loading state when the URL changes; for same-URL
-    // param tweaks (blur/cornerRadius/cache) keep showing the current image
-    // until the new variant resolves, to avoid flashing empty.
-    if (loadedUrlRef.current !== url) {
-      loadedUrlRef.current = url;
-      setImage({
-        image: undefined,
-        error: undefined
-      });
-    }
-    (async () => {
-      try {
-        const result = await NitroImagePipeline.loadImage(url, {
-          blur,
-          cornerRadius: isUniformRadius ? uniformRadius : {
-            topLeft,
-            topRight,
-            bottomLeft,
-            bottomRight
-          },
-          cache
-        });
-        if (!cancelled) {
-          setImage({
-            image: result,
-            error: undefined
-          });
-        }
-      } catch (e) {
-        const error = e instanceof Error ? e : new Error(`${e}`);
-        if (!cancelled) {
-          setImage({
-            image: undefined,
-            error: error
-          });
-        }
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [url, blur, isUniformRadius, uniformRadius, topLeft, topRight, bottomLeft, bottomRight, cache]);
-  return image;
-}
+Object.defineProperty(exports, "NitroImagePipeline", {
+  enumerable: true,
+  get: function () {
+    return _NitroImagePipeline.NitroImagePipeline;
+  }
+});
+Object.defineProperty(exports, "PipelineImage", {
+  enumerable: true,
+  get: function () {
+    return _PipelineImage.PipelineImage;
+  }
+});
+Object.defineProperty(exports, "cornerRadiusForStyle", {
+  enumerable: true,
+  get: function () {
+    return _resizeForStyle.cornerRadiusForStyle;
+  }
+});
+Object.defineProperty(exports, "resizeForLayout", {
+  enumerable: true,
+  get: function () {
+    return _resizeForStyle.resizeForLayout;
+  }
+});
+Object.defineProperty(exports, "resizeForStyle", {
+  enumerable: true,
+  get: function () {
+    return _resizeForStyle.resizeForStyle;
+  }
+});
+Object.defineProperty(exports, "useImage", {
+  enumerable: true,
+  get: function () {
+    return _useImage.useImage;
+  }
+});
+var _NitroImagePipeline = require("./NitroImagePipeline");
+var _PipelineImage = require("./PipelineImage");
+var _resizeForStyle = require("./resizeForStyle");
+var _useImage = require("./useImage");
 //# sourceMappingURL=index.js.map