fix(🐛): fix regression with onSize on RN Web (#3574)

Author: wcandillon

apps/example/src/Examples/API/UseCanvas.tsx

@@ -9,12 +9,18 @@ import {
  polar2Canvas,
  vec,
 } from "@shopify/react-native-skia";
-import React, { useEffect, useRef } from "react";
-import { View, Animated } from "react-native";
+import React, { useEffect } from "react";
+import { View } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import { useContextBridge } from "its-fine";
 import type { SharedValue } from "react-native-reanimated";
-import { useDerivedValue, useSharedValue } from "react-native-reanimated";
+import Animated, {
+ useDerivedValue,
+ useSharedValue,
+ useAnimatedStyle,
+ withRepeat,
+ withTiming,
+} from "react-native-reanimated";
 
 import { useLoop } from "../../components/Animations";
 
@@ -58,9 +64,10 @@ const Ring = ({ index, progress, size }: RingProps) => {
 };
 
 const BreatheDemo = ({ size }: SizeProps) => {
- const center = useDerivedValue(() =>
- vec(size.value.width / 2, size.value.height / 2 - 64)
- );
+ const center = useDerivedValue(() => {
+ console.log(size.value);
+ return vec(size.value.width / 2, size.value.height / 2 - 64);
+ });
 
  const progress = useLoop({ duration: 3000 });
 
@@ -98,25 +105,26 @@ const MyComp = ({ size }: SizeProps) => {
 export const UseCanvas = () => {
  const Bridge = useContextBridge();
  const size = useSharedValue({ width: 0, height: 0 });
- const height = useRef(new Animated.Value(0));
+ const height = useSharedValue(0);
+
  useEffect(() => {
- Animated.loop(
- Animated.timing(height.current, {
- toValue: 500,
- duration: 4000,
- useNativeDriver: false,
- })
- ).start();
- }, []);
+ height.value = withRepeat(withTiming(500, { duration: 4000 }), -1, true);
+ }, [height]);
+
+ const animatedStyle = useAnimatedStyle(() => ({
+ height: height.value,
+ }));
 
  return (
  <View style={{ flex: 1 }}>
- <Canvas style={{ flex: 1 }} onSize={size}>
- <Bridge>
- <MyComp size={size} />
- </Bridge>
- </Canvas>
- <Animated.View style={{ height: height.current }} />
+ <View style={{ flex: 1 }}>
+ <Canvas style={{ flex: 1 }} onSize={size}>
+ <Bridge>
+ <MyComp size={size} />
+ </Bridge>
+ </Canvas>
+ </View>
+ <Animated.View style={animatedStyle} />
  </View>
  );
 };

packages/skia/src/renderer/Canvas.tsx

@@ -103,7 +103,17 @@ export const Canvas = ({
  useReanimatedFrame(() => {
  "worklet";
  if (onSize && measure) {
- const result = measure(viewRef as AnimatedRef<View>);
+ const result =
+ // eslint-disable-next-line no-nested-ternary
+ Platform.OS === "web"
+ ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-expect-error
+ viewRef.current?.canvasRef
+ ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-expect-error
+ measure(viewRef.current.canvasRef)
+ : { width: 0, height: 0 }
+ : measure(viewRef as AnimatedRef<View>);
  if (result) {
  const { width, height } = result;
  if (onSize.value.width !== width || onSize.value.height !== height) {

packages/skia/src/views/SkiaPictureView.web.tsx

@@ -224,6 +224,19 @@ export interface SkiaPictureViewHandle {
  getSize(): { width: number; height: number };
  redraw(): void;
  makeImageSnapshot(rect?: SkRect): SkImage | null;
+ measure(
+ callback: (
+ x: number,
+ y: number,
+ width: number,
+ height: number,
+ pageX: number,
+ pageY: number
+ ) => void
+ ): void;
+ measureInWindow(
+ callback: (x: number, y: number, width: number, height: number) => void
+ ): void;
 }
 
 export const SkiaPictureView = forwardRef<
@@ -264,6 +277,56 @@ export const SkiaPictureView = forwardRef<
  return null;
  }, []);
 
+ const measure = useCallback(
+ (
+ callback: (
+ x: number,
+ y: number,
+ width: number,
+ height: number,
+ pageX: number,
+ pageY: number
+ ) => void
+ ) => {
+ if (canvasRef.current) {
+ const rect = canvasRef.current.getBoundingClientRect();
+ const parentElement = canvasRef.current.offsetParent as HTMLElement;
+ const parentRect = parentElement?.getBoundingClientRect() || {
+ left: 0,
+ top: 0,
+ };
+
+ // x, y are relative to the parent
+ const x = rect.left - parentRect.left;
+ const y = rect.top - parentRect.top;
+
+ // pageX, pageY are absolute screen coordinates
+ const pageX = rect.left + window.scrollX;
+ const pageY = rect.top + window.scrollY;
+
+ callback(x, y, rect.width, rect.height, pageX, pageY);
+ }
+ },
+ []
+ );
+
+ const measureInWindow = useCallback(
+ (
+ callback: (x: number, y: number, width: number, height: number) => void
+ ) => {
+ if (canvasRef.current) {
+ const rect = canvasRef.current.getBoundingClientRect();
+
+ // x, y are the absolute coordinates in the window
+ const x = rect.left;
+ const y = rect.top;
+
+ callback(x, y, rect.width, rect.height);
+ }
+ },
+ []
+ );
+
  const tick = useCallback(() => {
  if (redrawRequestsRef.current > 0) {
  redrawRequestsRef.current = 0;
@@ -300,8 +363,13 @@ export const SkiaPictureView = forwardRef<
  getSize,
  redraw,
  makeImageSnapshot,
+ measure,
+ measureInWindow,
+ get canvasRef() {
+ return () => canvasRef.current;
+ },
  }),
- [setPicture, getSize, redraw, makeImageSnapshot]
+ [setPicture, getSize, redraw, makeImageSnapshot, measure, measureInWindow]
  );
 
  useEffect(() => {
@@ -311,8 +379,18 @@ export const SkiaPictureView = forwardRef<
  getSize,
  redraw,
  makeImageSnapshot,
+ measure,
+ measureInWindow,
  } as SkiaPictureViewHandle);
- }, [setPicture, getSize, redraw, makeImageSnapshot, props.nativeID]);
+ }, [
+ setPicture,
+ getSize,
+ redraw,
+ makeImageSnapshot,
+ measure,
+ measureInWindow,
+ props.nativeID,
+ ]);
 
  useEffect(() => {
  if (props.picture) {