Fixed?

marblemedia · Nov 14, 2023 · 2d6a0a9 · 2d6a0a9
1 parent 081f7a7
commit 2d6a0a9
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 14 deletions.
diff --git a/example/src/Examples/Breathe/Breathe.tsx b/example/src/Examples/Breathe/Breathe.tsx
@@ -43,7 +43,7 @@ const ClockBreathe = () => {
     }, []);
 
     return (
-        <Canvas style={{flex: 1}} debug mode="continuous">
+        <Canvas style={{flex: 1}}>
             <Fill color={color} />
         </Canvas>
     );
@@ -408,4 +408,84 @@ const Breathe10 = () => {
     );
 };
 
-export const Breathe = Breathe10;
+const Breathe11 = () => {
+    const clock = useClockValue();
+    const frame = useComputedValue((): number => {
+        return (frame?.current ?? 0) + 1;
+    }, [clock]);
+    // useFrameCallback(() => {
+    //     frame.value = (frame.value + 1) % Number.MAX_SAFE_INTEGER;
+    // });
+
+    const color = useComputedValue(() => (frame.current % 2 === 0 ? c2 : c1), [frame]);
+    const touches = useValue<{id: number; x: number; y: number}[]>([]);
+    const transform = useComputedValue((): Transforms2d => {
+        const x = touches.current[0]?.x ?? 0;
+        const y = touches.current[0]?.y ?? 0;
+        return [
+            {translateX: x - halfSize},
+            {translateY: y - halfSize},
+            {rotate: frame.current / 100},
+        ];
+    }, [touches, frame]);
+
+    const handleTouch: TouchHandler = React.useCallback((t) => {
+        touches.current = t[0];
+    }, []);
+
+    return (
+        <Canvas style={{flex: 1}} onTouch={handleTouch}>
+            <Group transform={transform} origin={origin}>
+                <Rect x={0} y={-100} width={halfSize * 2} height={halfSize * 2} />
+                <Rect x={0} y={0} width={halfSize * 2} color={color} height={halfSize * 2} />
+                <Rect x={0} y={100} width={halfSize * 2} height={halfSize * 2} />
+                <Rect x={-100} y={0} width={halfSize * 2} height={halfSize * 2} />
+                <Rect x={100} y={0} width={halfSize * 2} height={halfSize * 2} />
+            </Group>
+        </Canvas>
+    );
+};
+
+const Breathe12 = () => {
+    const frame = useSharedValue(0);
+    useFrameCallback(() => {
+        frame.value = (frame.value + 1) % Number.MAX_SAFE_INTEGER;
+    });
+
+    const touches = useSharedValue<{id: number; x: number; y: number}[]>([]);
+
+    // const color = useComputedValue(() => (frame.current % 2 === 0 ? c2 : c1), [frame]);
+    const transform = useDerivedValue((): Transforms2d => {
+        const x = touches.value[0]?.x ?? 0;
+        const y = touches.value[0]?.y ?? 0;
+        return [
+            {translateX: x - halfSize},
+            {translateY: y - halfSize},
+            // {rotate: frame.value / 100},
+        ];
+    });
+
+    const gesture = Gesture.Native()
+        .onTouchesDown(({changedTouches}) => {
+            touches.value = changedTouches;
+        })
+        .onTouchesMove(({changedTouches}) => {
+            touches.value = changedTouches;
+        });
+
+    return (
+        <GestureDetector gesture={gesture}>
+            <Canvas style={{flex: 1}}>
+                <Group transform={transform} origin={origin}>
+                    <Rect x={0} y={-100} width={halfSize * 2} height={halfSize * 2} />
+                    <Rect x={0} y={0} width={halfSize * 2} height={halfSize * 2} />
+                    <Rect x={0} y={100} width={halfSize * 2} height={halfSize * 2} />
+                    <Rect x={-100} y={0} width={halfSize * 2} height={halfSize * 2} />
+                    <Rect x={100} y={0} width={halfSize * 2} height={halfSize * 2} />
+                </Group>
+            </Canvas>
+        </GestureDetector>
+    );
+};
+
+export const Breathe = Breathe11;
diff --git a/package/android/cpp/rnskia-android/RNSkAndroidPlatformContext.h b/package/android/cpp/rnskia-android/RNSkAndroidPlatformContext.h
@@ -28,8 +28,10 @@ class RNSkAndroidPlatformContext : public RNSkPlatformContext {
                             jniPlatformContext->getPixelDensity()),
         _jniPlatformContext(jniPlatformContext) {
     // Hook onto the notify draw loop callback in the platform context
-    jniPlatformContext->setOnNotifyDrawLoop(
-        [this]() { notifyDrawLoop(false); });
+    jniPlatformContext->setOnNotifyDrawLoop([this]() {
+      // On Android we delegate all rendering to a separate thread
+      runOnRenderThread([&]() { this->notifyDrawLoop(false); });
+    });
   }
 
   ~RNSkAndroidPlatformContext() { stopDrawLoop(); }

diff --git a/package/android/src/main/java/com/shopify/reactnative/skia/PlatformContext.java b/package/android/src/main/java/com/shopify/reactnative/skia/PlatformContext.java
@@ -54,7 +54,7 @@ public void doFrame(long frameTimeNanos) {
             };
         }
         ReactChoreographer.getInstance().postFrameCallback(
-                ReactChoreographer.CallbackType.IDLE_EVENT,
+                ReactChoreographer.CallbackType.PERF_MARKERS,
                 mChoreographerCallback);
     }
 
@@ -122,7 +122,7 @@ public void endDrawLoop() {
         if (_drawLoopActive) {
             _drawLoopActive = false;
             ReactChoreographer.getInstance().removeFrameCallback(
-                ReactChoreographer.CallbackType.IDLE_EVENT, mChoreographerCallback);
+                ReactChoreographer.CallbackType.PERF_MARKERS, mChoreographerCallback);
         }
     }
 

diff --git a/package/android/src/main/java/com/shopify/reactnative/skia/SkiaBaseView.java b/package/android/src/main/java/com/shopify/reactnative/skia/SkiaBaseView.java
@@ -26,8 +26,6 @@ public SkiaBaseView(Context context, boolean manageTexture) {
         mTexture = new TextureView(context);
         mTexture.setSurfaceTextureListener(this);
         mTexture.setOpaque(false);
-        SurfaceTexture surface = new SurfaceTexture(false);
-        mTexture.setSurfaceTexture(surface);
         addView(mTexture);
     }
 
@@ -44,8 +42,9 @@ private void createSurfaceTexture() {
         if (manageTexture) {
             // This API Level is >= 26, we created our own SurfaceTexture to have a faster time to first frame
             if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O) {
-                Log.i(tag, "Create SurfaceTexture");
-                SurfaceTexture surface = mTexture.getSurfaceTexture();
+                Log.i(tag, "Create SurfaceTexture");                
+                SurfaceTexture surface = new SurfaceTexture(false);
+                mTexture.setSurfaceTexture(surface);
                 this.onSurfaceTextureAvailable(surface, this.getMeasuredWidth(), this.getMeasuredHeight());
             }
         }

diff --git a/package/cpp/rnskia/RNSkPlatformContext.h b/package/cpp/rnskia/RNSkPlatformContext.h
@@ -179,7 +179,7 @@ class RNSkPlatformContext {
     }
     auto shouldStart = false;
     {
-      // std::lock_guard<std::mutex> lock(_drawCallbacksLock);
+      std::lock_guard<std::mutex> lock(_drawCallbacksLock);
       _drawCallbacks.emplace(nativeId, std::move(callback));
       shouldStart = _drawCallbacks.size() == 1;
     }
@@ -201,7 +201,7 @@ class RNSkPlatformContext {
     }
     auto shouldStop = false;
     {
-      // std::lock_guard<std::mutex> lock(_drawCallbacksLock);
+      std::lock_guard<std::mutex> lock(_drawCallbacksLock);
       if (_drawCallbacks.count(nativeId) > 0) {
         _drawCallbacks.erase(nativeId);
       }
@@ -222,7 +222,7 @@ class RNSkPlatformContext {
     if (!_isValid) {
       return;
     }
-    // std::lock_guard<std::mutex> lock(_drawCallbacksLock);
+    std::lock_guard<std::mutex> lock(_drawCallbacksLock);
     for (auto it = _drawCallbacks.begin(); it != _drawCallbacks.end(); it++) {
       it->second(invalidated);
     }

diff --git a/package/cpp/rnskia/RNSkView.h b/package/cpp/rnskia/RNSkView.h
@@ -402,7 +402,7 @@ class RNSkView : public std::enable_shared_from_this<RNSkView> {
   size_t _nativeId;
 
   size_t _drawingLoopId = 0;
-  int _redrawRequestCounter = 0;
+  std::atomic<int> _redrawRequestCounter = {1};
 };
 
 } // namespace RNSkia