react-native-vroom-chart 0.13.0 → 0.13.1

package/android/CMakeLists.txt

@@ -124,6 +124,14 @@ target_compile_options(vroomchart PRIVATE -Wno-mismatched-tags)
 
 find_library(VROOM_LOG_LIB log)
 
+# Android 15+ devices can use 16KB pages. NDK r27 and older default to 4KB
+# ELF alignment (align=2**12); Play/SDK 35 then rejects libvroomchart.so.
+# r28+ already aligns to 16KB, so these flags are redundant there but harmless.
+target_link_options(vroomchart PRIVATE
+    "-Wl,-z,max-page-size=16384"
+    "-Wl,-z,common-page-size=16384"
+)
+
 target_link_libraries(vroomchart
   ${VROOM_LOG_LIB}
   ReactAndroid::jsi

package/android/README.md

@@ -52,13 +52,14 @@ different, unmerged RTTI record for "the same" class and fails with
 `Expected a Skia object of a different type`.
 
 `VroomChartHostObject.cpp`'s `wrapPicture()` works around this only on
-Android: instead of constructing `RNSkia::JsiSkPicture` directly (as iOS
-does), it serializes the `SkPicture` (`SkPicture::serialize()`) and calls
-RN-Skia's own public JS API, `Skia.Picture.MakePicture(bytes)`, via JSI. That
-runs `JsiSkPictureFactory::MakePicture` — genuinely compiled inside
-`librnskia.so` — so the returned object's RTTI matches what
-`librnskia.so`'s own code expects. This costs a serialize + re-parse of the
-picture's draw commands on every `render()`/gesture call, which is real
-overhead on what's meant to be a 60fps hot path; if that shows up in
-profiling, revisit (e.g. a merged-`.so` build, or a lighter-weight bridge
-that avoids the round trip).
+Android. Two copies of Skia cannot share an `sk_sp<SkPicture>` pointer, and
+serializing the chart picture (the original workaround) embedded the Android
+system typeface on every pan/zoom frame — an OOM that killed the process after
+a few seconds of gesturing.
+
+The hot path now rasterizes the picture in vroom's Skia and hands RN-Skia raw
+pixels via `Skia.Image.MakeImage`, so `<Image>` paints a framebuffer whose size
+is bounded by the view. If rasterization fails, we still serialize, but with
+`SkTypeface::SerializeBehavior::kDontIncludeData` so the font file is not
+copied; `MakePicture` re-resolves `sans-serif` inside `librnskia.so`. iOS is
+unchanged (one binary, direct `JsiSkPicture` wrap).

package/cpp/VroomChartHostObject.cpp

@@ -4,6 +4,7 @@
 #include <string>
 #include <vector>
 
+#include "chart.h"
 #include "chart_internal.h"
 #include "vroom/vroom_chart.h"
 
@@ -11,6 +12,18 @@
 #include "JsiSkNativeObjects.h"
 #include "JsiSkPicture.h"
 
+#if defined(__ANDROID__)
+#include <algorithm>
+#include <cmath>
+
+#include "include/core/SkBitmap.h"
+#include "include/core/SkCanvas.h"
+#include "include/core/SkData.h"
+#include "include/core/SkImageInfo.h"
+#include "include/core/SkSerialProcs.h"
+#include "include/core/SkTypeface.h"
+#endif
+
 namespace vroom {
 
 namespace jsi = facebook::jsi;
@@ -74,27 +87,21 @@ std::vector<jsi::PropNameID> ChartHostObject::getPropertyNames(
 }
 
 #if defined(__ANDROID__)
-// Android only: RN-Skia is compiled into its own librnskia.so, separate from
-// libvroomchart.so. Constructing a RNSkia::JsiSkPicture directly here (as iOS
-// does, below) gives it a vtable/typeinfo from *our* .so; when RN-Skia's own
-// compiled code later consumes it (e.g. Convertor.h's
-// `getPropertyValue<sk_sp<SkPicture>>`, which does
-// `getJsiObject<JsiSkPicture>(rt, value)` — a dynamic_pointer_cast
-// under the hood), the cast fails cross-.so with "Expected a Skia object of
-// a different type", because the object's *runtime* type was never actually
-// compiled inside librnskia.so. iOS statically links everything into one
-// binary, so no such mismatch exists there.
+// Android only: RN-Skia lives in librnskia.so, vroom in libvroomchart.so, and
+// each statically links its own libskia.a. A JsiSkPicture constructed here has
+// our .so's RTTI, so RN-Skia's dynamic_pointer_cast fails with "Expected a
+// Skia object of a different type". iOS statically links one binary, so the
+// iOS wrap below can hand the sk_sp<SkPicture> through directly.
 //
-// The fix: build the picture through RN-Skia's own public JS API instead
-// (`Skia.Picture.MakePicture(bytes)`, the same call `require(...).png`-style
-// static pictures use), so the resulting JsiSkPicture is genuinely
-// constructed by librnskia.so's own code. This costs a serialize +
-// re-parse of the picture's draw ops per call — real overhead on a gesture
-// hot path — but is the only ABI-safe option found so far. Revisit if
-// profiling shows this mattering (e.g. a merged-.so build, or a lighter
-// bridge that avoids the round trip).
-#include "include/core/SkData.h"
-
+// Crossing that boundary used to serialize the chart picture and call
+// Skia.Picture.MakePicture(bytes). Default SkPicture::serialize() embeds the
+// Android system typeface (Noto-scale, megabytes) on every pan/zoom frame;
+// Hermes never kept up and the process was OOM-killed (~3 GB RSS in ~10s).
+//
+// Preferred path: rasterize in *our* Skia and hand RN-Skia raw pixels via
+// Skia.Image.MakeImage — memory is one framebuffer, labels stay correct.
+// Fallback: still serialize, but with kDontIncludeData so the font file is
+// not copied; MakePicture re-resolves sans-serif on RN-Skia's side.
 namespace {
 class SkDataMutableBuffer : public facebook::jsi::MutableBuffer {
  public:
@@ -108,41 +115,119 @@ class SkDataMutableBuffer : public facebook::jsi::MutableBuffer {
  private:
   sk_sp<SkData> data_;
 };
-}  // namespace
 
-static facebook::jsi::Value wrapPicture(facebook::jsi::Runtime& rt,
-                                       const sk_sp<SkPicture>& pic) {
-  if (!pic) return facebook::jsi::Value::null();
-  sk_sp<SkData> serialized = pic->serialize();
-  if (!serialized) return facebook::jsi::Value::null();
+jsi::Value skiaApiObject(jsi::Runtime& rt, const char* name) {
+  auto skiaApi = rt.global().getProperty(rt, "SkiaApi");
+  if (!skiaApi.isObject()) return jsi::Value::undefined();
+  auto prop = skiaApi.asObject(rt).getProperty(rt, name);
+  return prop.isObject() ? std::move(prop) : jsi::Value::undefined();
+}
 
-  auto buffer = std::make_shared<SkDataMutableBuffer>(std::move(serialized));
+// Uint8Array-shaped `{ buffer }` — MakePicture and Data.fromBytes both
+// read the ArrayBuffer off that property.
+jsi::Object bytesLike(jsi::Runtime& rt, sk_sp<SkData> data) {
+  auto buffer = std::make_shared<SkDataMutableBuffer>(std::move(data));
   jsi::ArrayBuffer arrayBuffer(rt, buffer);
+  jsi::Object arg(rt);
+  arg.setProperty(rt, "buffer", arrayBuffer);
+  return arg;
+}
 
-  auto skiaApi = rt.global().getProperty(rt, "SkiaApi");
-  if (!skiaApi.isObject()) return facebook::jsi::Value::null();
-  auto pictureFactory = skiaApi.asObject(rt).getProperty(rt, "Picture");
-  if (!pictureFactory.isObject()) return facebook::jsi::Value::null();
+sk_sp<const SkData> serializeTypefaceNoEmbed(SkTypeface* tf, void*) {
+  if (!tf) return nullptr;
+  return tf->serialize(SkTypeface::SerializeBehavior::kDontIncludeData);
+}
+
+jsi::Value wrapSerializedPicture(jsi::Runtime& rt, const sk_sp<SkPicture>& pic) {
+  SkSerialProcs procs;
+  procs.fTypefaceProc = serializeTypefaceNoEmbed;
+  sk_sp<SkData> serialized = pic->serialize(&procs);
+  if (!serialized) return jsi::Value::null();
+
+  auto pictureFactory = skiaApiObject(rt, "Picture");
+  if (pictureFactory.isUndefined()) return jsi::Value::null();
   auto pictureFactoryObj = pictureFactory.asObject(rt);
   auto makePicture =
       pictureFactoryObj.getPropertyAsFunction(rt, "MakePicture");
 
-  // Mirrors JsiSkPictureFactory::MakePicture's expected argument shape: an
-  // object with a `.buffer` property holding the ArrayBuffer (matching a
-  // Uint8Array-like value; the factory ignores everything else about it).
-  //
   // Skia 2.11's NativeState host methods recover the factory via `this`
   // (`fromThis` → "Expected PictureFactory but got non-object" if unbound).
-  jsi::Object arg(rt);
-  arg.setProperty(rt, "buffer", arrayBuffer);
-  return makePicture.callWithThis(rt, pictureFactoryObj, arg);
+  return makePicture.callWithThis(rt, pictureFactoryObj,
+                                  bytesLike(rt, std::move(serialized)));
+}
+
+jsi::Value wrapRasterImage(jsi::Runtime& rt, const sk_sp<SkPicture>& pic,
+                           float dpr) {
+  const SkRect cull = pic->cullRect();
+  const float scale = dpr > 0.f ? dpr : 1.f;
+  const int w =
+      std::max(1, static_cast<int>(std::ceil(cull.width() * scale)));
+  const int h =
+      std::max(1, static_cast<int>(std::ceil(cull.height() * scale)));
+
+  // Reused across frames on this JS thread so pan/zoom doesn't heap-allocate
+  // a new bitmap every time. Multiple charts share it; a size change reallocs.
+  thread_local SkBitmap raster;
+  const auto info = SkImageInfo::MakeN32Premul(w, h);
+  if ((raster.width() != w || raster.height() != h) &&
+      !raster.tryAllocPixels(info)) {
+    return jsi::Value::null();
+  }
+  raster.eraseColor(SK_ColorTRANSPARENT);
+  SkCanvas canvas(raster);
+  canvas.scale(scale, scale);
+  canvas.translate(-cull.left(), -cull.top());
+  canvas.drawPicture(pic);
+
+  SkPixmap pixmap;
+  if (!raster.peekPixels(&pixmap) || pixmap.addr() == nullptr) {
+    return jsi::Value::null();
+  }
+  sk_sp<SkData> pixels =
+      SkData::MakeWithCopy(pixmap.addr(), pixmap.computeByteSize());
+  if (!pixels) return jsi::Value::null();
+
+  auto dataFactory = skiaApiObject(rt, "Data");
+  auto imageFactory = skiaApiObject(rt, "Image");
+  if (dataFactory.isUndefined() || imageFactory.isUndefined()) {
+    return jsi::Value::null();
+  }
+  auto dataFactoryObj = dataFactory.asObject(rt);
+  auto imageFactoryObj = imageFactory.asObject(rt);
+  auto fromBytes = dataFactoryObj.getPropertyAsFunction(rt, "fromBytes");
+  auto makeImage = imageFactoryObj.getPropertyAsFunction(rt, "MakeImage");
+
+  auto skData =
+      fromBytes.callWithThis(rt, dataFactoryObj, bytesLike(rt, std::move(pixels)));
+  if (!skData.isObject()) return jsi::Value::null();
+
+  jsi::Object imageInfo(rt);
+  imageInfo.setProperty(rt, "width", static_cast<double>(w));
+  imageInfo.setProperty(rt, "height", static_cast<double>(h));
+  imageInfo.setProperty(rt, "colorType",
+                        static_cast<double>(pixmap.colorType()));
+  imageInfo.setProperty(rt, "alphaType",
+                        static_cast<double>(pixmap.alphaType()));
+  return makeImage.callWithThis(rt, imageFactoryObj, imageInfo, skData,
+                                static_cast<double>(pixmap.rowBytes()));
+}
+}  // namespace
+
+static facebook::jsi::Value wrapPicture(facebook::jsi::Runtime& rt,
+                                       const sk_sp<SkPicture>& pic,
+                                       float dpr = 1.f) {
+  if (!pic) return facebook::jsi::Value::null();
+  auto image = wrapRasterImage(rt, pic, dpr);
+  if (!image.isNull()) return image;
+  return wrapSerializedPicture(rt, pic);
 }
 #else
 // Shared helper: wraps a fresh picture for return to JS. Memory pressure is
 // applied inside JsiSkPicture::create (NativeObject::create reads
 // getMemoryPressure() → picture->approximateBytesUsed()).
 static facebook::jsi::Value wrapPicture(facebook::jsi::Runtime& rt,
-                                       const sk_sp<SkPicture>& pic) {
+                                       const sk_sp<SkPicture>& pic,
+                                       float /*dpr*/ = 1.f) {
   if (!pic) return facebook::jsi::Value::null();
   auto host =
       std::make_shared<RNSkia::JsiSkPicture>(/*context=*/nullptr, pic);
@@ -448,7 +533,8 @@ jsi::Value ChartHostObject::get(jsi::Runtime& rt,
           const float dx = static_cast<float>(args[0].asNumber());
           const float dy = static_cast<float>(args[1].asNumber());
           vroom_chart_pan(chart_, dx, dy);
-          return wrapPicture(rt2, render_chart_picture(chart_));
+          return wrapPicture(rt2, render_chart_picture(chart_),
+                         chart_->px_ratio);
         });
   }
 
@@ -467,7 +553,8 @@ jsi::Value ChartHostObject::get(jsi::Runtime& rt,
           const float dx = static_cast<float>(args[0].asNumber());
           const float dy = static_cast<float>(args[1].asNumber());
           vroom_chart_translate(chart_, dx, dy);
-          return wrapPicture(rt2, render_chart_picture(chart_));
+          return wrapPicture(rt2, render_chart_picture(chart_),
+                         chart_->px_ratio);
         });
   }
 
@@ -489,7 +576,8 @@ jsi::Value ChartHostObject::get(jsi::Runtime& rt,
           const float fx = static_cast<float>(args[2].asNumber());
           const float fy = static_cast<float>(args[3].asNumber());
           vroom_chart_zoom(chart_, sx, sy, fx, fy);
-          return wrapPicture(rt2, render_chart_picture(chart_));
+          return wrapPicture(rt2, render_chart_picture(chart_),
+                         chart_->px_ratio);
         });
   }
 
@@ -505,7 +593,8 @@ jsi::Value ChartHostObject::get(jsi::Runtime& rt,
           if (count < 1) return jsi::Value::null();
           const float dy = static_cast<float>(args[0].asNumber());
           vroom_chart_scale_price_axis(chart_, dy);
-          return wrapPicture(rt2, render_chart_picture(chart_));
+          return wrapPicture(rt2, render_chart_picture(chart_),
+                         chart_->px_ratio);
         });
   }
 
@@ -521,7 +610,8 @@ jsi::Value ChartHostObject::get(jsi::Runtime& rt,
           if (count < 1) return jsi::Value::null();
           const float dx = static_cast<float>(args[0].asNumber());
           vroom_chart_scale_time_axis(chart_, dx);
-          return wrapPicture(rt2, render_chart_picture(chart_));
+          return wrapPicture(rt2, render_chart_picture(chart_),
+                         chart_->px_ratio);
         });
   }
 
@@ -572,7 +662,8 @@ jsi::Value ChartHostObject::get(jsi::Runtime& rt,
           const float x = static_cast<float>(args[0].asNumber());
           const float y = static_cast<float>(args[1].asNumber());
           vroom_chart_set_crosshair(chart_, x, y);
-          return wrapPicture(rt2, render_chart_picture(chart_));
+          return wrapPicture(rt2, render_chart_picture(chart_),
+                         chart_->px_ratio);
         });
   }
 
@@ -587,7 +678,8 @@ jsi::Value ChartHostObject::get(jsi::Runtime& rt,
                const jsi::Value* /*args*/,
                size_t /*count*/) -> jsi::Value {
           vroom_chart_clear_crosshair(chart_);
-          return wrapPicture(rt2, render_chart_picture(chart_));
+          return wrapPicture(rt2, render_chart_picture(chart_),
+                         chart_->px_ratio);
         });
   }
 
@@ -1098,7 +1190,8 @@ jsi::Value ChartHostObject::get(jsi::Runtime& rt,
                const jsi::Value& /*thisVal*/,
                const jsi::Value* /*args*/,
                size_t /*count*/) -> jsi::Value {
-          return wrapPicture(rt2, render_chart_picture(chart_));
+          return wrapPicture(rt2, render_chart_picture(chart_),
+                         chart_->px_ratio);
         });
   }
 

package/cpp/VroomChartHostObject.h

@@ -6,7 +6,7 @@
 // Methods exposed to JS:
 //   setCandles(arrayBuffer)   — copies packed VroomCandle[] into the core
 //   setSize(width, height, pxRatio)
-//   render() -> JsiSkPicture  — returns the current chart picture
+//   render() -> SkPicture (iOS) / SkImage (Android)
 
 #pragma once
 

package/cpp/VroomJsiInstaller.cpp

@@ -5,7 +5,7 @@
 //     methods on the returned object:
 //       setCandles(arrayBuffer)
 //       setSize(w, h, pxRatio)
-//       render() -> JsiSkPicture
+//       render() -> SkPicture (iOS) / SkImage (Android)
 //
 // The host object's lifetime is managed by JS GC — when the React component
 // drops its reference, the underlying VroomChart is destroyed.

package/lib/index.js

@@ -514,6 +514,9 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
 }
 
 // src/VroomChart.tsx
+function isSkImage(frame) {
+  return typeof frame.getImageInfo === "function";
+}
 function VroomChart(props) {
   const {
     candles,
@@ -565,17 +568,38 @@ function VroomChart(props) {
     rec.beginRecording(import_react_native_skia.Skia.XYWHRect(0, 0, 1, 1));
     return rec.finishRecordingAsPicture();
   }, []);
+  const emptyImage = (0, import_react2.useMemo)(() => {
+    const data = import_react_native_skia.Skia.Data.fromBytes(new Uint8Array(4));
+    return import_react_native_skia.Skia.Image.MakeImage(
+      {
+        width: 1,
+        height: 1,
+        colorType: import_react_native_skia.ColorType.RGBA_8888,
+        alphaType: import_react_native_skia.AlphaType.Premul
+      },
+      data,
+      4
+    );
+  }, []);
   const pictureSV = (0, import_react_native_reanimated.useSharedValue)(emptyPicture);
+  const imageSV = (0, import_react_native_reanimated.useSharedValue)(emptyImage);
+  const applyFrame = (0, import_react2.useCallback)(
+    (frame) => {
+      if (isSkImage(frame)) imageSV.value = frame;
+      else pictureSV.value = frame;
+    },
+    [imageSV, pictureSV]
+  );
   const reduceMotion = (0, import_react_native_reanimated.useReducedMotion)();
   const onFrame = (0, import_react2.useCallback)(
     (p) => {
-      pictureSV.value = p;
+      applyFrame(p);
     },
-    [pictureSV]
+    [applyFrame]
   );
   const { handle, picture, volumeCollapseRef } = useChartCore(
     candles,
-    { width, height },
+    { width, height, pxRatio: import_react_native2.PixelRatio.get() },
     visibleRange,
     defaultCandleWidth,
     chartType,
@@ -604,11 +628,11 @@ function VroomChart(props) {
     animRaf.current = null;
     if (!handle) return;
     const next = handle.render();
-    if (next) pictureSV.value = next;
+    if (next) applyFrame(next);
     if (handle.isAnimating()) {
       animRaf.current = requestAnimationFrame(animTick);
     }
-  }, [handle, pictureSV]);
+  }, [handle, applyFrame]);
   const maybeStartAnim = (0, import_react2.useCallback)(() => {
     if (animRaf.current != null) return;
     if (!handle?.isAnimating()) return;
@@ -623,9 +647,9 @@ function VroomChart(props) {
     };
   }, []);
   (0, import_react2.useEffect)(() => {
-    if (picture) pictureSV.value = picture;
+    if (picture) applyFrame(picture);
     maybeStartAnim();
-  }, [picture, pictureSV, maybeStartAnim]);
+  }, [picture, applyFrame, maybeStartAnim]);
   const morphRaf = (0, import_react2.useRef)(null);
   const morphFade = (0, import_react2.useRef)(null);
   const morphHandle = (0, import_react2.useRef)(null);
@@ -639,7 +663,7 @@ function VroomChart(props) {
       morphFade.current = target;
       handle.setChartType(target);
       const p = handle.render();
-      if (p) pictureSV.value = p;
+      if (p) applyFrame(p);
       maybeStartAnim();
       return void 0;
     }
@@ -656,7 +680,7 @@ function VroomChart(props) {
       morphFade.current = target;
       handle.setChartType(target);
       const p = handle.render();
-      if (p) pictureSV.value = p;
+      if (p) applyFrame(p);
       maybeStartAnim();
       return void 0;
     }
@@ -669,7 +693,7 @@ function VroomChart(props) {
       morphFade.current = fade;
       handle.setMorph(reduceMotion ? 0 : fade, fade);
       const p = handle.render();
-      if (p) pictureSV.value = p;
+      if (p) applyFrame(p);
       if (prog < 1) {
         morphRaf.current = requestAnimationFrame(step);
       } else {
@@ -677,7 +701,7 @@ function VroomChart(props) {
         morphFade.current = target;
         handle.setChartType(target);
         const q = handle.render();
-        if (q) pictureSV.value = q;
+        if (q) applyFrame(q);
         maybeStartAnim();
       }
     };
@@ -688,7 +712,7 @@ function VroomChart(props) {
         morphRaf.current = null;
       }
     };
-  }, [handle, chartType, transitionMs, reduceMotion, pictureSV, maybeStartAnim]);
+  }, [handle, chartType, transitionMs, reduceMotion, applyFrame, maybeStartAnim]);
   const volumeRaf = (0, import_react2.useRef)(null);
   const volumeHandle = (0, import_react2.useRef)(null);
   (0, import_react2.useEffect)(() => {
@@ -714,7 +738,7 @@ function VroomChart(props) {
       volumeCollapseRef.current = { t: target, easing };
       handle.setVolumeCollapse(target, easing);
       const p = handle.render();
-      if (p) pictureSV.value = p;
+      if (p) applyFrame(p);
       maybeStartAnim();
       return void 0;
     }
@@ -728,7 +752,7 @@ function VroomChart(props) {
       volumeCollapseRef.current = { t, easing: kind };
       handle.setVolumeCollapse(t, kind);
       const p = handle.render();
-      if (p) pictureSV.value = p;
+      if (p) applyFrame(p);
       if (prog < 1) {
         volumeRaf.current = requestAnimationFrame(step);
       } else {
@@ -748,7 +772,7 @@ function VroomChart(props) {
     volume?.enabled,
     transitionMs,
     reduceMotion,
-    pictureSV,
+    applyFrame,
     volumeCollapseRef,
     maybeStartAnim
   ]);
@@ -766,7 +790,7 @@ function VroomChart(props) {
       axisCollapse.current = { y: targetY, x: targetX };
       handle.setAxisCollapse(targetY, targetX);
       const p = handle.render();
-      if (p) pictureSV.value = p;
+      if (p) applyFrame(p);
       maybeStartAnim();
       return void 0;
     }
@@ -785,7 +809,7 @@ function VroomChart(props) {
       axisCollapse.current = { y: targetY, x: targetX };
       handle.setAxisCollapse(targetY, targetX);
       const p = handle.render();
-      if (p) pictureSV.value = p;
+      if (p) applyFrame(p);
       maybeStartAnim();
       return void 0;
     }
@@ -799,7 +823,7 @@ function VroomChart(props) {
       axisCollapse.current = { y, x };
       handle.setAxisCollapse(y, x);
       const p = handle.render();
-      if (p) pictureSV.value = p;
+      if (p) applyFrame(p);
       if (prog < 1) {
         axisRaf.current = requestAnimationFrame(step);
       } else {
@@ -820,7 +844,7 @@ function VroomChart(props) {
     showXAxis,
     transitionMs,
     reduceMotion,
-    pictureSV,
+    applyFrame,
     maybeStartAnim
   ]);
   const hitAxis = (0, import_react2.useCallback)(
@@ -860,7 +884,7 @@ function VroomChart(props) {
         priceDrag.current = { index: pl.index, id: pl.line.id, price: pl.line.price };
         handle.setPriceLineDrag(pl.index, pl.line.price);
         const p = handle.render();
-        if (p) pictureSV.value = p;
+        if (p) applyFrame(p);
       }
     }
   }).onChange((e) => {
@@ -883,7 +907,7 @@ function VroomChart(props) {
       next = handle.render();
     } else if (crosshairActive.current) {
       const ch = handle.setCrosshair(e.x, e.y - crosshairOffset);
-      if (ch) pictureSV.value = ch;
+      if (ch) applyFrame(ch);
       const info = handle.getCrosshairInfo();
       const t = info?.timeMs ?? null;
       if (t !== lastCrosshairTime.current) {
@@ -894,7 +918,7 @@ function VroomChart(props) {
     } else {
       next = handle.translate(e.changeX, e.changeY);
     }
-    if (next) pictureSV.value = next;
+    if (next) applyFrame(next);
     maybeStartAnim();
   }).onEnd((e) => {
     if (!handle) return;
@@ -903,7 +927,7 @@ function VroomChart(props) {
       priceDrag.current = null;
       handle.setPriceLineDrag(-1, 0);
       const p = handle.render();
-      if (p) pictureSV.value = p;
+      if (p) applyFrame(p);
       if (g) onPriceLineDragEnd?.(g.id, g.price);
       return;
     }
@@ -923,7 +947,7 @@ function VroomChart(props) {
       velocity *= Math.pow(0.5, dt / HALF_LIFE_S);
       const dx = velocity * dt;
       const next = handle.pan(dx, 0);
-      if (next) pictureSV.value = next;
+      if (next) applyFrame(next);
       maybeStartAnim();
       if (Math.abs(velocity) > MIN_STOP) {
         decayRaf.current = requestAnimationFrame(tick);
@@ -977,7 +1001,7 @@ function VroomChart(props) {
     }
     if (frameX === 1 && frameY === 1) return;
     const next = handle.zoom(frameX, frameY, focalX, focalY);
-    if (next) pictureSV.value = next;
+    if (next) applyFrame(next);
     maybeStartAnim();
   });
   const longPress = import_react_native_gesture_handler.Gesture.LongPress().runOnJS(true).onStart((e) => {
@@ -987,7 +1011,7 @@ function VroomChart(props) {
     cancelDecay();
     crosshairActive.current = true;
     const ch = handle.setCrosshair(e.x, e.y - crosshairOffset);
-    if (ch) pictureSV.value = ch;
+    if (ch) applyFrame(ch);
     const info = handle.getCrosshairInfo();
     lastCrosshairTime.current = info?.timeMs ?? null;
     onCrosshair?.({
@@ -1010,7 +1034,7 @@ function VroomChart(props) {
     if (hitAxis(e.x, e.y) !== "chart") return;
     crosshairActive.current = false;
     const ch = handle.clearCrosshair();
-    if (ch) pictureSV.value = ch;
+    if (ch) applyFrame(ch);
     lastCrosshairTime.current = null;
     onCrosshair?.({ active: false, candle: null, timeMs: null, price: null, reason: "hide" });
   });
@@ -1025,11 +1049,17 @@ function VroomChart(props) {
         style
       ]
     },
-    /* @__PURE__ */ import_react2.default.createElement(import_react_native_gesture_handler.GestureDetector, { gesture }, /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, { style: { flex: 1 } }, /* @__PURE__ */ import_react2.default.createElement(import_react_native_skia.Canvas, { style: { flex: 1 } }, width > 0 && height > 0 ? (
-      // pictureSV is always a valid picture (seeded empty, never null),
-      // so RN-Skia's UI-thread reader never sees null.
-      /* @__PURE__ */ import_react2.default.createElement(import_react_native_skia.Picture, { picture: pictureSV })
-    ) : null)))
+    /* @__PURE__ */ import_react2.default.createElement(import_react_native_gesture_handler.GestureDetector, { gesture }, /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, { style: { flex: 1 } }, /* @__PURE__ */ import_react2.default.createElement(import_react_native_skia.Canvas, { style: { flex: 1 } }, width > 0 && height > 0 ? /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(import_react_native_skia.Picture, { picture: pictureSV }), /* @__PURE__ */ import_react2.default.createElement(
+      import_react_native_skia.Image,
+      {
+        image: imageSV,
+        x: 0,
+        y: 0,
+        width,
+        height,
+        fit: "fill"
+      }
+    )) : null)))
   );
 }
 // Annotate the CommonJS export names for ESM import in node: