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

package/README.md

@@ -38,32 +38,143 @@ 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`.
+
+### Animating with `react-native-reanimated`
+
+`<PipelineImage>` forwards its `ref` to the underlying `NativeNitroImage` host view, so it can be
+passed straight to `Animated.createAnimatedComponent` — from
+[react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) or React Native's
+built-in `Animated`:
+
+```tsx
+import Animated, { FadeIn, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { PipelineImage } from 'react-native-nitro-image-pipeline';
+
+const AnimatedPipelineImage = Animated.createAnimatedComponent(PipelineImage);
+
+function Photo({ url }: { url: string }) {
+  const pressed = useSharedValue(false);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: withSpring(pressed.value ? 1.1 : 1) }],
+  }));
+
+  return (
+    <AnimatedPipelineImage
+      url={url}
+      entering={FadeIn}
+      style={[styles.photo, animatedStyle]}
+      onTouchStart={() => (pressed.value = true)}
+      onTouchEnd={() => (pressed.value = false)}
+    />
+  );
+}
+
+const styles = StyleSheet.create({ photo: { width: 300, height: 200, borderRadius: 12 } });
+```
+
+Layout animations (`entering`/`exiting`) work as on any animated component, and wrapping a plain
+`<PipelineImage>` in an `Animated.View` is always an option if you'd rather not create one.
+
+Because the pipeline bakes its processing into the bitmap at load time, the props fall into two
+groups — view-layer properties that animate freely, and bitmap properties that don't:
+
+- **`transform` and `opacity`** — the ideal case: they run entirely on the UI thread and never
+  touch the bitmap. Prefer a `scale` transform over animating `width`/`height`.
+- **`width`/`height`** — the animation itself works (Reanimated drives the native view directly),
+  but the bitmap doesn't follow it. With numeric dimensions in `style` (including an animated
+  style's initial values) the bitmap is decoded once at that size and stretched by the view while
+  it animates; with flex/percent sizing the size comes from `onLayout`, which fires repeatedly
+  during the animation and requests a new variant each time. Animate a `scale` transform instead
+  and let the layout settle where it will.
+- **`borderRadius`** — by default the component bakes `style`'s `borderRadius` into the bitmap;
+  an animated radius updates only the view layer, so the baked rounding wins and stays stale. To
+  animate rounding, opt out of baking with `cornerRadius={0}` and round at the view layer instead:
+  `overflow: 'hidden'` plus the animated `borderRadius`.
+- **`blur`** — not animatable. It's a load-time bitmap operation behind an async native call, not
+  a view property, so a changing `blur` re-runs the pipeline per value — far too slow to drive
+  per-frame. To animate blurriness, render the sharp and blurred variants as two stacked
+  `<PipelineImage>`s and cross-fade the blurred one's `opacity` (both share the URL cache, so the
+  second variant loads from the same fetched source):
+
+```tsx
+function BlurFade({ url, blurred }: { url: string; blurred: boolean }) {
+  const blurOpacity = useAnimatedStyle(() => ({
+    opacity: withTiming(blurred ? 1 : 0),
+  }));
+
+  return (
+    <View style={styles.photo}>
+      <PipelineImage url={url} style={StyleSheet.absoluteFill} />
+      <Animated.View style={[StyleSheet.absoluteFill, blurOpacity]}>
+        <PipelineImage url={url} blur={12} style={StyleSheet.absoluteFill} />
+      </Animated.View>
+    </View>
+  );
+}
+```
+
 ### `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 +226,37 @@ 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 |
+| `ref` | `Ref<PipelineImageRef>` | — | Forwarded to the underlying `NativeNitroImage` host view — gives access to native-view methods (`measure`, …) and makes the component work with `Animated.createAnimatedComponent` (see [Animating](#animating-with-react-native-reanimated)) |
+| `…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,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PipelineImage = void 0;
+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");
+/**
+ * The instance `<PipelineImage>` exposes through its `ref` — the underlying
+ * `NativeNitroImage` host view, with the usual native-view methods
+ * (`measure`, …).
+ */
+
+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.
+ *
+ * The `ref` is forwarded to the underlying `NativeNitroImage` host view, so
+ * the component works with `Animated.createAnimatedComponent` (Reanimated or
+ * React Native's built-in `Animated`).
+ * @example
+ * ```tsx
+ * <PipelineImage
+ *   url="https://example.com/photo.jpg"
+ *   style={{ width: 300, height: 200 }}
+ *   cornerRadius={24}
+ * />
+ * ```
+ */
+const PipelineImage = exports.PipelineImage = /*#__PURE__*/(0, _react.forwardRef)(function PipelineImage({
+  url,
+  blur = 0,
+  cornerRadius,
+  cache,
+  onLoad,
+  onError,
+  style,
+  onLayout,
+  ...viewProps
+}, ref) {
+  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,
+    ref: ref,
+    style: style,
+    onLayout: handleLayout,
+    image: image
+  });
+});
+
+// Reanimated and DevTools read the display name; the forwardRef wrapper
+// would otherwise report as anonymous.
+PipelineImage.displayName = 'PipelineImage';
+//# 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","exports","forwardRef","url","blur","cache","onLoad","onError","style","onLayout","viewProps","ref","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","displayName"],"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;AAKA,IAAAE,eAAA,GAAAF,OAAA;AAWA,IAAAG,SAAA,GAAAH,OAAA","ignoreList":[]}