@shopify/react-native-skia 2.4.21 → 2.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/android/CMakeLists.txt +12 -49
- package/android/build.gradle +37 -1
- package/apple/SkiaCVPixelBufferUtils.h +6 -2
- package/apple/SkiaCVPixelBufferUtils.mm +208 -36
- package/apple/SkiaUIView.mm +4 -0
- package/cpp/api/JsiSkColor.h +53 -1
- package/cpp/rnwgpu/ArrayBuffer.h +7 -2
- package/lib/commonjs/renderer/Canvas.d.ts +2 -0
- package/lib/commonjs/renderer/Canvas.js +0 -3
- package/lib/commonjs/renderer/Canvas.js.map +1 -1
- package/lib/commonjs/sksg/Container.native.js +3 -5
- package/lib/commonjs/sksg/Container.native.js.map +1 -1
- package/lib/module/renderer/Canvas.d.ts +2 -0
- package/lib/module/renderer/Canvas.js +0 -3
- package/lib/module/renderer/Canvas.js.map +1 -1
- package/lib/module/sksg/Container.native.js +3 -5
- package/lib/module/sksg/Container.native.js.map +1 -1
- package/lib/typescript/src/renderer/Canvas.d.ts +2 -0
- package/package.json +10 -30
- package/react-native-skia.podspec +110 -58
- package/src/renderer/Canvas.tsx +2 -3
- package/src/sksg/Container.native.ts +3 -4
- package/scripts/install-skia.mjs +0 -728
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_ReanimatedProxy","_interopRequireDefault","_SkiaViewNativeId","_SkiaPictureViewNativeComponent","_Reconciler","_skia","_Platform","_external","_global","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","useCanvasRef","useRef","exports","useReanimatedFrame","HAS_REANIMATED_3","Rea","useFrameCallback","measure","useCanvasRefPriv","useAnimatedRef","useCanvasSize","userRef","ourRef","ref","size","setSize","useState","width","height","useLayoutEffect","current","_x","_y","isFabric","Boolean","global","nativeFabricUIManager","Canvas","debug","opaque","children","onSize","colorSpace","androidWarmup","onLayout","viewProps","console","error","viewRef","nativeId","useMemo","SkiaViewNativeId","root","SkiaSGRoot","Skia","_viewRef$current","result","Platform","OS","canvasRef","value","render","useEffect","unmount","useImperativeHandle","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","callback","_viewRef$current2","measureInWindow","_viewRef$current3","onLayoutWeb","useCallback","nativeEvent","layout","createElement","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC, RefObject } from \"react\";\nimport React, {\n useCallback,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport type {\n LayoutChangeEvent,\n MeasureInWindowOnSuccessCallback,\n MeasureOnSuccessCallback,\n View,\n ViewProps,\n} from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\nimport { HAS_REANIMATED_3 } from \"../external\";\n\nexport interface CanvasRef extends FC<CanvasProps> {\n makeImageSnapshot(rect?: SkRect): SkImage;\n makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n redraw(): void;\n getNativeId(): number;\n measure(callback: MeasureOnSuccessCallback): void;\n measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nconst useReanimatedFrame = !HAS_REANIMATED_3 ? () => {} : Rea.useFrameCallback;\nconst measure = !HAS_REANIMATED_3 ? null : Rea.measure;\n\nconst useCanvasRefPriv: typeof useRef<View> = !HAS_REANIMATED_3\n ? useRef\n : Rea.useAnimatedRef;\n\nexport const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {\n const ourRef = useCanvasRef();\n const ref = userRef ?? ourRef;\n const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });\n useLayoutEffect(() => {\n if (ref.current) {\n ref.current.measure((_x, _y, width, height) => {\n setSize({ width, height });\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n return { ref, size };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const isFabric = Boolean((global as any)?.nativeFabricUIManager);\n\nexport interface CanvasProps extends Omit<ViewProps, \"onLayout\"> {\n debug?: boolean;\n opaque?: boolean;\n onSize?: SharedValue<SkSize>;\n colorSpace?: \"p3\" | \"srgb\";\n ref?: React.Ref<CanvasRef>;\n androidWarmup?: boolean;\n __destroyWebGLContextAfterRender?: boolean;\n}\n\nexport const Canvas = ({\n debug,\n opaque,\n children,\n onSize,\n colorSpace = \"p3\",\n androidWarmup = false,\n ref,\n // Here know this is a type error but this is done on purpose to check it at runtime\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-expect-error\n onLayout,\n ...viewProps\n}: CanvasProps) => {\n if (onLayout && isFabric) {\n console.error(\n \"<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://shopify.github.io/react-native-skia/docs/canvas/overview/#getting-the-canvas-size\"\n );\n }\n const viewRef = useCanvasRefPriv(null);\n // Native ID\n const nativeId = useMemo(() => {\n return SkiaViewNativeId.current++;\n }, []);\n\n // Root\n const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n useReanimatedFrame(() => {\n \"worklet\";\n if (onSize && measure) {\n const result =\n // eslint-disable-next-line no-nested-ternary\n Platform.OS === \"web\"\n ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-expect-error\n viewRef.current?.canvasRef\n ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-expect-error\n measure(viewRef.current.canvasRef)\n : { width: 0, height: 0 }\n : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n measure(viewRef as any);\n if (result) {\n const { width, height } = result;\n if (onSize.value.width !== width || onSize.value.height !== height) {\n onSize.value = { width, height };\n }\n }\n }\n }, !!onSize);\n\n // Render effects\n useLayoutEffect(() => {\n root.render(children);\n }, [children, root, nativeId]);\n\n useEffect(() => {\n return () => {\n root.unmount();\n };\n }, [root]);\n\n // Component methods\n useImperativeHandle(\n ref,\n () =>\n ({\n makeImageSnapshot: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n },\n makeImageSnapshotAsync: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n },\n redraw: () => {\n SkiaViewApi.requestRedraw(nativeId);\n },\n getNativeId: () => {\n return nativeId;\n },\n measure: (callback) => {\n viewRef.current?.measure(callback);\n },\n measureInWindow: (callback) => {\n viewRef.current?.measureInWindow(callback);\n },\n }) as CanvasRef\n );\n\n const onLayoutWeb = useCallback(\n (e: LayoutChangeEvent) => {\n if (onLayout) {\n onLayout(e);\n }\n if (Platform.OS === \"web\" && onSize) {\n const { width, height } = e.nativeEvent.layout;\n onSize.value = { width, height };\n }\n },\n [onLayout, onSize]\n );\n return (\n <SkiaPictureViewNativeComponent\n ref={viewRef}\n collapsable={false}\n nativeID={`${nativeId}`}\n debug={debug}\n opaque={opaque}\n colorSpace={colorSpace}\n androidWarmup={androidWarmup}\n onLayout={\n Platform.OS === \"web\" && (onSize || onLayout) ? onLayoutWeb : onLayout\n }\n {...viewProps}\n />\n );\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_ReanimatedProxy","_interopRequireDefault","_SkiaViewNativeId","_SkiaPictureViewNativeComponent","_Reconciler","_skia","_Platform","_external","_global","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","useCanvasRef","useRef","exports","useReanimatedFrame","HAS_REANIMATED_3","Rea","useFrameCallback","measure","useCanvasRefPriv","useAnimatedRef","useCanvasSize","userRef","ourRef","ref","size","setSize","useState","width","height","useLayoutEffect","current","_x","_y","isFabric","Boolean","global","nativeFabricUIManager","Canvas","debug","opaque","children","onSize","colorSpace","androidWarmup","onLayout","viewProps","console","error","viewRef","nativeId","useMemo","SkiaViewNativeId","root","SkiaSGRoot","Skia","_viewRef$current","result","Platform","OS","canvasRef","value","render","useEffect","unmount","useImperativeHandle","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","callback","_viewRef$current2","measureInWindow","_viewRef$current3","onLayoutWeb","useCallback","nativeEvent","layout","createElement","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC, RefObject } from \"react\";\nimport React, {\n useCallback,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport type {\n LayoutChangeEvent,\n MeasureInWindowOnSuccessCallback,\n MeasureOnSuccessCallback,\n View,\n ViewProps,\n} from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\nimport { HAS_REANIMATED_3 } from \"../external\";\n\nexport interface CanvasRef extends FC<CanvasProps> {\n makeImageSnapshot(rect?: SkRect): SkImage;\n makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n redraw(): void;\n getNativeId(): number;\n measure(callback: MeasureOnSuccessCallback): void;\n measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nconst useReanimatedFrame = !HAS_REANIMATED_3 ? () => {} : Rea.useFrameCallback;\nconst measure = !HAS_REANIMATED_3 ? null : Rea.measure;\n\nconst useCanvasRefPriv: typeof useRef<View> = !HAS_REANIMATED_3\n ? useRef\n : Rea.useAnimatedRef;\n\nexport const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {\n const ourRef = useCanvasRef();\n const ref = userRef ?? ourRef;\n const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });\n useLayoutEffect(() => {\n if (ref.current) {\n ref.current.measure((_x, _y, width, height) => {\n setSize({ width, height });\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n return { ref, size };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const isFabric = Boolean((global as any)?.nativeFabricUIManager);\n\nexport interface CanvasProps extends Omit<ViewProps, \"onLayout\"> {\n debug?: boolean;\n /** @deprecated Not supported on Fabric. Use `onSize` or `useCanvasSize()` instead. */\n onLayout?: ViewProps[\"onLayout\"];\n opaque?: boolean;\n onSize?: SharedValue<SkSize>;\n colorSpace?: \"p3\" | \"srgb\";\n ref?: React.Ref<CanvasRef>;\n androidWarmup?: boolean;\n __destroyWebGLContextAfterRender?: boolean;\n}\n\nexport const Canvas = ({\n debug,\n opaque,\n children,\n onSize,\n colorSpace = \"p3\",\n androidWarmup = false,\n ref,\n onLayout,\n ...viewProps\n}: CanvasProps) => {\n if (onLayout && isFabric) {\n console.error(\n \"<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://shopify.github.io/react-native-skia/docs/canvas/overview/#getting-the-canvas-size\"\n );\n }\n const viewRef = useCanvasRefPriv(null);\n // Native ID\n const nativeId = useMemo(() => {\n return SkiaViewNativeId.current++;\n }, []);\n\n // Root\n const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n useReanimatedFrame(() => {\n \"worklet\";\n if (onSize && measure) {\n const result =\n // eslint-disable-next-line no-nested-ternary\n Platform.OS === \"web\"\n ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-expect-error\n viewRef.current?.canvasRef\n ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-expect-error\n measure(viewRef.current.canvasRef)\n : { width: 0, height: 0 }\n : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n measure(viewRef as any);\n if (result) {\n const { width, height } = result;\n if (onSize.value.width !== width || onSize.value.height !== height) {\n onSize.value = { width, height };\n }\n }\n }\n }, !!onSize);\n\n // Render effects\n useLayoutEffect(() => {\n root.render(children);\n }, [children, root, nativeId]);\n\n useEffect(() => {\n return () => {\n root.unmount();\n };\n }, [root]);\n\n // Component methods\n useImperativeHandle(\n ref,\n () =>\n ({\n makeImageSnapshot: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n },\n makeImageSnapshotAsync: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n },\n redraw: () => {\n SkiaViewApi.requestRedraw(nativeId);\n },\n getNativeId: () => {\n return nativeId;\n },\n measure: (callback) => {\n viewRef.current?.measure(callback);\n },\n measureInWindow: (callback) => {\n viewRef.current?.measureInWindow(callback);\n },\n }) as CanvasRef\n );\n\n const onLayoutWeb = useCallback(\n (e: LayoutChangeEvent) => {\n if (onLayout) {\n onLayout(e);\n }\n if (Platform.OS === \"web\" && onSize) {\n const { width, height } = e.nativeEvent.layout;\n onSize.value = { width, height };\n }\n },\n [onLayout, onSize]\n );\n return (\n <SkiaPictureViewNativeComponent\n ref={viewRef}\n collapsable={false}\n nativeID={`${nativeId}`}\n debug={debug}\n opaque={opaque}\n colorSpace={colorSpace}\n androidWarmup={androidWarmup}\n onLayout={\n Platform.OS === \"web\" && (onSize || onLayout) ? onLayoutWeb : onLayout\n }\n {...viewProps}\n />\n );\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -42,18 +42,16 @@ class NativeReanimatedContainer extends _StaticContainer.Container {
|
|
|
42
42
|
const recorder = new _ReanimatedRecorder.ReanimatedRecorder(this.Skia);
|
|
43
43
|
const {
|
|
44
44
|
nativeId,
|
|
45
|
-
picture
|
|
46
|
-
Skia
|
|
45
|
+
picture
|
|
47
46
|
} = this;
|
|
48
47
|
(0, _Visitor.visit)(recorder, this.root);
|
|
49
48
|
const sharedValues = recorder.getSharedValues();
|
|
50
49
|
const sharedRecorder = recorder.getRecorder();
|
|
51
50
|
// Draw first frame
|
|
52
|
-
_ReanimatedProxy.default.
|
|
51
|
+
_ReanimatedProxy.default.runOnUI(() => {
|
|
53
52
|
"worklet";
|
|
54
53
|
|
|
55
|
-
|
|
56
|
-
nativeDrawOnscreen(nativeId, sharedRecorder, firstPicture);
|
|
54
|
+
nativeDrawOnscreen(nativeId, sharedRecorder, picture);
|
|
57
55
|
})();
|
|
58
56
|
// Animate
|
|
59
57
|
if (sharedValues.length > 0) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_ReanimatedProxy","_interopRequireDefault","require","_renderHelpers","_ReanimatedRecorder","_StaticContainer","_Visitor","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","nativeDrawOnscreen","nativeId","recorder","picture","play","SkiaViewApi","setJsiProperty","NativeReanimatedContainer","Container","constructor","Skia","Picture","MakePicture","redraw","mapperId","Rea","stopMapper","unmounted","ReanimatedRecorder","visit","root","sharedValues","getSharedValues","sharedRecorder","getRecorder","
|
|
1
|
+
{"version":3,"names":["_ReanimatedProxy","_interopRequireDefault","require","_renderHelpers","_ReanimatedRecorder","_StaticContainer","_Visitor","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","nativeDrawOnscreen","nativeId","recorder","picture","play","SkiaViewApi","setJsiProperty","NativeReanimatedContainer","Container","constructor","Skia","Picture","MakePicture","redraw","mapperId","Rea","stopMapper","unmounted","ReanimatedRecorder","visit","root","sharedValues","getSharedValues","sharedRecorder","getRecorder","runOnUI","length","startMapper","applyUpdates","createContainer","HAS_REANIMATED_3","StaticContainer","exports"],"sources":["Container.native.ts"],"sourcesContent":["import Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkPicture } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\nimport type { JsiRecorder } from \"../skia/types/Recorder\";\n\nimport { ReanimatedRecorder } from \"./Recorder/ReanimatedRecorder\";\nimport { Container, StaticContainer } from \"./StaticContainer\";\nimport { visit } from \"./Recorder/Visitor\";\n\nimport \"../skia/NativeSetup\";\nimport \"../views/api\";\n\nconst nativeDrawOnscreen = (\n nativeId: number,\n recorder: JsiRecorder,\n picture: SkPicture\n) => {\n \"worklet\";\n\n //const start = performance.now();\n recorder.play(picture);\n //const end = performance.now();\n //console.log(\"Recording time: \", end - start);\n SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nclass NativeReanimatedContainer extends Container {\n private mapperId: number | null = null;\n private picture: SkPicture;\n\n constructor(\n Skia: Skia,\n private nativeId: number\n ) {\n super(Skia);\n this.picture = Skia.Picture.MakePicture(null)!;\n }\n\n redraw() {\n if (this.mapperId !== null) {\n Rea.stopMapper(this.mapperId);\n }\n if (this.unmounted) {\n return;\n }\n const recorder = new ReanimatedRecorder(this.Skia);\n const { nativeId, picture } = this;\n visit(recorder, this.root);\n const sharedValues = recorder.getSharedValues();\n const sharedRecorder = recorder.getRecorder();\n // Draw first frame\n Rea.runOnUI(() => {\n \"worklet\";\n nativeDrawOnscreen(nativeId, sharedRecorder, picture);\n })();\n // Animate\n if (sharedValues.length > 0) {\n this.mapperId = Rea.startMapper(() => {\n \"worklet\";\n sharedRecorder.applyUpdates(sharedValues);\n nativeDrawOnscreen(nativeId, sharedRecorder, picture);\n }, sharedValues);\n }\n }\n}\n\nexport const createContainer = (Skia: Skia, nativeId: number) => {\n if (HAS_REANIMATED_3 && nativeId !== -1) {\n return new NativeReanimatedContainer(Skia, nativeId);\n } else {\n return new StaticContainer(Skia, nativeId);\n }\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -19,6 +19,8 @@ export declare const useCanvasSize: (userRef?: RefObject<CanvasRef | null>) => {
|
|
|
19
19
|
export declare const isFabric: boolean;
|
|
20
20
|
export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
|
|
21
21
|
debug?: boolean;
|
|
22
|
+
/** @deprecated Not supported on Fabric. Use `onSize` or `useCanvasSize()` instead. */
|
|
23
|
+
onLayout?: ViewProps["onLayout"];
|
|
22
24
|
opaque?: boolean;
|
|
23
25
|
onSize?: SharedValue<SkSize>;
|
|
24
26
|
colorSpace?: "p3" | "srgb";
|
|
@@ -46,9 +46,6 @@ export const Canvas = ({
|
|
|
46
46
|
colorSpace = "p3",
|
|
47
47
|
androidWarmup = false,
|
|
48
48
|
ref,
|
|
49
|
-
// Here know this is a type error but this is done on purpose to check it at runtime
|
|
50
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
51
|
-
// @ts-expect-error
|
|
52
49
|
onLayout,
|
|
53
50
|
...viewProps
|
|
54
51
|
}) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useEffect","useImperativeHandle","useLayoutEffect","useMemo","useRef","useState","Rea","SkiaViewNativeId","SkiaPictureViewNativeComponent","SkiaSGRoot","Skia","Platform","HAS_REANIMATED_3","useCanvasRef","useReanimatedFrame","useFrameCallback","measure","useCanvasRefPriv","useAnimatedRef","useCanvasSize","userRef","ourRef","ref","size","setSize","width","height","current","_x","_y","isFabric","Boolean","_global","global","nativeFabricUIManager","Canvas","debug","opaque","children","onSize","colorSpace","androidWarmup","onLayout","viewProps","console","error","viewRef","nativeId","root","_viewRef$current","result","OS","canvasRef","value","render","unmount","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","callback","_viewRef$current2","measureInWindow","_viewRef$current3","onLayoutWeb","e","nativeEvent","layout","createElement","_extends","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC, RefObject } from \"react\";\nimport React, {\n useCallback,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport type {\n LayoutChangeEvent,\n MeasureInWindowOnSuccessCallback,\n MeasureOnSuccessCallback,\n View,\n ViewProps,\n} from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\nimport { HAS_REANIMATED_3 } from \"../external\";\n\nexport interface CanvasRef extends FC<CanvasProps> {\n makeImageSnapshot(rect?: SkRect): SkImage;\n makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n redraw(): void;\n getNativeId(): number;\n measure(callback: MeasureOnSuccessCallback): void;\n measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nconst useReanimatedFrame = !HAS_REANIMATED_3 ? () => {} : Rea.useFrameCallback;\nconst measure = !HAS_REANIMATED_3 ? null : Rea.measure;\n\nconst useCanvasRefPriv: typeof useRef<View> = !HAS_REANIMATED_3\n ? useRef\n : Rea.useAnimatedRef;\n\nexport const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {\n const ourRef = useCanvasRef();\n const ref = userRef ?? ourRef;\n const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });\n useLayoutEffect(() => {\n if (ref.current) {\n ref.current.measure((_x, _y, width, height) => {\n setSize({ width, height });\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n return { ref, size };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const isFabric = Boolean((global as any)?.nativeFabricUIManager);\n\nexport interface CanvasProps extends Omit<ViewProps, \"onLayout\"> {\n debug?: boolean;\n opaque?: boolean;\n onSize?: SharedValue<SkSize>;\n colorSpace?: \"p3\" | \"srgb\";\n ref?: React.Ref<CanvasRef>;\n androidWarmup?: boolean;\n __destroyWebGLContextAfterRender?: boolean;\n}\n\nexport const Canvas = ({\n debug,\n opaque,\n children,\n onSize,\n colorSpace = \"p3\",\n androidWarmup = false,\n ref,\n // Here know this is a type error but this is done on purpose to check it at runtime\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-expect-error\n onLayout,\n ...viewProps\n}: CanvasProps) => {\n if (onLayout && isFabric) {\n console.error(\n \"<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://shopify.github.io/react-native-skia/docs/canvas/overview/#getting-the-canvas-size\"\n );\n }\n const viewRef = useCanvasRefPriv(null);\n // Native ID\n const nativeId = useMemo(() => {\n return SkiaViewNativeId.current++;\n }, []);\n\n // Root\n const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n useReanimatedFrame(() => {\n \"worklet\";\n if (onSize && measure) {\n const result =\n // eslint-disable-next-line no-nested-ternary\n Platform.OS === \"web\"\n ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-expect-error\n viewRef.current?.canvasRef\n ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-expect-error\n measure(viewRef.current.canvasRef)\n : { width: 0, height: 0 }\n : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n measure(viewRef as any);\n if (result) {\n const { width, height } = result;\n if (onSize.value.width !== width || onSize.value.height !== height) {\n onSize.value = { width, height };\n }\n }\n }\n }, !!onSize);\n\n // Render effects\n useLayoutEffect(() => {\n root.render(children);\n }, [children, root, nativeId]);\n\n useEffect(() => {\n return () => {\n root.unmount();\n };\n }, [root]);\n\n // Component methods\n useImperativeHandle(\n ref,\n () =>\n ({\n makeImageSnapshot: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n },\n makeImageSnapshotAsync: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n },\n redraw: () => {\n SkiaViewApi.requestRedraw(nativeId);\n },\n getNativeId: () => {\n return nativeId;\n },\n measure: (callback) => {\n viewRef.current?.measure(callback);\n },\n measureInWindow: (callback) => {\n viewRef.current?.measureInWindow(callback);\n },\n }) as CanvasRef\n );\n\n const onLayoutWeb = useCallback(\n (e: LayoutChangeEvent) => {\n if (onLayout) {\n onLayout(e);\n }\n if (Platform.OS === \"web\" && onSize) {\n const { width, height } = e.nativeEvent.layout;\n onSize.value = { width, height };\n }\n },\n [onLayout, onSize]\n );\n return (\n <SkiaPictureViewNativeComponent\n ref={viewRef}\n collapsable={false}\n nativeID={`${nativeId}`}\n debug={debug}\n opaque={opaque}\n colorSpace={colorSpace}\n androidWarmup={androidWarmup}\n onLayout={\n Platform.OS === \"web\" && (onSize || onLayout) ? onLayoutWeb : onLayout\n }\n {...viewProps}\n />\n );\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["React","useCallback","useEffect","useImperativeHandle","useLayoutEffect","useMemo","useRef","useState","Rea","SkiaViewNativeId","SkiaPictureViewNativeComponent","SkiaSGRoot","Skia","Platform","HAS_REANIMATED_3","useCanvasRef","useReanimatedFrame","useFrameCallback","measure","useCanvasRefPriv","useAnimatedRef","useCanvasSize","userRef","ourRef","ref","size","setSize","width","height","current","_x","_y","isFabric","Boolean","_global","global","nativeFabricUIManager","Canvas","debug","opaque","children","onSize","colorSpace","androidWarmup","onLayout","viewProps","console","error","viewRef","nativeId","root","_viewRef$current","result","OS","canvasRef","value","render","unmount","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","callback","_viewRef$current2","measureInWindow","_viewRef$current3","onLayoutWeb","e","nativeEvent","layout","createElement","_extends","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC, RefObject } from \"react\";\nimport React, {\n useCallback,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport type {\n LayoutChangeEvent,\n MeasureInWindowOnSuccessCallback,\n MeasureOnSuccessCallback,\n View,\n ViewProps,\n} from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\nimport { HAS_REANIMATED_3 } from \"../external\";\n\nexport interface CanvasRef extends FC<CanvasProps> {\n makeImageSnapshot(rect?: SkRect): SkImage;\n makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n redraw(): void;\n getNativeId(): number;\n measure(callback: MeasureOnSuccessCallback): void;\n measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nconst useReanimatedFrame = !HAS_REANIMATED_3 ? () => {} : Rea.useFrameCallback;\nconst measure = !HAS_REANIMATED_3 ? null : Rea.measure;\n\nconst useCanvasRefPriv: typeof useRef<View> = !HAS_REANIMATED_3\n ? useRef\n : Rea.useAnimatedRef;\n\nexport const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {\n const ourRef = useCanvasRef();\n const ref = userRef ?? ourRef;\n const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });\n useLayoutEffect(() => {\n if (ref.current) {\n ref.current.measure((_x, _y, width, height) => {\n setSize({ width, height });\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n return { ref, size };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const isFabric = Boolean((global as any)?.nativeFabricUIManager);\n\nexport interface CanvasProps extends Omit<ViewProps, \"onLayout\"> {\n debug?: boolean;\n /** @deprecated Not supported on Fabric. Use `onSize` or `useCanvasSize()` instead. */\n onLayout?: ViewProps[\"onLayout\"];\n opaque?: boolean;\n onSize?: SharedValue<SkSize>;\n colorSpace?: \"p3\" | \"srgb\";\n ref?: React.Ref<CanvasRef>;\n androidWarmup?: boolean;\n __destroyWebGLContextAfterRender?: boolean;\n}\n\nexport const Canvas = ({\n debug,\n opaque,\n children,\n onSize,\n colorSpace = \"p3\",\n androidWarmup = false,\n ref,\n onLayout,\n ...viewProps\n}: CanvasProps) => {\n if (onLayout && isFabric) {\n console.error(\n \"<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://shopify.github.io/react-native-skia/docs/canvas/overview/#getting-the-canvas-size\"\n );\n }\n const viewRef = useCanvasRefPriv(null);\n // Native ID\n const nativeId = useMemo(() => {\n return SkiaViewNativeId.current++;\n }, []);\n\n // Root\n const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n useReanimatedFrame(() => {\n \"worklet\";\n if (onSize && measure) {\n const result =\n // eslint-disable-next-line no-nested-ternary\n Platform.OS === \"web\"\n ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-expect-error\n viewRef.current?.canvasRef\n ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-expect-error\n measure(viewRef.current.canvasRef)\n : { width: 0, height: 0 }\n : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n measure(viewRef as any);\n if (result) {\n const { width, height } = result;\n if (onSize.value.width !== width || onSize.value.height !== height) {\n onSize.value = { width, height };\n }\n }\n }\n }, !!onSize);\n\n // Render effects\n useLayoutEffect(() => {\n root.render(children);\n }, [children, root, nativeId]);\n\n useEffect(() => {\n return () => {\n root.unmount();\n };\n }, [root]);\n\n // Component methods\n useImperativeHandle(\n ref,\n () =>\n ({\n makeImageSnapshot: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n },\n makeImageSnapshotAsync: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n },\n redraw: () => {\n SkiaViewApi.requestRedraw(nativeId);\n },\n getNativeId: () => {\n return nativeId;\n },\n measure: (callback) => {\n viewRef.current?.measure(callback);\n },\n measureInWindow: (callback) => {\n viewRef.current?.measureInWindow(callback);\n },\n }) as CanvasRef\n );\n\n const onLayoutWeb = useCallback(\n (e: LayoutChangeEvent) => {\n if (onLayout) {\n onLayout(e);\n }\n if (Platform.OS === \"web\" && onSize) {\n const { width, height } = e.nativeEvent.layout;\n onSize.value = { width, height };\n }\n },\n [onLayout, onSize]\n );\n return (\n <SkiaPictureViewNativeComponent\n ref={viewRef}\n collapsable={false}\n nativeID={`${nativeId}`}\n debug={debug}\n opaque={opaque}\n colorSpace={colorSpace}\n androidWarmup={androidWarmup}\n onLayout={\n Platform.OS === \"web\" && (onSize || onLayout) ? onLayoutWeb : onLayout\n }\n {...viewProps}\n />\n );\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -35,18 +35,16 @@ class NativeReanimatedContainer extends Container {
|
|
|
35
35
|
const recorder = new ReanimatedRecorder(this.Skia);
|
|
36
36
|
const {
|
|
37
37
|
nativeId,
|
|
38
|
-
picture
|
|
39
|
-
Skia
|
|
38
|
+
picture
|
|
40
39
|
} = this;
|
|
41
40
|
visit(recorder, this.root);
|
|
42
41
|
const sharedValues = recorder.getSharedValues();
|
|
43
42
|
const sharedRecorder = recorder.getRecorder();
|
|
44
43
|
// Draw first frame
|
|
45
|
-
Rea.
|
|
44
|
+
Rea.runOnUI(() => {
|
|
46
45
|
"worklet";
|
|
47
46
|
|
|
48
|
-
|
|
49
|
-
nativeDrawOnscreen(nativeId, sharedRecorder, firstPicture);
|
|
47
|
+
nativeDrawOnscreen(nativeId, sharedRecorder, picture);
|
|
50
48
|
})();
|
|
51
49
|
// Animate
|
|
52
50
|
if (sharedValues.length > 0) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Rea","HAS_REANIMATED_3","ReanimatedRecorder","Container","StaticContainer","visit","nativeDrawOnscreen","nativeId","recorder","picture","play","SkiaViewApi","setJsiProperty","NativeReanimatedContainer","constructor","Skia","_defineProperty","Picture","MakePicture","redraw","mapperId","stopMapper","unmounted","root","sharedValues","getSharedValues","sharedRecorder","getRecorder","
|
|
1
|
+
{"version":3,"names":["Rea","HAS_REANIMATED_3","ReanimatedRecorder","Container","StaticContainer","visit","nativeDrawOnscreen","nativeId","recorder","picture","play","SkiaViewApi","setJsiProperty","NativeReanimatedContainer","constructor","Skia","_defineProperty","Picture","MakePicture","redraw","mapperId","stopMapper","unmounted","root","sharedValues","getSharedValues","sharedRecorder","getRecorder","runOnUI","length","startMapper","applyUpdates","createContainer"],"sources":["Container.native.ts"],"sourcesContent":["import Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkPicture } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\nimport type { JsiRecorder } from \"../skia/types/Recorder\";\n\nimport { ReanimatedRecorder } from \"./Recorder/ReanimatedRecorder\";\nimport { Container, StaticContainer } from \"./StaticContainer\";\nimport { visit } from \"./Recorder/Visitor\";\n\nimport \"../skia/NativeSetup\";\nimport \"../views/api\";\n\nconst nativeDrawOnscreen = (\n nativeId: number,\n recorder: JsiRecorder,\n picture: SkPicture\n) => {\n \"worklet\";\n\n //const start = performance.now();\n recorder.play(picture);\n //const end = performance.now();\n //console.log(\"Recording time: \", end - start);\n SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nclass NativeReanimatedContainer extends Container {\n private mapperId: number | null = null;\n private picture: SkPicture;\n\n constructor(\n Skia: Skia,\n private nativeId: number\n ) {\n super(Skia);\n this.picture = Skia.Picture.MakePicture(null)!;\n }\n\n redraw() {\n if (this.mapperId !== null) {\n Rea.stopMapper(this.mapperId);\n }\n if (this.unmounted) {\n return;\n }\n const recorder = new ReanimatedRecorder(this.Skia);\n const { nativeId, picture } = this;\n visit(recorder, this.root);\n const sharedValues = recorder.getSharedValues();\n const sharedRecorder = recorder.getRecorder();\n // Draw first frame\n Rea.runOnUI(() => {\n \"worklet\";\n nativeDrawOnscreen(nativeId, sharedRecorder, picture);\n })();\n // Animate\n if (sharedValues.length > 0) {\n this.mapperId = Rea.startMapper(() => {\n \"worklet\";\n sharedRecorder.applyUpdates(sharedValues);\n nativeDrawOnscreen(nativeId, sharedRecorder, picture);\n }, sharedValues);\n }\n }\n}\n\nexport const createContainer = (Skia: Skia, nativeId: number) => {\n if (HAS_REANIMATED_3 && nativeId !== -1) {\n return new NativeReanimatedContainer(Skia, nativeId);\n } else {\n return new StaticContainer(Skia, nativeId);\n }\n};\n"],"mappings":";;;AAAA,OAAOA,GAAG,MAAM,wCAAwC;AAExD,SAASC,gBAAgB,QAAQ,sCAAsC;AAGvE,SAASC,kBAAkB,QAAQ,+BAA+B;AAClE,SAASC,SAAS,EAAEC,eAAe,QAAQ,mBAAmB;AAC9D,SAASC,KAAK,QAAQ,oBAAoB;AAE1C,OAAO,qBAAqB;AAC5B,OAAO,cAAc;AAErB,MAAMC,kBAAkB,GAAGA,CACzBC,QAAgB,EAChBC,QAAqB,EACrBC,OAAkB,KACf;EACH,SAAS;;EAET;EACAD,QAAQ,CAACE,IAAI,CAACD,OAAO,CAAC;EACtB;EACA;EACAE,WAAW,CAACC,cAAc,CAACL,QAAQ,EAAE,SAAS,EAAEE,OAAO,CAAC;AAC1D,CAAC;AAED,MAAMI,yBAAyB,SAASV,SAAS,CAAC;EAIhDW,WAAWA,CACTC,IAAU,EACFR,QAAgB,EACxB;IACA,KAAK,CAACQ,IAAI,CAAC;IAAC,KAFJR,QAAgB,GAAhBA,QAAgB;IAAAS,eAAA,mBALQ,IAAI;IAAAA,eAAA;IAQpC,IAAI,CAACP,OAAO,GAAGM,IAAI,CAACE,OAAO,CAACC,WAAW,CAAC,IAAI,CAAE;EAChD;EAEAC,MAAMA,CAAA,EAAG;IACP,IAAI,IAAI,CAACC,QAAQ,KAAK,IAAI,EAAE;MAC1BpB,GAAG,CAACqB,UAAU,CAAC,IAAI,CAACD,QAAQ,CAAC;IAC/B;IACA,IAAI,IAAI,CAACE,SAAS,EAAE;MAClB;IACF;IACA,MAAMd,QAAQ,GAAG,IAAIN,kBAAkB,CAAC,IAAI,CAACa,IAAI,CAAC;IAClD,MAAM;MAAER,QAAQ;MAAEE;IAAQ,CAAC,GAAG,IAAI;IAClCJ,KAAK,CAACG,QAAQ,EAAE,IAAI,CAACe,IAAI,CAAC;IAC1B,MAAMC,YAAY,GAAGhB,QAAQ,CAACiB,eAAe,CAAC,CAAC;IAC/C,MAAMC,cAAc,GAAGlB,QAAQ,CAACmB,WAAW,CAAC,CAAC;IAC7C;IACA3B,GAAG,CAAC4B,OAAO,CAAC,MAAM;MAChB,SAAS;;MACTtB,kBAAkB,CAACC,QAAQ,EAAEmB,cAAc,EAAEjB,OAAO,CAAC;IACvD,CAAC,CAAC,CAAC,CAAC;IACJ;IACA,IAAIe,YAAY,CAACK,MAAM,GAAG,CAAC,EAAE;MAC3B,IAAI,CAACT,QAAQ,GAAGpB,GAAG,CAAC8B,WAAW,CAAC,MAAM;QACpC,SAAS;;QACTJ,cAAc,CAACK,YAAY,CAACP,YAAY,CAAC;QACzClB,kBAAkB,CAACC,QAAQ,EAAEmB,cAAc,EAAEjB,OAAO,CAAC;MACvD,CAAC,EAAEe,YAAY,CAAC;IAClB;EACF;AACF;AAEA,OAAO,MAAMQ,eAAe,GAAGA,CAACjB,IAAU,EAAER,QAAgB,KAAK;EAC/D,IAAIN,gBAAgB,IAAIM,QAAQ,KAAK,CAAC,CAAC,EAAE;IACvC,OAAO,IAAIM,yBAAyB,CAACE,IAAI,EAAER,QAAQ,CAAC;EACtD,CAAC,MAAM;IACL,OAAO,IAAIH,eAAe,CAACW,IAAI,EAAER,QAAQ,CAAC;EAC5C;AACF,CAAC","ignoreList":[]}
|
|
@@ -19,6 +19,8 @@ export declare const useCanvasSize: (userRef?: RefObject<CanvasRef | null>) => {
|
|
|
19
19
|
export declare const isFabric: boolean;
|
|
20
20
|
export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
|
|
21
21
|
debug?: boolean;
|
|
22
|
+
/** @deprecated Not supported on Fabric. Use `onSize` or `useCanvasSize()` instead. */
|
|
23
|
+
onLayout?: ViewProps["onLayout"];
|
|
22
24
|
opaque?: boolean;
|
|
23
25
|
onSize?: SharedValue<SkSize>;
|
|
24
26
|
colorSpace?: "p3" | "srgb";
|
package/package.json
CHANGED
|
@@ -8,37 +8,13 @@
|
|
|
8
8
|
"setup-skia-web": "scripts/setup-canvaskit.js"
|
|
9
9
|
},
|
|
10
10
|
"title": "React Native Skia",
|
|
11
|
-
"version": "2.
|
|
12
|
-
"skia": {
|
|
13
|
-
"version": "m144c",
|
|
14
|
-
"checksums": {
|
|
15
|
-
"android-armeabi-v7a": "e406c3e8103a2efb6a514ac91346d7f9f81adbae14dc2d0e302e84fb8c5f80f7",
|
|
16
|
-
"android-arm64-v8a": "75069b0f7c66ad3382553e947d583265de033cc856c394110243da098306955f",
|
|
17
|
-
"android-x86": "714b93a7bdf005a23699f47e6255e4e690086c52a1998c20196a46f95b709b09",
|
|
18
|
-
"android-x86_64": "5bd2972d13293b09b35e2c0149b7d103dc4fb0f2837c3dd169ce06795b812714",
|
|
19
|
-
"apple-ios-xcframeworks": "43f62ea742c55ecc57864505ff752a517fd2c31412a19914032d044ac4f987ee",
|
|
20
|
-
"apple-tvos-xcframeworks": "0f6b5c75b4e686e72f5cc8508e60074463f757ca7a0dcbd07e095c055a537c58",
|
|
21
|
-
"apple-macos-xcframeworks": "31f57bcf6caff1c268984609b0e4a2abd966bfa8ddcf074331d94e0f988f93d3"
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
|
-
"skia-graphite": {
|
|
25
|
-
"version": "m142b",
|
|
26
|
-
"checksums": {
|
|
27
|
-
"android-armeabi-v7a": "3e40f44c804194fa0983c46903f834e8f834c6dd96534c7fa1b4ebb4f409527d",
|
|
28
|
-
"android-arm64-v8a": "d6c3035449fcf7ef13369b0d6c4ef41f3177d15074eeb195201e0ba4cfb2f527",
|
|
29
|
-
"android-x86": "6dc229847420b8a43c15098cdcb4fe45b2df20a38ad69f37e0aa91c832499c2a",
|
|
30
|
-
"android-x86_64": "ecae351d98af3b175d40d894520c2e3263034276bb0b0e9d2f9c19ba7dc046fa",
|
|
31
|
-
"apple-ios-xcframeworks": "6f60f03faaeebfb798615d09715040790ff95e75bf95028893ced6f514ab5196",
|
|
32
|
-
"apple-macos-xcframeworks": "07467cd1778053537528ed91c7a35d116e1a4644819f0aad8e06e7d884591dea"
|
|
33
|
-
}
|
|
34
|
-
},
|
|
11
|
+
"version": "2.5.0",
|
|
35
12
|
"description": "High-performance React Native Graphics using Skia",
|
|
36
13
|
"main": "lib/module/index.js",
|
|
37
14
|
"react-native": "src/index.ts",
|
|
38
15
|
"module": "lib/module/index.js",
|
|
39
16
|
"types": "lib/typescript/index.d.ts",
|
|
40
17
|
"files": [
|
|
41
|
-
"scripts/install-skia.mjs",
|
|
42
18
|
"scripts/setup-canvaskit.js",
|
|
43
19
|
"src/**",
|
|
44
20
|
"lib/**",
|
|
@@ -68,14 +44,13 @@
|
|
|
68
44
|
"clean-skia": "yarn rimraf ./libs && yarn rimraf ../../externals/skia/out",
|
|
69
45
|
"build-skia": "tsx ./scripts/build-skia.ts",
|
|
70
46
|
"copy-skia-headers": "tsx ./scripts/copy-skia-headers.ts",
|
|
71
|
-
"install-skia": "
|
|
47
|
+
"install-skia-graphite": "tsx ./scripts/install-skia-graphite.ts",
|
|
72
48
|
"clang-format": "yarn clang-format-ios && yarn clang-format-android && yarn clang-format-common",
|
|
73
49
|
"clang-format-ios": "find apple/ -iname '*.h' -o -iname '*.mm' -o -iname '*.cpp' | xargs clang-format -i",
|
|
74
50
|
"clang-format-android": "find android/cpp/ -iname '*.h' -o -iname '*.m' -o -iname '*.cpp' | xargs clang-format -i",
|
|
75
51
|
"clang-format-common": "find cpp/ \\( -path 'cpp//skia' -prune \\) -o \\( -iname '*.h' -o -iname '*.m' -o -iname '*.cpp' \\) -print | xargs clang-format -i",
|
|
76
52
|
"workflow-copy-libs": "tsx ./scripts/workflow-copy-libs.ts",
|
|
77
|
-
"cpplint": "cpplint --linelength=230 --filter=-legal/copyright,-whitespace/indent,-whitespace/comments,-whitespace/ending_newline,-build/include_order,-runtime/references,-readability/todo,-whitespace/blank_line,-whitespace/todo,-runtime/int,-build/c++11,-whitespace/parens --exclude=package/cpp/skia --exclude=package/ios --exclude=package/android/build --exclude=package/node_modules --recursive package"
|
|
78
|
-
"postinstall": "node ./scripts/install-skia.mjs"
|
|
53
|
+
"cpplint": "cpplint --linelength=230 --filter=-legal/copyright,-whitespace/indent,-whitespace/comments,-whitespace/ending_newline,-build/include_order,-runtime/references,-readability/todo,-whitespace/blank_line,-whitespace/todo,-runtime/int,-build/c++11,-whitespace/parens --exclude=package/cpp/skia --exclude=package/ios --exclude=package/android/build --exclude=package/node_modules --recursive package"
|
|
79
54
|
},
|
|
80
55
|
"repository": {
|
|
81
56
|
"type": "git",
|
|
@@ -137,11 +112,12 @@
|
|
|
137
112
|
"react": "19.0.0",
|
|
138
113
|
"react-native": "0.83.1",
|
|
139
114
|
"react-native-builder-bob": "0.18.2",
|
|
140
|
-
"react-native-reanimated": "4.2.1",
|
|
141
|
-
"react-native-worklets": "0.7.
|
|
115
|
+
"react-native-reanimated": "^4.2.1",
|
|
116
|
+
"react-native-worklets": "^0.7.0",
|
|
142
117
|
"rimraf": "3.0.2",
|
|
143
118
|
"semantic-release": "^24.1.0",
|
|
144
119
|
"semantic-release-yarn": "^3.0.2",
|
|
120
|
+
"tar": "^7.5.9",
|
|
145
121
|
"ts-jest": "29.4.3",
|
|
146
122
|
"tsx": "^4.21.0",
|
|
147
123
|
"typescript": "^5.2.2",
|
|
@@ -149,6 +125,10 @@
|
|
|
149
125
|
},
|
|
150
126
|
"dependencies": {
|
|
151
127
|
"canvaskit-wasm": "0.40.0",
|
|
128
|
+
"react-native-skia-android": "144.3.0",
|
|
129
|
+
"react-native-skia-apple-ios": "144.3.0",
|
|
130
|
+
"react-native-skia-apple-macos": "144.3.0",
|
|
131
|
+
"react-native-skia-apple-tvos": "144.3.0",
|
|
152
132
|
"react-reconciler": "0.31.0"
|
|
153
133
|
},
|
|
154
134
|
"eslintIgnore": [
|
|
@@ -4,76 +4,122 @@ require "json"
|
|
|
4
4
|
|
|
5
5
|
package = JSON.parse(File.read(File.join(__dir__, "package.json")))
|
|
6
6
|
|
|
7
|
-
#
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
7
|
+
# Resolve npm package path using Node.js resolution (handles monorepos, pnpm, etc.)
|
|
8
|
+
resolve_skia_package = lambda do |package_name, required: true|
|
|
9
|
+
begin
|
|
10
|
+
# Use node to resolve the package - this handles all edge cases:
|
|
11
|
+
# - Hoisted packages in monorepos
|
|
12
|
+
# - pnpm symlinked packages
|
|
13
|
+
# - Yarn PnP
|
|
14
|
+
# - Different node_modules structures
|
|
15
|
+
result = `node -e "console.log(require.resolve('#{package_name}/package.json'))" 2>/dev/null`.strip
|
|
16
|
+
if $?.success? && !result.empty?
|
|
17
|
+
return File.dirname(result)
|
|
18
|
+
end
|
|
19
|
+
rescue => e
|
|
20
|
+
# Node resolution failed
|
|
21
|
+
end
|
|
22
|
+
|
|
23
|
+
# Fallback: walk up directories looking for node_modules
|
|
24
|
+
current = __dir__
|
|
25
|
+
while current != "/"
|
|
26
|
+
candidate = File.join(current, "node_modules", package_name)
|
|
27
|
+
if File.exist?(File.join(candidate, "package.json"))
|
|
28
|
+
return candidate
|
|
29
|
+
end
|
|
30
|
+
current = File.dirname(current)
|
|
31
|
+
end
|
|
32
|
+
|
|
33
|
+
if required
|
|
34
|
+
Pod::UI.puts "\n"
|
|
35
|
+
Pod::UI.puts "ERROR: Could not find #{package_name}".red
|
|
36
|
+
Pod::UI.puts "Make sure you have run 'yarn install' or 'npm install'".red
|
|
37
|
+
Pod::UI.puts "\n"
|
|
38
|
+
raise "#{package_name} not found. Please install dependencies."
|
|
39
|
+
end
|
|
40
|
+
|
|
41
|
+
nil
|
|
36
42
|
end
|
|
37
43
|
|
|
38
|
-
# Check if Graphite is
|
|
39
|
-
# Detection method priority:
|
|
40
|
-
# 1. SK_GRAPHITE environment variable (explicit override, fastest)
|
|
41
|
-
# 2. Marker file in libs directory (set during Skia build)
|
|
42
|
-
# 3. Default to OFF (no slow nm symbol detection)
|
|
44
|
+
# Check if Graphite is enabled
|
|
43
45
|
use_graphite = false
|
|
44
|
-
|
|
45
46
|
if ENV['SK_GRAPHITE']
|
|
46
|
-
# Explicit override via environment variable
|
|
47
47
|
use_graphite = ENV['SK_GRAPHITE'] == '1' || ENV['SK_GRAPHITE'].downcase == 'true'
|
|
48
|
-
puts "-- SK_GRAPHITE
|
|
49
|
-
elsif File.exist?(File.join(__dir__, "libs/apple/graphite.enabled"))
|
|
50
|
-
# Marker file indicates Graphite-enabled build
|
|
51
|
-
use_graphite = true
|
|
52
|
-
puts "-- SK_GRAPHITE detection: marker file found"
|
|
48
|
+
puts "-- SK_GRAPHITE: using environment variable (#{use_graphite ? 'ON' : 'OFF'})"
|
|
53
49
|
else
|
|
54
|
-
puts "-- SK_GRAPHITE
|
|
50
|
+
puts "-- SK_GRAPHITE: OFF (set SK_GRAPHITE=1 to enable)"
|
|
55
51
|
end
|
|
56
52
|
|
|
57
|
-
if
|
|
58
|
-
|
|
53
|
+
# Check if xcframeworks already exist (e.g., from install-skia-graphite script)
|
|
54
|
+
local_ios_libs = File.join(__dir__, "libs/ios")
|
|
55
|
+
local_macos_libs = File.join(__dir__, "libs/macos")
|
|
56
|
+
xcframeworks_preinstalled = File.exist?(local_ios_libs) &&
|
|
57
|
+
Dir.glob(File.join(local_ios_libs, "*.xcframework")).any? &&
|
|
58
|
+
File.exist?(local_macos_libs) &&
|
|
59
|
+
Dir.glob(File.join(local_macos_libs, "*.xcframework")).any?
|
|
60
|
+
|
|
61
|
+
if xcframeworks_preinstalled
|
|
62
|
+
puts "-- Using pre-installed xcframeworks from libs/"
|
|
63
|
+
ios_package = nil
|
|
64
|
+
macos_package = nil
|
|
65
|
+
tvos_package = nil
|
|
59
66
|
else
|
|
60
|
-
|
|
67
|
+
# Resolve Skia binary packages from npm
|
|
68
|
+
prefix = use_graphite ? "react-native-skia-graphite" : "react-native-skia"
|
|
69
|
+
|
|
70
|
+
ios_package = resolve_skia_package.call("#{prefix}-apple-ios")
|
|
71
|
+
macos_package = resolve_skia_package.call("#{prefix}-apple-macos")
|
|
72
|
+
tvos_package = use_graphite ? nil : resolve_skia_package.call("#{prefix}-apple-tvos", required: false)
|
|
73
|
+
|
|
74
|
+
puts "-- Skia iOS package: #{ios_package}"
|
|
75
|
+
puts "-- Skia macOS package: #{macos_package}"
|
|
76
|
+
puts "-- Skia tvOS package: #{tvos_package}" if tvos_package
|
|
77
|
+
|
|
78
|
+
# Verify the packages contain the expected files
|
|
79
|
+
ios_libs_path = File.join(ios_package, "libs")
|
|
80
|
+
unless File.exist?(ios_libs_path) && Dir.glob(File.join(ios_libs_path, "*.xcframework")).any?
|
|
81
|
+
Pod::UI.puts "\n"
|
|
82
|
+
Pod::UI.puts "┌─────────────────────────────────────────────────────────────────────────────┐".red
|
|
83
|
+
Pod::UI.puts "│ │".red
|
|
84
|
+
Pod::UI.puts "│ ERROR: Skia prebuilt binaries not found in #{prefix}-apple-ios! │".red
|
|
85
|
+
Pod::UI.puts "│ │".red
|
|
86
|
+
Pod::UI.puts "│ The package was found but doesn't contain the expected xcframeworks. │".red
|
|
87
|
+
Pod::UI.puts "│ Try reinstalling: yarn add #{prefix}-apple-ios │".red
|
|
88
|
+
Pod::UI.puts "│ │".red
|
|
89
|
+
Pod::UI.puts "└─────────────────────────────────────────────────────────────────────────────┘".red
|
|
90
|
+
Pod::UI.puts "\n"
|
|
91
|
+
raise "Skia xcframeworks not found in #{ios_libs_path}"
|
|
92
|
+
end
|
|
61
93
|
end
|
|
62
94
|
|
|
63
95
|
# Set preprocessor definitions based on GRAPHITE flag
|
|
64
|
-
preprocessor_defs = use_graphite ?
|
|
65
|
-
'$(inherited) SK_GRAPHITE=1 SK_IMAGE_READ_PIXELS_DISABLE_LEGACY_API=1 SK_DISABLE_LEGACY_SHAPER_FACTORY=1' :
|
|
96
|
+
preprocessor_defs = use_graphite ?
|
|
97
|
+
'$(inherited) SK_GRAPHITE=1 SK_IMAGE_READ_PIXELS_DISABLE_LEGACY_API=1 SK_DISABLE_LEGACY_SHAPER_FACTORY=1' :
|
|
66
98
|
'$(inherited) SK_METAL=1 SK_GANESH=1 SK_IMAGE_READ_PIXELS_DISABLE_LEGACY_API=1 SK_DISABLE_LEGACY_SHAPER_FACTORY=1'
|
|
67
99
|
|
|
68
|
-
# Define framework names
|
|
100
|
+
# Define framework names
|
|
69
101
|
framework_names = ['libskia', 'libsvg', 'libskshaper', 'libskparagraph',
|
|
70
102
|
'libskunicode_core', 'libskunicode_libgrapheme',
|
|
71
103
|
'libskottie', 'libsksg']
|
|
72
104
|
|
|
73
|
-
# Build platform-specific framework paths
|
|
74
|
-
ios_frameworks = framework_names.map { |f| "libs/
|
|
75
|
-
|
|
76
|
-
|
|
105
|
+
# Build platform-specific framework paths (relative to pod's libs directory)
|
|
106
|
+
ios_frameworks = framework_names.map { |f| "libs/ios/#{f}.xcframework" }
|
|
107
|
+
osx_frameworks = framework_names.map { |f| "libs/macos/#{f}.xcframework" }
|
|
108
|
+
tvos_frameworks = tvos_package ? framework_names.map { |f| "libs/tvos/#{f}.xcframework" } : []
|
|
109
|
+
|
|
110
|
+
# Prepare command to copy xcframeworks from npm packages into pod directory
|
|
111
|
+
# (skipped if xcframeworks are already preinstalled)
|
|
112
|
+
prepare_commands = []
|
|
113
|
+
unless xcframeworks_preinstalled
|
|
114
|
+
prepare_commands << "rm -rf libs/ios libs/macos libs/tvos"
|
|
115
|
+
prepare_commands << "mkdir -p libs/ios libs/macos"
|
|
116
|
+
prepare_commands << "cp -R '#{ios_package}/libs/'*.xcframework libs/ios/"
|
|
117
|
+
prepare_commands << "cp -R '#{macos_package}/libs/'*.xcframework libs/macos/"
|
|
118
|
+
if tvos_package
|
|
119
|
+
prepare_commands << "mkdir -p libs/tvos"
|
|
120
|
+
prepare_commands << "cp -R '#{tvos_package}/libs/'*.xcframework libs/tvos/"
|
|
121
|
+
end
|
|
122
|
+
end
|
|
77
123
|
|
|
78
124
|
Pod::Spec.new do |s|
|
|
79
125
|
s.name = "react-native-skia"
|
|
@@ -85,13 +131,16 @@ Pod::Spec.new do |s|
|
|
|
85
131
|
s.homepage = "https://github.com/shopify/react-native-skia"
|
|
86
132
|
s.license = "MIT"
|
|
87
133
|
s.license = { :type => "MIT", :file => "LICENSE.md" }
|
|
88
|
-
s.authors = {
|
|
134
|
+
s.authors = {
|
|
89
135
|
"Christian Falch" => "christian.falch@gmail.com",
|
|
90
136
|
"William Candillon" => "wcandillon@gmail.com"
|
|
91
137
|
}
|
|
92
138
|
s.platforms = { :ios => "14.0", :tvos => "13.0", :osx => "11" }
|
|
93
139
|
s.source = { :git => "https://github.com/shopify/react-native-skia/react-native-skia.git", :tag => "#{s.version}" }
|
|
94
140
|
|
|
141
|
+
# Copy xcframeworks from npm packages into pod directory structure
|
|
142
|
+
s.prepare_command = prepare_commands.join(" && ")
|
|
143
|
+
|
|
95
144
|
s.requires_arc = true
|
|
96
145
|
s.pod_target_xcconfig = {
|
|
97
146
|
'GCC_PREPROCESSOR_DEFINITIONS' => preprocessor_defs,
|
|
@@ -102,7 +151,7 @@ Pod::Spec.new do |s|
|
|
|
102
151
|
|
|
103
152
|
s.frameworks = ['MetalKit', 'AVFoundation', 'AVKit', 'CoreMedia']
|
|
104
153
|
|
|
105
|
-
# Platform-specific vendored frameworks
|
|
154
|
+
# Platform-specific vendored frameworks (copied into libs/)
|
|
106
155
|
s.ios.vendored_frameworks = ios_frameworks
|
|
107
156
|
s.osx.vendored_frameworks = osx_frameworks
|
|
108
157
|
|
|
@@ -111,9 +160,12 @@ Pod::Spec.new do |s|
|
|
|
111
160
|
s.tvos.vendored_frameworks = tvos_frameworks
|
|
112
161
|
end
|
|
113
162
|
|
|
163
|
+
# Preserve the copied libs directory
|
|
164
|
+
s.preserve_paths = ["libs/**/*"]
|
|
165
|
+
|
|
114
166
|
# All iOS cpp/h files
|
|
115
167
|
s.source_files = [
|
|
116
|
-
"apple/**/*.{h,c,cc,cpp,m,mm,swift}",
|
|
168
|
+
"apple/**/*.{h,c,cc,cpp,m,mm,swift}",
|
|
117
169
|
"cpp/**/*.{h,cpp}"
|
|
118
170
|
]
|
|
119
171
|
|
|
@@ -123,9 +175,10 @@ Pod::Spec.new do |s|
|
|
|
123
175
|
'cpp/rnskia/RNDawnWindowContext.h',
|
|
124
176
|
'cpp/rnskia/RNDawnWindowContext.cpp',
|
|
125
177
|
'cpp/rnskia/RNImageProvider.h',
|
|
126
|
-
'cpp/rnwgpu/**/*.{h,cpp}'
|
|
178
|
+
'cpp/rnwgpu/**/*.{h,cpp}',
|
|
179
|
+
'cpp/jsi2/**/*.{h,cpp}'
|
|
127
180
|
]
|
|
128
|
-
s.exclude_files = graphite_exclusions unless use_graphite
|
|
181
|
+
s.exclude_files = graphite_exclusions unless use_graphite
|
|
129
182
|
|
|
130
183
|
if defined?(install_modules_dependencies()) != nil
|
|
131
184
|
install_modules_dependencies(s)
|
|
@@ -138,4 +191,3 @@ Pod::Spec.new do |s|
|
|
|
138
191
|
s.dependency "React-Core"
|
|
139
192
|
end
|
|
140
193
|
end
|
|
141
|
-
|
package/src/renderer/Canvas.tsx
CHANGED
|
@@ -64,6 +64,8 @@ export const isFabric = Boolean((global as any)?.nativeFabricUIManager);
|
|
|
64
64
|
|
|
65
65
|
export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
|
|
66
66
|
debug?: boolean;
|
|
67
|
+
/** @deprecated Not supported on Fabric. Use `onSize` or `useCanvasSize()` instead. */
|
|
68
|
+
onLayout?: ViewProps["onLayout"];
|
|
67
69
|
opaque?: boolean;
|
|
68
70
|
onSize?: SharedValue<SkSize>;
|
|
69
71
|
colorSpace?: "p3" | "srgb";
|
|
@@ -80,9 +82,6 @@ export const Canvas = ({
|
|
|
80
82
|
colorSpace = "p3",
|
|
81
83
|
androidWarmup = false,
|
|
82
84
|
ref,
|
|
83
|
-
// Here know this is a type error but this is done on purpose to check it at runtime
|
|
84
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
85
|
-
// @ts-expect-error
|
|
86
85
|
onLayout,
|
|
87
86
|
...viewProps
|
|
88
87
|
}: CanvasProps) => {
|