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

package/README.md

@@ -38,32 +38,69 @@ 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 px = PixelRatio.get();
   const { image, error } = useImage({
     url: 'https://example.com/photo.jpg',
     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: { width: 300 * px, height: 200 * px },
-    cornerRadius: 12 * px,
+    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
@@ -115,6 +152,36 @@ Loads an image from a URL and returns a `Promise<Image>`.
 | `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)`
 
 Prefetches a single image into the cache. Returns `Promise<void>`.

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

@@ -54,21 +54,23 @@ class HybridNitroImagePipeline : HybridNitroImagePipelineSpec() {
       // 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)

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

@@ -31,8 +31,7 @@ class ResizeTransformation(
         else input
     if (softwareInput.width == width && softwareInput.height == height) return softwareInput
 
-    val scale =
-        max(width.toFloat() / softwareInput.width, height.toFloat() / softwareInput.height)
+    val scale = max(width.toFloat() / softwareInput.width, height.toFloat() / softwareInput.height)
     val matrix =
         Matrix().apply {
           setScale(scale, scale)

package/ios/HybridNitroImagePipeline.swift

@@ -103,52 +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] = []
-            // 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))
-            }
-            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

@@ -78,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,92 +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,
-  resize,
-  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;
-  const resizeWidth = resize?.width ?? 0;
-  const resizeHeight = resize?.height ?? 0;
-  (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
-          },
-          resize: resizeWidth > 0 && resizeHeight > 0 ? {
-            width: resizeWidth,
-            height: resizeHeight
-          } : undefined,
-          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, resizeWidth, resizeHeight, 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

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_reactNativeNitroModules","NitroImagePipeline","exports","NitroModules","createHybridObject","useImage","url","blur","cornerRadius","resize","cache","image","setImage","useState","undefined","error","loadedUrlRef","useRef","isUniformRadius","uniformRadius","topLeft","topRight","bottomLeft","bottomRight","resizeWidth","width","resizeHeight","height","useEffect","cancelled","current","result","loadImage","e","Error"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,wBAAA,GAAAD,OAAA;AAYO,MAAME,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAC7BE,qCAAY,CAACC,kBAAkB,CAAyB,oBAAoB,CAAC;AAmB/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,QAAQA,CAAC;EACvBC,GAAG;EACHC,IAAI,GAAG,CAAC;EACRC,YAAY,GAAG,CAAC;EAChBC,MAAM;EACNC;AAuBF,CAAC,EAAU;EACT,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAAS;IACzCF,KAAK,EAAEG,SAAS;IAChBC,KAAK,EAAED;EACT,CAAC,CAAC;EACF,MAAME,YAAY,GAAG,IAAAC,aAAM,EAACX,GAAG,CAAC;;EAEhC;EACA;EACA,MAAMY,eAAe,GAAG,OAAOV,YAAY,KAAK,QAAQ;EACxD,MAAMW,aAAa,GAAGD,eAAe,GAAGV,YAAY,GAAG,CAAC;EACxD,MAAM;IACJY,OAAO,GAAG,CAAC;IACXC,QAAQ,GAAG,CAAC;IACZC,UAAU,GAAG,CAAC;IACdC,WAAW,GAAG;EAChB,CAAC,GAAGL,eAAe,GAAG,CAAC,CAAC,GAAGV,YAAY;EACvC,MAAMgB,WAAW,GAAGf,MAAM,EAAEgB,KAAK,IAAI,CAAC;EACtC,MAAMC,YAAY,GAAGjB,MAAM,EAAEkB,MAAM,IAAI,CAAC;EAExC,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAIC,SAAS,GAAG,KAAK;IACrB;IACA;IACA;IACA,IAAIb,YAAY,CAACc,OAAO,KAAKxB,GAAG,EAAE;MAChCU,YAAY,CAACc,OAAO,GAAGxB,GAAG;MAC1BM,QAAQ,CAAC;QAAED,KAAK,EAAEG,SAAS;QAAEC,KAAK,EAAED;MAAU,CAAC,CAAC;IAClD;IAEA,CAAC,YAAY;MACX,IAAI;QACF,MAAMiB,MAAM,GAAG,MAAM9B,kBAAkB,CAAC+B,SAAS,CAAC1B,GAAG,EAAE;UACrDC,IAAI;UACJC,YAAY,EAAEU,eAAe,GACzBC,aAAa,GACb;YAAEC,OAAO;YAAEC,QAAQ;YAAEC,UAAU;YAAEC;UAAY,CAAC;UAClDd,MAAM,EACJe,WAAW,GAAG,CAAC,IAAIE,YAAY,GAAG,CAAC,GAC/B;YAAED,KAAK,EAAED,WAAW;YAAEG,MAAM,EAAED;UAAa,CAAC,GAC5CZ,SAAS;UACfJ;QACF,CAAC,CAAC;QAEF,IAAI,CAACmB,SAAS,EAAE;UACdjB,QAAQ,CAAC;YAAED,KAAK,EAAEoB,MAAM;YAAEhB,KAAK,EAAED;UAAU,CAAC,CAAC;QAC/C;MACF,CAAC,CAAC,OAAOmB,CAAC,EAAE;QACV,MAAMlB,KAAK,GAAGkB,CAAC,YAAYC,KAAK,GAAGD,CAAC,GAAG,IAAIC,KAAK,CAAC,GAAGD,CAAC,EAAE,CAAC;QACxD,IAAI,CAACJ,SAAS,EAAE;UACdjB,QAAQ,CAAC;YAAED,KAAK,EAAEG,SAAS;YAAEC,KAAK,EAAEA;UAAM,CAAC,CAAC;QAC9C;MACF;IACF,CAAC,EAAE,CAAC;IAEJ,OAAO,MAAM;MACXc,SAAS,GAAG,IAAI;IAClB,CAAC;EACH,CAAC,EAAE,CACDvB,GAAG,EACHC,IAAI,EACJW,eAAe,EACfC,aAAa,EACbC,OAAO,EACPC,QAAQ,EACRC,UAAU,EACVC,WAAW,EACXC,WAAW,EACXE,YAAY,EACZhB,KAAK,CACN,CAAC;EAEF,OAAOC,KAAK;AACd","ignoreList":[]}
+{"version":3,"names":["_NitroImagePipeline","require","_PipelineImage","_resizeForStyle","_useImage"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,mBAAA,GAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAF,OAAA;AAWA,IAAAG,SAAA,GAAAH,OAAA","ignoreList":[]}

package/lib/commonjs/resizeForStyle.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cornerRadiusForStyle = cornerRadiusForStyle;
+exports.resizeForLayout = resizeForLayout;
+exports.resizeForStyle = resizeForStyle;
+var _reactNative = require("react-native");
+/**
+ * Converts a layout size in points (dp) to the pipeline's `resize` option in
+ * whole bitmap pixels using `PixelRatio.getPixelSizeForLayoutSize`. Returns
+ * `undefined` unless both values are positive numbers.
+ */
+function resizeForLayout(width, height) {
+  if (typeof width !== 'number' || typeof height !== 'number') {
+    return undefined;
+  }
+  const pixelWidth = _reactNative.PixelRatio.getPixelSizeForLayoutSize(width);
+  const pixelHeight = _reactNative.PixelRatio.getPixelSizeForLayoutSize(height);
+  return pixelWidth > 0 && pixelHeight > 0 ? {
+    width: pixelWidth,
+    height: pixelHeight
+  } : undefined;
+}
+
+/**
+ * Derives the pipeline's `resize` option from a view style whose `width` and
+ * `height` are numeric points, so the bitmap matches the display size on
+ * every screen density:
+ * ```ts
+ * useImage({ url, resize: resizeForStyle(styles.image) });
+ * ```
+ * Arrays and registered styles are flattened. Returns `undefined` when either
+ * dimension is missing or not a number (`'50%'`, `'auto'`, flex-driven) —
+ * use `<PipelineImage>` for those, which measures the view instead.
+ */
+function resizeForStyle(style) {
+  const flat = _reactNative.StyleSheet.flatten(style);
+  return resizeForLayout(flat?.width, flat?.height);
+}
+
+/**
+ * Derives a `cornerRadius` option from a view style's `borderRadius` /
+ * `borderTopLeftRadius` / `borderTopRightRadius` / `borderBottomLeftRadius` /
+ * `borderBottomRightRadius`, in points. Per-corner properties override
+ * `borderRadius` for that corner; a corner with neither set stays square.
+ * Non-numeric values (percentages, animated values) are ignored, like
+ * {@linkcode resizeForStyle}. Returns `undefined` when none are set.
+ */
+function cornerRadiusForStyle(style) {
+  const flat = _reactNative.StyleSheet.flatten(style);
+  const base = typeof flat?.borderRadius === 'number' ? flat.borderRadius : undefined;
+  const topLeft = typeof flat?.borderTopLeftRadius === 'number' ? flat.borderTopLeftRadius : undefined;
+  const topRight = typeof flat?.borderTopRightRadius === 'number' ? flat.borderTopRightRadius : undefined;
+  const bottomLeft = typeof flat?.borderBottomLeftRadius === 'number' ? flat.borderBottomLeftRadius : undefined;
+  const bottomRight = typeof flat?.borderBottomRightRadius === 'number' ? flat.borderBottomRightRadius : undefined;
+  if (topLeft === undefined && topRight === undefined && bottomLeft === undefined && bottomRight === undefined) {
+    return base;
+  }
+  return {
+    topLeft: topLeft ?? base,
+    topRight: topRight ?? base,
+    bottomLeft: bottomLeft ?? base,
+    bottomRight: bottomRight ?? base
+  };
+}
+//# sourceMappingURL=resizeForStyle.js.map

package/lib/commonjs/resizeForStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","resizeForLayout","width","height","undefined","pixelWidth","PixelRatio","getPixelSizeForLayoutSize","pixelHeight","resizeForStyle","style","flat","StyleSheet","flatten","cornerRadiusForStyle","base","borderRadius","topLeft","borderTopLeftRadius","topRight","borderTopRightRadius","bottomLeft","borderBottomLeftRadius","bottomRight","borderBottomRightRadius"],"sourceRoot":"../../src","sources":["resizeForStyle.ts"],"mappings":";;;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAYA;AACA;AACA;AACA;AACA;AACO,SAASC,eAAeA,CAC7BC,KAAc,EACdC,MAAe,EACY;EAC3B,IAAI,OAAOD,KAAK,KAAK,QAAQ,IAAI,OAAOC,MAAM,KAAK,QAAQ,EAAE;IAC3D,OAAOC,SAAS;EAClB;EACA,MAAMC,UAAU,GAAGC,uBAAU,CAACC,yBAAyB,CAACL,KAAK,CAAC;EAC9D,MAAMM,WAAW,GAAGF,uBAAU,CAACC,yBAAyB,CAACJ,MAAM,CAAC;EAChE,OAAOE,UAAU,GAAG,CAAC,IAAIG,WAAW,GAAG,CAAC,GACpC;IAAEN,KAAK,EAAEG,UAAU;IAAEF,MAAM,EAAEK;EAAY,CAAC,GAC1CJ,SAAS;AACf;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASK,cAAcA,CAC5BC,KAA2B,EACA;EAC3B,MAAMC,IAAI,GAAGC,uBAAU,CAACC,OAAO,CAACH,KAAK,CAAC;EACtC,OAAOT,eAAe,CAACU,IAAI,EAAET,KAAK,EAAES,IAAI,EAAER,MAAM,CAAC;AACnD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASW,oBAAoBA,CAClCJ,KAA2B,EACO;EAClC,MAAMC,IAAI,GAAGC,uBAAU,CAACC,OAAO,CAACH,KAAK,CAAC;EACtC,MAAMK,IAAI,GACR,OAAOJ,IAAI,EAAEK,YAAY,KAAK,QAAQ,GAAGL,IAAI,CAACK,YAAY,GAAGZ,SAAS;EACxE,MAAMa,OAAO,GACX,OAAON,IAAI,EAAEO,mBAAmB,KAAK,QAAQ,GACzCP,IAAI,CAACO,mBAAmB,GACxBd,SAAS;EACf,MAAMe,QAAQ,GACZ,OAAOR,IAAI,EAAES,oBAAoB,KAAK,QAAQ,GAC1CT,IAAI,CAACS,oBAAoB,GACzBhB,SAAS;EACf,MAAMiB,UAAU,GACd,OAAOV,IAAI,EAAEW,sBAAsB,KAAK,QAAQ,GAC5CX,IAAI,CAACW,sBAAsB,GAC3BlB,SAAS;EACf,MAAMmB,WAAW,GACf,OAAOZ,IAAI,EAAEa,uBAAuB,KAAK,QAAQ,GAC7Cb,IAAI,CAACa,uBAAuB,GAC5BpB,SAAS;EAEf,IACEa,OAAO,KAAKb,SAAS,IACrBe,QAAQ,KAAKf,SAAS,IACtBiB,UAAU,KAAKjB,SAAS,IACxBmB,WAAW,KAAKnB,SAAS,EACzB;IACA,OAAOW,IAAI;EACb;EAEA,OAAO;IACLE,OAAO,EAAEA,OAAO,IAAIF,IAAI;IACxBI,QAAQ,EAAEA,QAAQ,IAAIJ,IAAI;IAC1BM,UAAU,EAAEA,UAAU,IAAIN,IAAI;IAC9BQ,WAAW,EAAEA,WAAW,IAAIR;EAC9B,CAAC;AACH","ignoreList":[]}