@shopify/react-native-skia 1.5.7 → 1.5.9

package/src/views/SkiaJSDomView.tsx

@@ -7,19 +7,29 @@ import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeCompon
 import { JsiDrawingContext } from "../dom/types";
 
 import { SkiaViewApi } from "./api";
-import type { SkiaPictureViewProps, SkiaDomViewProps } from "./types";
+import type {
+  SkiaPictureViewNativeProps,
+  SkiaDomViewNativeProps,
+} from "./types";
 import { SkiaViewNativeId } from "./SkiaViewNativeId";
 
-const NativeSkiaPictureView: HostComponent<SkiaPictureViewProps> =
+const NativeSkiaPictureView: HostComponent<SkiaPictureViewNativeProps> =
   Platform.OS !== "web"
     ? SkiaPictureViewNativeComponent
     : // eslint-disable-next-line @typescript-eslint/no-explicit-any
       (null as any);
 
-export class SkiaJSDomView extends React.Component<
-  SkiaDomViewProps & { Skia: Skia }
-> {
-  constructor(props: SkiaDomViewProps & { Skia: Skia }) {
+interface SkiaDomViewProps extends SkiaDomViewNativeProps {
+  mode?: "default" | "continuous";
+}
+
+type SkiaJSDomViewProps = SkiaDomViewProps & {
+  Skia: Skia;
+  mode?: "default" | "continuous";
+};
+
+export class SkiaJSDomView extends React.Component<SkiaJSDomViewProps> {
+  constructor(props: SkiaJSDomViewProps) {
     super(props);
     this._nativeId = SkiaViewNativeId.current++;
     const { root, onSize } = props;
@@ -31,9 +41,18 @@ export class SkiaJSDomView extends React.Component<
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
     }
+    this.tick();
   }
 
   private _nativeId: number;
+  private requestId = 0;
+
+  private tick() {
+    this.redraw();
+    if (this.props.mode === "continuous") {
+      this.requestId = requestAnimationFrame(this.tick.bind(this));
+    }
+  }
 
   public get nativeId() {
     return this._nativeId;
@@ -49,6 +68,7 @@ export class SkiaJSDomView extends React.Component<
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
     }
+    this.tick();
   }
 
   /**
@@ -67,7 +87,6 @@ export class SkiaJSDomView extends React.Component<
   public redraw() {
     assertSkiaViewApi();
     this.draw();
-    //SkiaViewApi.requestRedraw(this._nativeId);
   }
 
   private draw() {
@@ -89,15 +108,17 @@ export class SkiaJSDomView extends React.Component<
   componentWillUnmount(): void {
     assertSkiaViewApi();
     SkiaViewApi.setJsiProperty(this._nativeId, "picture", null);
+    if (this.requestId) {
+      cancelAnimationFrame(this.requestId);
+    }
   }
 
   render() {
-    const { mode, debug = false, ...viewProps } = this.props;
+    const { debug = false, ...viewProps } = this.props;
     return (
       <NativeSkiaPictureView
         collapsable={false}
         nativeID={`${this._nativeId}`}
-        mode={mode}
         debug={debug}
         {...viewProps}
       />

package/src/views/SkiaPictureView.tsx

@@ -4,12 +4,18 @@ import type { SkRect } from "../skia/types";
 import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
 
 import { SkiaViewApi } from "./api";
-import type { SkiaPictureViewProps } from "./types";
+import type { SkiaPictureViewNativeProps } from "./types";
 import { SkiaViewNativeId } from "./SkiaViewNativeId";
 
 const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
 
+interface SkiaPictureViewProps extends SkiaPictureViewNativeProps {
+  mode?: "default" | "continuous";
+}
+
 export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
+  private requestId = 0;
+
   constructor(props: SkiaPictureViewProps) {
     super(props);
     this._nativeId = SkiaViewNativeId.current++;
@@ -22,6 +28,7 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
     }
+    this.tick();
   }
 
   private _nativeId: number;
@@ -40,6 +47,20 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
     }
+    this.tick();
+  }
+
+  componentWillUnmount() {
+    if (this.requestId) {
+      cancelAnimationFrame(this.requestId);
+    }
+  }
+
+  private tick() {
+    this.redraw();
+    if (this.props.mode === "continuous") {
+      this.requestId = requestAnimationFrame(this.tick.bind(this));
+    }
   }
 
   /**
@@ -66,7 +87,6 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
       <NativeSkiaPictureView
         collapsable={false}
         nativeID={`${this._nativeId}`}
-        mode={mode ?? "default"}
         debug={debug}
         {...viewProps}
       />

package/src/views/SkiaPictureView.web.tsx

@@ -1,10 +1,10 @@
 import type { SkCanvas } from "../skia/types";
 
-import type { SkiaPictureViewProps } from "./types";
+import type { SkiaPictureViewNativeProps } from "./types";
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
 
-export class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewProps> {
-  constructor(props: SkiaPictureViewProps) {
+export class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewNativeProps> {
+  constructor(props: SkiaPictureViewNativeProps) {
     super(props);
   }
 

package/src/views/types.ts

@@ -4,10 +4,7 @@ import type { GroupProps, RenderNode } from "../dom/types";
 import type { SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
 import type { SharedValueType } from "../renderer/processors/Animations/Animations";
 
-export type DrawMode = "continuous" | "default";
-
 export type NativeSkiaViewProps = ViewProps & {
-  mode?: DrawMode;
   debug?: boolean;
 };
 
@@ -25,14 +22,6 @@ export interface ISkiaViewApi {
 }
 
 export interface SkiaBaseViewProps extends ViewProps {
-  /**
-   * Sets the drawing mode for the skia view. There are two drawing
-   * modes, "continuous" and "default", where the continuous mode will
-   * continuously redraw the view, and the default mode will only
-   * redraw when any of the regular react properties are changed like
-   * sizes and margins.
-   */
-  mode?: DrawMode;
   /**
    * When set to true the view will display information about the
    * average time it takes to render.
@@ -45,10 +34,10 @@ export interface SkiaBaseViewProps extends ViewProps {
   onSize?: SharedValueType<SkSize>;
 }
 
-export interface SkiaPictureViewProps extends SkiaBaseViewProps {
+export interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {
   picture?: SkPicture;
 }
 
-export interface SkiaDomViewProps extends SkiaBaseViewProps {
+export interface SkiaDomViewNativeProps extends SkiaBaseViewProps {
   root?: RenderNode<GroupProps>;
 }

package/cpp/rnskia/RNSkDispatchQueue.cpp

@@ -1,73 +0,0 @@
-#include "RNSkDispatchQueue.h"
-
-#include <memory>
-#include <mutex>
-#include <utility>
-
-namespace RNSkia {
-
-RNSkDispatchQueue::~RNSkDispatchQueue() {
-  // Signal to dispatch threads that it's time to wrap up
-  std::unique_lock<std::mutex> lock(lock_);
-  quit_ = true;
-  lock.unlock();
-  cv_.notify_all();
-
-  // Wait for threads to finish before we exit
-  for (size_t i = 0; i < threads_.size(); i++) {
-    if (threads_[i].joinable()) {
-      threads_[i].join();
-    }
-  }
-}
-
-RNSkDispatchQueue::RNSkDispatchQueue(std::string name, size_t thread_cnt)
-    : name_{std::move(name)}, threads_(thread_cnt) {
-  for (size_t i = 0; i < threads_.size(); i++) {
-    threads_[i] =
-        std::thread(&RNSkDispatchQueue::dispatch_thread_handler, this);
-  }
-}
-
-void RNSkDispatchQueue::dispatch(const fp_t &op) {
-  std::unique_lock<std::mutex> lock(lock_);
-  q_.push(op);
-
-  // Manual unlocking is done before notifying, to avoid waking up
-  // the waiting thread only to block again (see notify_one for details)
-  lock.unlock();
-  cv_.notify_one();
-}
-
-void RNSkDispatchQueue::dispatch(fp_t &&op) {
-  std::unique_lock<std::mutex> lock(lock_);
-  q_.push(std::move(op));
-
-  // Manual unlocking is done before notifying, to avoid waking up
-  // the waiting thread only to block again (see notify_one for details)
-  lock.unlock();
-  cv_.notify_one();
-}
-
-void RNSkDispatchQueue::dispatch_thread_handler(void) {
-  std::unique_lock<std::mutex> lock(lock_);
-
-  do {
-    // Wait until we have data or a quit signal
-    cv_.wait(lock, [this] { return (q_.size() || quit_); });
-
-    // after wait, we own the lock
-    if (!quit_ && q_.size()) {
-      auto op = std::move(q_.front());
-      q_.pop();
-
-      // unlock now that we're done messing with the queue
-      lock.unlock();
-
-      op();
-
-      lock.lock();
-    }
-  } while (!quit_);
-}
-} // namespace RNSkia

package/cpp/rnskia/RNSkDispatchQueue.h

@@ -1,49 +0,0 @@
-#pragma once
-
-#include <condition_variable>
-#include <cstdint>
-#include <cstdio>
-#include <functional>
-#include <mutex>
-#include <queue>
-#include <string>
-#include <thread>
-#include <vector>
-
-// https://github.com/embeddedartistry/embedded-resources/blob/master/examples/cpp/dispatch.cpp
-namespace RNSkia {
-
-class RNSkDispatchQueue {
-  typedef std::function<void(void)> fp_t;
-
-public:
-  explicit RNSkDispatchQueue(std::string name, size_t thread_cnt = 1);
-
-  ~RNSkDispatchQueue();
-
-  // dispatch and copy
-  void dispatch(const fp_t &op);
-
-  // dispatch and move
-  void dispatch(fp_t &&op);
-
-  // Deleted operations
-  RNSkDispatchQueue(const RNSkDispatchQueue &rhs) = delete;
-
-  RNSkDispatchQueue &operator=(const RNSkDispatchQueue &rhs) = delete;
-
-  RNSkDispatchQueue(RNSkDispatchQueue &&rhs) = delete;
-
-  RNSkDispatchQueue &operator=(RNSkDispatchQueue &&rhs) = delete;
-
-private:
-  std::string name_;
-  std::mutex lock_;
-  std::vector<std::thread> threads_;
-  std::queue<fp_t> q_;
-  std::condition_variable cv_;
-  bool quit_ = false;
-
-  void dispatch_thread_handler(void);
-};
-} // namespace RNSkia

package/ios/RNSkia-iOS/DisplayLink.h

@@ -1,17 +0,0 @@
-#pragma once
-
-#import <CoreFoundation/CoreFoundation.h>
-#import <UIKit/UIKit.h>
-
-typedef void (^block_t)(double);
-@interface DisplayLink : NSObject {
-  CADisplayLink *_displayLink;
-}
-
-@property(nonatomic, copy) block_t updateBlock;
-
-- (void)start:(block_t)block;
-
-- (void)stop;
-
-@end

package/ios/RNSkia-iOS/DisplayLink.mm

@@ -1,41 +0,0 @@
-#import "DisplayLink.h"
-
-@implementation DisplayLink
-
-- (void)start:(block_t)block {
-  self.updateBlock = block;
-  // check whether the loop is already running
-  if (_displayLink == nil) {
-    // specify update method
-    _displayLink = [CADisplayLink displayLinkWithTarget:self
-                                               selector:@selector(update:)];
-
-    if (@available(iOS 15.0, *)) {
-      CAFrameRateRange rate = CAFrameRateRangeMake(60, 120, 120);
-      _displayLink.preferredFrameRateRange = rate;
-    } else {
-      _displayLink.preferredFramesPerSecond = 60;
-    }
-
-    // add the display link to the main run loop
-    [_displayLink addToRunLoop:[NSRunLoop mainRunLoop]
-                       forMode:NSRunLoopCommonModes];
-  }
-}
-
-- (void)stop {
-  // check whether the loop is already stopped
-  if (_displayLink != nil) {
-    // if the display link is present, it gets invalidated (loop stops)
-
-    [_displayLink invalidate];
-    _displayLink = nil;
-  }
-}
-
-- (void)update:(CADisplayLink *)sender {
-  double time = [sender timestamp];
-  _updateBlock(time);
-}
-
-@end