Can i forward ref WithSkiaWeb

[lucas-garrido]

Hello !
How can i forward The SketchCanvas ref component ?

its causing me this kind of issue

[lucas-garrido]

in fact i cant pass any props to the web component, is this the expected behaviour ?

[wcandillon]

How does the SketchCanvas looks like? it seems to be the source of error?

[lucas-garrido]

Minimal example :
I create a canvas component taking some props =>

Canvas.tsx

Then the web wrapper =>

index.web.tsx

And finally

I will be able to access the props in the web wrapper but not in the canvas component

mb im missing something ?

[wcandillon]

Got it. Currently this is not supported. Is there a way you could rewrite your app to not need to pass properties to the getComponent object? For instance using this method: https://shopify.github.io/react-native-skia/docs/getting-started/web#using-defered-component-registration

Now here's a workaround. You can take the code from: https://github.com/Shopify/react-native-skia/blob/main/package/src/web/WithSkiaWeb.tsx (LoadSkiaWeb is available via @shopify/react-native-skia/lib/module/web and Platform, you can import from react-native is you use react native web or this not it means you are running web). And modify this code to have a props property which you can pass down to <Inner />.

If this works for you, we will be happy to merge the change upstream to React Native Skia.

I hope this helps, let me know.

[lucas-garrido]

Thanks ! I will try this 👌

[lucas-garrido]

so something like this seems to do the job, i will let you know if everything is ok

import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/module/web";
import type { ComponentProps, ComponentType } from "react";
import { useMemo, lazy, Suspense, forwardRef } from "react";
import { Platform } from "react-native";

interface WithSkiaProps {
  fallback?: ComponentProps<typeof Suspense>["fallback"];
  getComponent: () => Promise<{ default: ComponentType }>;
  opts?: Parameters<typeof LoadSkiaWeb>[0];
}

const WithSkiaWeb = forwardRef(({ getComponent, fallback, opts, ...rest }: WithSkiaProps, ref) => {
  const Inner = useMemo(
    // TODO: investigate
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    (): any =>
      lazy(async () => {
        if (Platform.OS === "web") {
          await LoadSkiaWeb(opts);
        } else {
          // eslint-disable-next-line no-console
          console.warn("<WithSkiaWeb /> is only necessary on web. Consider not using on native.");
        }
        return getComponent();
      }),
    [getComponent, opts],
  );

  return (
    <Suspense fallback={fallback ?? null}>
      <Inner {...rest} ref={ref} />
    </Suspense>
  );
});

WithSkiaWeb.displayName = "WithSkiaWeb";
export { WithSkiaWeb };

[YOEL311]

hey
what about that?
I would appreciate it if the issue could be resolved.
In the meantime, I am using this temporary solution.

diff --git a/node_modules/@shopify/react-native-skia/lib/module/web/WithSkiaWeb.d.ts b/node_modules/@shopify/react-native-skia/lib/module/web/WithSkiaWeb.d.ts
index 596482a..4cde392 100644
--- a/node_modules/@shopify/react-native-skia/lib/module/web/WithSkiaWeb.d.ts
+++ b/node_modules/@shopify/react-native-skia/lib/module/web/WithSkiaWeb.d.ts
@@ -1,12 +1,19 @@
 import type { ComponentProps, ComponentType } from "react";
 import React, { Suspense } from "react";
 import { LoadSkiaWeb } from "./LoadSkiaWeb";
-interface WithSkiaProps {
+type NonOptionalKeys<T> = {
+    [k in keyof T]-?: undefined extends T[k] ? never : k;
+}[keyof T];
+type WithSkiaProps<TProps> = {
     fallback?: ComponentProps<typeof Suspense>["fallback"];
     getComponent: () => Promise<{
-        default: ComponentType;
+        default: ComponentType<TProps>;
     }>;
     opts?: Parameters<typeof LoadSkiaWeb>[0];
-}
-export declare const WithSkiaWeb: ({ getComponent, fallback, opts, }: WithSkiaProps) => React.JSX.Element;
+} & (NonOptionalKeys<TProps> extends never ? {
+    componentProps?: TProps;
+} : {
+    componentProps: TProps;
+});
+export declare const WithSkiaWeb: <TProps = {}>({ getComponent, fallback, opts, componentProps, }: WithSkiaProps<TProps>) => React.JSX.Element;
 export {};
diff --git a/node_modules/@shopify/react-native-skia/lib/module/web/WithSkiaWeb.js b/node_modules/@shopify/react-native-skia/lib/module/web/WithSkiaWeb.js
index d6b51cb..b9fe7b0 100644
--- a/node_modules/@shopify/react-native-skia/lib/module/web/WithSkiaWeb.js
+++ b/node_modules/@shopify/react-native-skia/lib/module/web/WithSkiaWeb.js
@@ -4,7 +4,8 @@ import { LoadSkiaWeb } from "./LoadSkiaWeb";
 export const WithSkiaWeb = ({
   getComponent,
   fallback,
-  opts
+  opts,
+  componentProps
 }) => {
   const Inner = useMemo(
   // TODO: investigate
@@ -19,6 +20,6 @@ export const WithSkiaWeb = ({
   }), [getComponent, opts]);
   return /*#__PURE__*/React.createElement(Suspense, {
     fallback: fallback !== null && fallback !== void 0 ? fallback : null
-  }, /*#__PURE__*/React.createElement(Inner, null));
+  }, /*#__PURE__*/React.createElement(Inner, componentProps));
 };
 //# sourceMappingURL=WithSkiaWeb.js.map
\ No newline at end of file
diff --git a/node_modules/@shopify/react-native-skia/lib/typescript/src/web/WithSkiaWeb.d.ts b/node_modules/@shopify/react-native-skia/lib/typescript/src/web/WithSkiaWeb.d.ts
index 596482a..4cde392 100644
--- a/node_modules/@shopify/react-native-skia/lib/typescript/src/web/WithSkiaWeb.d.ts
+++ b/node_modules/@shopify/react-native-skia/lib/typescript/src/web/WithSkiaWeb.d.ts
@@ -1,12 +1,19 @@
 import type { ComponentProps, ComponentType } from "react";
 import React, { Suspense } from "react";
 import { LoadSkiaWeb } from "./LoadSkiaWeb";
-interface WithSkiaProps {
+type NonOptionalKeys<T> = {
+    [k in keyof T]-?: undefined extends T[k] ? never : k;
+}[keyof T];
+type WithSkiaProps<TProps> = {
     fallback?: ComponentProps<typeof Suspense>["fallback"];
     getComponent: () => Promise<{
-        default: ComponentType;
+        default: ComponentType<TProps>;
     }>;
     opts?: Parameters<typeof LoadSkiaWeb>[0];
-}
-export declare const WithSkiaWeb: ({ getComponent, fallback, opts, }: WithSkiaProps) => React.JSX.Element;
+} & (NonOptionalKeys<TProps> extends never ? {
+    componentProps?: TProps;
+} : {
+    componentProps: TProps;
+});
+export declare const WithSkiaWeb: <TProps = {}>({ getComponent, fallback, opts, componentProps, }: WithSkiaProps<TProps>) => React.JSX.Element;
 export {};
diff --git a/node_modules/@shopify/react-native-skia/src/web/WithSkiaWeb.tsx b/node_modules/@shopify/react-native-skia/src/web/WithSkiaWeb.tsx
index 1a94048..e2a188d 100644
--- a/node_modules/@shopify/react-native-skia/src/web/WithSkiaWeb.tsx
+++ b/node_modules/@shopify/react-native-skia/src/web/WithSkiaWeb.tsx
@@ -5,17 +5,26 @@ import { Platform } from "../Platform";
 
 import { LoadSkiaWeb } from "./LoadSkiaWeb";
 
-interface WithSkiaProps {
+type NonOptionalKeys<T> = {
+	[k in keyof T]-?: undefined extends T[k] ? never : k;
+}[keyof T];
+
+type WithSkiaProps<TProps> = {
   fallback?: ComponentProps<typeof Suspense>["fallback"];
-  getComponent: () => Promise<{ default: ComponentType }>;
+  getComponent: () => Promise<{ default: ComponentType<TProps> }>;
   opts?: Parameters<typeof LoadSkiaWeb>[0];
-}
+} & (NonOptionalKeys<TProps> extends never ? {
+  componentProps?: TProps;
+} : {
+  componentProps: TProps;
+})
 
-export const WithSkiaWeb = ({
+export const WithSkiaWeb = <TProps = {}>({
   getComponent,
   fallback,
   opts,
-}: WithSkiaProps) => {
+  componentProps,
+}: WithSkiaProps<TProps>) => {
   const Inner = useMemo(
     // TODO: investigate
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -34,7 +43,7 @@ export const WithSkiaWeb = ({
   );
   return (
     <Suspense fallback={fallback ?? null}>
-      <Inner />
+      <Inner {...componentProps} />
     </Suspense>
   );
 };
\ No newline at end of file
diff --git a/node_modules/@shopify/react-native-skia/lib/module/web/WithSkiaWeb.d.ts b/node_modules/@shopify/react-native-skia/lib/module/web/WithSkiaWeb.d.ts
index 596482a..4cde392 100644
--- a/node_modules/@shopify/react-native-skia/lib/module/web/WithSkiaWeb.d.ts
+++ b/node_modules/@shopify/react-native-skia/lib/module/web/WithSkiaWeb.d.ts
@@ -1,12 +1,19 @@
 import type { ComponentProps, ComponentType } from "react";
 import React, { Suspense } from "react";
 import { LoadSkiaWeb } from "./LoadSkiaWeb";
-interface WithSkiaProps {
+type NonOptionalKeys<T> = {
+    [k in keyof T]-?: undefined extends T[k] ? never : k;
+}[keyof T];
+type WithSkiaProps<TProps> = {
     fallback?: ComponentProps<typeof Suspense>["fallback"];
     getComponent: () => Promise<{
-        default: ComponentType;
+        default: ComponentType<TProps>;
     }>;
     opts?: Parameters<typeof LoadSkiaWeb>[0];
-}
-export declare const WithSkiaWeb: ({ getComponent, fallback, opts, }: WithSkiaProps) => React.JSX.Element;
+} & (NonOptionalKeys<TProps> extends never ? {
+    componentProps?: TProps;
+} : {
+    componentProps: TProps;
+});
+export declare const WithSkiaWeb: <TProps = {}>({ getComponent, fallback, opts, componentProps, }: WithSkiaProps<TProps>) => React.JSX.Element;
 export {};

[wcandillon]

Would your issue be solved by #2321?