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

package/README.md

@@ -71,6 +71,80 @@ so a style that already rounds the view rounds the bitmap too, with no separate
 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:
@@ -164,6 +238,7 @@ Loads an image from a URL and returns a `Promise<Image>`.
 | `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)`
@@ -184,11 +259,17 @@ omitted.
 
 ### `preLoadImage(url)`
 
-Prefetches a single image into the cache. Returns `Promise<void>`.
+Prefetches a single image into the **disk cache**, without decoding it. Returns `Promise<void>`.
+
+Prefetching only pays the network and disk I/O cost up front — no bitmap is decoded or held in
+memory, so prefetching a long list of URLs doesn't balloon RAM. The image is decoded (at the
+`resize` target size, when one is given) the first time `loadImage`/`useImage`/`<PipelineImage>`
+actually displays it.
 
 ### `preLoadImages(urls)`
 
-Prefetches multiple images into the cache. Returns `Promise<void>`.
+Prefetches multiple images into the disk cache — same behavior as `preLoadImage`, for a batch.
+Returns `Promise<void>`.
 
 ### `gaussianBlur(image, radius)`
 
@@ -229,6 +310,23 @@ images keep their borders instead of fading out.
 
 Removes all cached images from memory and disk. Returns `Promise<void>` that resolves once both caches are cleared.
 
+## Memory usage
+
+The pipeline is set up so RAM scales with what you display, not with what you download:
+
+- **Pass `resize` (or just use `<PipelineImage>`, which derives it from layout).** With a target
+  size known, both platforms decode the source *near that size* instead of at full resolution —
+  iOS via a downsampled thumbnail decode, Android via Coil's subsampling. Without `resize`, a
+  48 MP photo decompresses to ~190 MB of bitmap no matter how small you display it.
+- **Prefetching stores bytes, not bitmaps.** `preLoadImage(s)` writes the download to the disk
+  cache and skips decoding entirely.
+- **The in-memory cache is capped** (128 MB on iOS, 25% of the app's memory class on Android),
+  holds decoded bitmaps for instant re-display, and evicts least-recently-used entries — also in
+  response to memory warnings and backgrounding. Memory profilers attribute this cache to the app;
+  a plateau at the cap is expected and evictable, not a leak. Use `cache: 'disk'` or
+  `cache: 'none'` on images you know you won't show again soon, and `clearCache()` to drop
+  everything.
+
 ## Upgrading from 0.3.x
 
 `blur` and `gaussianBlur(image, radius)` changed meaning in 1.0. They used to hand the number

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

@@ -3,8 +3,11 @@ package com.margelo.nitro.nitroimagepipeline
 import android.content.Context
 import androidx.core.graphics.drawable.toBitmap
 import coil3.BitmapImage
+import coil3.ColorImage
 import coil3.DrawableImage
 import coil3.ImageLoader
+import coil3.decode.DecodeResult
+import coil3.decode.Decoder
 import coil3.disk.DiskCache
 import coil3.memory.MemoryCache
 import coil3.network.okhttp.OkHttpNetworkFetcherFactory
@@ -117,21 +120,25 @@ class HybridNitroImagePipeline : HybridNitroImagePipelineSpec() {
     }
   }
 
+  // Preloading warms the disk cache only: the memory cache is skipped and the
+  // decode step is replaced with a no-op (Coil's documented preload pattern),
+  // so prefetching N URLs costs network + disk I/O instead of N full-resolution
+  // bitmaps on the heap. The image is decoded — subsampled to the requested
+  // size — only when a loadImage actually displays it.
+  private fun preloadRequest(url: String): ImageRequest =
+      ImageRequest.Builder(context)
+          .data(url)
+          .memoryCachePolicy(CachePolicy.DISABLED)
+          .decoderFactory { _, _, _ -> Decoder { DecodeResult(ColorImage(), false) } }
+          .build()
+
   override fun preLoadImage(url: String): Promise<Unit> = Promise.async {
-    val request = ImageRequest.Builder(context).data(url).build()
-    imageLoader.execute(request)
+    imageLoader.execute(preloadRequest(url))
   }
 
   override fun preLoadImages(urls: Array<String>): Promise<Unit> = Promise.async {
     coroutineScope {
-      urls
-          .map { url ->
-            async {
-              val request = ImageRequest.Builder(context).data(url).build()
-              imageLoader.execute(request)
-            }
-          }
-          .awaitAll()
+      urls.map { url -> async { imageLoader.execute(preloadRequest(url)) } }.awaitAll()
     }
     Unit
   }

package/ios/HybridNitroImagePipeline.swift

@@ -95,10 +95,28 @@ class HybridNitroImagePipeline: HybridNitroImagePipelineSpec {
         // the original download, so they survive memory eviction and
         // restarts without dropping the original for other variants.
         configuration.dataCachePolicy = .storeAll
+        // A private, capped memory cache. The default (ImageCache.shared)
+        // sizes itself at 15% of physical RAM — up to 768 MB of decoded
+        // bitmaps on modern devices before anything is evicted, which shows
+        // up as "high RAM usage" even though it is all evictable cache.
+        // 128 MB still holds ~10 full-screen bitmaps or hundreds of list
+        // thumbnails, and the LRU cache keeps trimming itself on memory
+        // warnings and when the app enters the background.
+        configuration.imageCache = ImageCache(
+            costLimit: min(ImageCache.defaultCostLimit, 128 * 1024 * 1024)
+        )
         return ImagePipeline(configuration: configuration)
     }()
 
-    private static let sharedPrefetcher = ImagePrefetcher(pipeline: sharedPipeline)
+    // `.diskCache` stores the downloaded data without decoding it, so
+    // prefetching N URLs costs network + disk I/O instead of N decoded
+    // full-resolution bitmaps parked in the memory cache (the default
+    // `.memoryCache` destination). The image is decoded — at the requested
+    // target size — only when a loadImage actually displays it.
+    private static let sharedPrefetcher = ImagePrefetcher(
+        pipeline: sharedPipeline,
+        destination: .diskCache
+    )
 
     private var pipeline: ImagePipeline { Self.sharedPipeline }
     private var prefetcher: ImagePrefetcher { Self.sharedPrefetcher }
@@ -133,13 +151,21 @@ class HybridNitroImagePipeline: HybridNitroImagePipelineSpec {
         }
     }
 
+    /// The target size in pixels, or `nil` when no (valid) resize was requested.
+    private static func resizeSize(for options: Options?) -> CGSize? {
+        guard let resize = options?.resize, resize.width > 0, resize.height > 0 else {
+            return nil
+        }
+        return CGSize(width: resize.width, height: resize.height)
+    }
+
     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 {
+        if let size = resizeSize(for: options) {
             processors.append(ImageProcessors.Resize(
-                size: CGSize(width: resize.width, height: resize.height),
+                size: size,
                 unit: .pixels,
                 contentMode: .aspectFill,
                 crop: true,
@@ -161,11 +187,24 @@ class HybridNitroImagePipeline: HybridNitroImagePipelineSpec {
                 throw RuntimeError.error(withMessage: "Invalid URL: \(url)")
             }
 
-            let imgRequest = ImageRequest(
+            var imgRequest = ImageRequest(
                 url: imageUrl,
                 processors: Self.processors(for: options),
                 options: Self.cacheOptions(for: options?.cache)
             )
+            // With a target size known, decode near it (aspect-fill, so the
+            // decoded image always covers the target) instead of at full
+            // resolution — a 48 MP photo displayed as a 300 pt card would
+            // otherwise decompress to ~190 MB before Resize shrinks it.
+            // Matches Android, where the request's size() drives subsampling;
+            // the exact size and crop still come from the Resize processor.
+            if let size = Self.resizeSize(for: options) {
+                imgRequest.thumbnail = ImageRequest.ThumbnailOptions(
+                    size: size,
+                    unit: .pixels,
+                    contentMode: .aspectFill
+                )
+            }
 
             let image = try await self.pipeline.image(for: imgRequest)
             return HybridImage(uiImage: image)

package/lib/commonjs/PipelineImage.js

@@ -3,13 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PipelineImage = PipelineImage;
+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;
 }
@@ -37,6 +43,10 @@ function scaleRadius(cornerRadius, scale) {
  * 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
@@ -46,7 +56,7 @@ function scaleRadius(cornerRadius, scale) {
  * />
  * ```
  */
-function PipelineImage({
+const PipelineImage = exports.PipelineImage = /*#__PURE__*/(0, _react.forwardRef)(function PipelineImage({
   url,
   blur = 0,
   cornerRadius,
@@ -56,7 +66,7 @@ function PipelineImage({
   style,
   onLayout,
   ...viewProps
-}) {
+}, ref) {
   const scale = _reactNative.PixelRatio.get();
   const styleSize = (0, _resizeForStyle.resizeForStyle)(style);
   const [layoutSize, setLayoutSize] = (0, _react.useState)(undefined);
@@ -103,9 +113,14 @@ function PipelineImage({
   };
   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

@@ -1 +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":[]}
+{"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.map

@@ -1 +1 @@
-{"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":[]}
+{"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":[]}

package/lib/module/PipelineImage.js

@@ -1,10 +1,16 @@
 "use strict";
 
-import { useEffect, useRef, useState } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import { PixelRatio } from 'react-native';
 import { NativeNitroImage } from 'react-native-nitro-image';
 import { cornerRadiusForStyle, resizeForLayout, resizeForStyle } from './resizeForStyle';
 import { useImage } from './useImage';
+
+/**
+ * The instance `<PipelineImage>` exposes through its `ref` — the underlying
+ * `NativeNitroImage` host view, with the usual native-view methods
+ * (`measure`, …).
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 function sameSize(a, b) {
   return a?.width === b?.width && a?.height === b?.height;
@@ -33,6 +39,10 @@ function scaleRadius(cornerRadius, scale) {
  * 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
@@ -42,7 +52,7 @@ function scaleRadius(cornerRadius, scale) {
  * />
  * ```
  */
-export function PipelineImage({
+export const PipelineImage = /*#__PURE__*/forwardRef(function PipelineImage({
   url,
   blur = 0,
   cornerRadius,
@@ -52,7 +62,7 @@ export function PipelineImage({
   style,
   onLayout,
   ...viewProps
-}) {
+}, ref) {
   const scale = PixelRatio.get();
   const styleSize = resizeForStyle(style);
   const [layoutSize, setLayoutSize] = useState(undefined);
@@ -99,9 +109,14 @@ export function PipelineImage({
   };
   return /*#__PURE__*/_jsx(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/module/PipelineImage.js.map

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

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["NitroImagePipeline","PipelineImage","cornerRadiusForStyle","resizeForLayout","resizeForStyle","useImage"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,SAASA,kBAAkB,QAAQ,sBAAsB;AACzD,SAASC,aAAa,QAAiC,iBAAiB;AACxE,SACEC,oBAAoB,EACpBC,eAAe,EACfC,cAAc,QACT,kBAAkB;AAOzB,SAASC,QAAQ,QAAQ,YAAY","ignoreList":[]}
+{"version":3,"names":["NitroImagePipeline","PipelineImage","cornerRadiusForStyle","resizeForLayout","resizeForStyle","useImage"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,SAASA,kBAAkB,QAAQ,sBAAsB;AACzD,SACEC,aAAa,QAGR,iBAAiB;AACxB,SACEC,oBAAoB,EACpBC,eAAe,EACfC,cAAc,QACT,kBAAkB;AAOzB,SAASC,QAAQ,QAAQ,YAAY","ignoreList":[]}

package/lib/typescript/src/PipelineImage.d.ts

@@ -1,8 +1,15 @@
+import { type ComponentRef } from 'react';
 import { type HostComponent } from 'react-native';
 import { type Image, NativeNitroImage } from 'react-native-nitro-image';
 import type { CacheOption, CornerRadii } from './specs/nitro-image-toolkit.nitro';
 type ReactProps<T> = T extends HostComponent<infer P> ? P : never;
 type NativeImageProps = ReactProps<typeof NativeNitroImage>;
+/**
+ * The instance `<PipelineImage>` exposes through its `ref` — the underlying
+ * `NativeNitroImage` host view, with the usual native-view methods
+ * (`measure`, …).
+ */
+export type PipelineImageRef = ComponentRef<typeof NativeNitroImage>;
 export interface PipelineImageProps extends Omit<NativeImageProps, 'image'> {
     /** URL of the image to load through the pipeline. */
     url: string;
@@ -43,6 +50,10 @@ export interface PipelineImageProps extends Omit<NativeImageProps, 'image'> {
  * 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
@@ -52,6 +63,11 @@ export interface PipelineImageProps extends Omit<NativeImageProps, 'image'> {
  * />
  * ```
  */
-export declare function PipelineImage({ url, blur, cornerRadius, cache, onLoad, onError, style, onLayout, ...viewProps }: PipelineImageProps): import("react").JSX.Element;
+export declare const PipelineImage: import("react").ForwardRefExoticComponent<PipelineImageProps & import("react").RefAttributes<import("react").Component<{
+    hybridRef?: import("react-native-nitro-modules").NitroViewWrappedCallback<((ref: import("react-native-nitro-modules").HybridView<import("react-native-nitro-image/lib/typescript/specs/ImageView.nitro").NativeNitroImageViewProps, import("react-native-nitro-image/lib/typescript/specs/ImageView.nitro").NativeNitroImageViewMethods>) => void) | undefined> | undefined;
+    image?: Image | import("react-native-nitro-image").ImageLoader;
+    resizeMode?: import("react-native-nitro-image/lib/typescript/specs/ImageView.nitro").ResizeMode;
+    recyclingKey?: string;
+} & import("react-native").ViewProps, {}, any> & import("react-native").ReactNativeElement>>;
 export {};
 //# sourceMappingURL=PipelineImage.d.ts.map

package/lib/typescript/src/PipelineImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PipelineImage.d.ts","sourceRoot":"","sources":["../../../src/PipelineImage.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,aAAa,EAGnB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,KAAK,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAOxE,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EAEZ,MAAM,mCAAmC,CAAC;AAG3C,KAAK,UAAU,CAAC,CAAC,IAAI,CAAC,SAAS,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAClE,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE5D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACzE,qDAAqD;IACrD,GAAG,EAAE,MAAM,CAAC;IACZ;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IACpC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAChC,iCAAiC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAqBD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,IAAQ,EACR,YAAY,EACZ,KAAK,EACL,MAAM,EACN,OAAO,EACP,KAAK,EACL,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,kBAAkB,+BAqDpB"}
+{"version":3,"file":"PipelineImage.d.ts","sourceRoot":"","sources":["../../../src/PipelineImage.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,aAAa,EAGnB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,KAAK,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAOxE,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EAEZ,MAAM,mCAAmC,CAAC;AAG3C,KAAK,UAAU,CAAC,CAAC,IAAI,CAAC,SAAS,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAClE,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE5D;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAErE,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACzE,qDAAqD;IACrD,GAAG,EAAE,MAAM,CAAC;IACZ;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IACpC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAChC,iCAAiC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAqBD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa;;;;;4FAqEzB,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -1,5 +1,5 @@
 export { NitroImagePipeline } from './NitroImagePipeline';
-export { PipelineImage, type PipelineImageProps } from './PipelineImage';
+export { PipelineImage, type PipelineImageProps, type PipelineImageRef, } from './PipelineImage';
 export { cornerRadiusForStyle, resizeForLayout, resizeForStyle, } from './resizeForStyle';
 export type { CacheOption, CornerRadii, Options, ResizeOptions, } from './specs/nitro-image-toolkit.nitro';
 export { useImage } from './useImage';

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,cAAc,GACf,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,WAAW,EACX,WAAW,EACX,OAAO,EACP,aAAa,GACd,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,GACtB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,cAAc,GACf,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,WAAW,EACX,WAAW,EACX,OAAO,EACP,aAAa,GACd,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-nitro-image-pipeline",
-  "version": "1.2.1",
+  "version": "1.3.2",
   "description": "High-performance image loading, caching, and processing for React Native, built with Nitro Modules",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",
@@ -86,7 +86,8 @@
     "react-native-nitro-image": "0.15.1"
   },
   "overrides": {
-    "lodash-es": "4.17.21"
+    "lodash-es": "4.17.21",
+    "typescript": "$typescript"
   },
   "react-native-builder-bob": {
     "source": "src",

package/src/PipelineImage.tsx

@@ -1,4 +1,10 @@
-import { useEffect, useRef, useState } from 'react';
+import {
+  type ComponentRef,
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import {
   type HostComponent,
   type LayoutChangeEvent,
@@ -21,6 +27,13 @@ import { useImage } from './useImage';
 type ReactProps<T> = T extends HostComponent<infer P> ? P : never;
 type NativeImageProps = ReactProps<typeof NativeNitroImage>;
 
+/**
+ * The instance `<PipelineImage>` exposes through its `ref` — the underlying
+ * `NativeNitroImage` host view, with the usual native-view methods
+ * (`measure`, …).
+ */
+export type PipelineImageRef = ComponentRef<typeof NativeNitroImage>;
+
 export interface PipelineImageProps extends Omit<NativeImageProps, 'image'> {
   /** URL of the image to load through the pipeline. */
   url: string;
@@ -81,6 +94,10 @@ function scaleRadius(
  * 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
@@ -90,67 +107,77 @@ function scaleRadius(
  * />
  * ```
  */
-export function PipelineImage({
-  url,
-  blur = 0,
-  cornerRadius,
-  cache,
-  onLoad,
-  onError,
-  style,
-  onLayout,
-  ...viewProps
-}: PipelineImageProps) {
-  const scale = PixelRatio.get();
-  const styleSize = resizeForStyle(style);
-  const [layoutSize, setLayoutSize] = useState<ResizeOptions | undefined>(
-    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 ?? cornerRadiusForStyle(style) ?? 0;
+export const PipelineImage = forwardRef<PipelineImageRef, PipelineImageProps>(
+  function PipelineImage(
+    {
+      url,
+      blur = 0,
+      cornerRadius,
+      cache,
+      onLoad,
+      onError,
+      style,
+      onLayout,
+      ...viewProps
+    },
+    ref,
+  ) {
+    const scale = PixelRatio.get();
+    const styleSize = resizeForStyle(style);
+    const [layoutSize, setLayoutSize] = useState<ResizeOptions | undefined>(
+      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 ?? cornerRadiusForStyle(style) ?? 0;
 
-  const { image, error } = useImage({
-    url,
-    blur: blur * scale,
-    cornerRadius: scaleRadius(effectiveCornerRadius, scale),
-    cache,
-    resize,
-    enabled: resize !== undefined,
-  });
+    const { image, error } = 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 = useRef(onLoad);
-  const onErrorRef = useRef(onError);
-  useEffect(() => {
-    onLoadRef.current = onLoad;
-    onErrorRef.current = onError;
-  });
-  useEffect(() => {
-    if (image) onLoadRef.current?.(image);
-  }, [image]);
-  useEffect(() => {
-    if (error) onErrorRef.current?.(error);
-  }, [error]);
+    // Latest callbacks in refs so inline arrow props don't re-fire the effects.
+    const onLoadRef = useRef(onLoad);
+    const onErrorRef = useRef(onError);
+    useEffect(() => {
+      onLoadRef.current = onLoad;
+      onErrorRef.current = onError;
+    });
+    useEffect(() => {
+      if (image) onLoadRef.current?.(image);
+    }, [image]);
+    useEffect(() => {
+      if (error) onErrorRef.current?.(error);
+    }, [error]);
 
-  const handleLayout = (event: LayoutChangeEvent) => {
-    onLayout?.(event);
-    const { width, height } = event.nativeEvent.layout;
-    const next = 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));
-  };
+    const handleLayout = (event: LayoutChangeEvent) => {
+      onLayout?.(event);
+      const { width, height } = event.nativeEvent.layout;
+      const next = 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 (
-    <NativeNitroImage
-      {...viewProps}
-      style={style}
-      onLayout={handleLayout}
-      image={image}
-    />
-  );
-}
+    return (
+      <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';

package/src/index.ts

@@ -1,5 +1,9 @@
 export { NitroImagePipeline } from './NitroImagePipeline';
-export { PipelineImage, type PipelineImageProps } from './PipelineImage';
+export {
+  PipelineImage,
+  type PipelineImageProps,
+  type PipelineImageRef,
+} from './PipelineImage';
 export {
   cornerRadiusForStyle,
   resizeForLayout,