From 56195522a066112159021852d1959000d0214168 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 2 Apr 2024 10:10:05 +0000 Subject: [PATCH] deploy: 5caef05dec559bf75fa238d2093cccbcb2782aea --- 404.html | 4 ++-- assets/js/48b260a9.41d8dc6e.js | 1 + assets/js/48b260a9.e9b5d969.js | 1 - .../{runtime~main.3d954a90.js => runtime~main.441472cb.js} | 2 +- docs/animated-images/index.html | 4 ++-- docs/animations/animations/index.html | 4 ++-- docs/animations/gestures/index.html | 4 ++-- docs/animations/hooks/index.html | 4 ++-- docs/animations/reanimated2/index.html | 4 ++-- docs/animations/textures/index.html | 4 ++-- docs/backdrops-filters/index.html | 4 ++-- docs/canvas/contexts/index.html | 4 ++-- docs/canvas/overview/index.html | 4 ++-- docs/color-filters/index.html | 4 ++-- docs/getting-started/bundle-size/index.html | 4 ++-- docs/getting-started/headless/index.html | 6 +++--- docs/getting-started/hello-world/index.html | 4 ++-- docs/getting-started/installation/index.html | 4 ++-- docs/getting-started/web/index.html | 4 ++-- docs/group/index.html | 4 ++-- docs/image-filters/blur/index.html | 4 ++-- docs/image-filters/displacement-map/index.html | 4 ++-- docs/image-filters/morphology/index.html | 4 ++-- docs/image-filters/offset/index.html | 4 ++-- docs/image-filters/overview/index.html | 4 ++-- docs/image-filters/runtime-shader/index.html | 4 ++-- docs/image-filters/shadows/index.html | 4 ++-- docs/images-svg/index.html | 4 ++-- docs/images/index.html | 4 ++-- docs/mask-filters/index.html | 4 ++-- docs/mask/index.html | 4 ++-- docs/paint/overview/index.html | 4 ++-- docs/paint/properties/index.html | 4 ++-- docs/path-effects/index.html | 4 ++-- docs/shaders/colors/index.html | 4 ++-- docs/shaders/gradients/index.html | 4 ++-- docs/shaders/images/index.html | 4 ++-- docs/shaders/overview/index.html | 4 ++-- docs/shaders/perlin-noise/index.html | 4 ++-- docs/shapes/atlas/index.html | 4 ++-- docs/shapes/box/index.html | 4 ++-- docs/shapes/ellipses/index.html | 4 ++-- docs/shapes/patch/index.html | 4 ++-- docs/shapes/path/index.html | 4 ++-- docs/shapes/pictures/index.html | 4 ++-- docs/shapes/polygons/index.html | 4 ++-- docs/shapes/vertices/index.html | 4 ++-- docs/snapshotviews/index.html | 4 ++-- docs/text/blob/index.html | 4 ++-- docs/text/glyphs/index.html | 4 ++-- docs/text/paragraph/index.html | 4 ++-- docs/text/path/index.html | 4 ++-- docs/text/text/index.html | 4 ++-- docs/tutorials/index.html | 4 ++-- index.html | 4 ++-- search/index.html | 4 ++-- 56 files changed, 109 insertions(+), 109 deletions(-) create mode 100644 assets/js/48b260a9.41d8dc6e.js delete mode 100644 assets/js/48b260a9.e9b5d969.js rename assets/js/{runtime~main.3d954a90.js => runtime~main.441472cb.js} (98%) diff --git a/404.html b/404.html index cfbf81cf6e..2463a053a0 100644 --- a/404.html +++ b/404.html @@ -4,13 +4,13 @@ Page Not Found | React Native Skia - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- + \ No newline at end of file diff --git a/assets/js/48b260a9.41d8dc6e.js b/assets/js/48b260a9.41d8dc6e.js new file mode 100644 index 0000000000..747cbc9e21 --- /dev/null +++ b/assets/js/48b260a9.41d8dc6e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8648],{5788:(e,a,t)=>{t.d(a,{Iu:()=>i,yg:()=>g});var n=t(1504);function r(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function s(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),t.push.apply(t,n)}return t}function o(e){for(var a=1;a=0||(r[t]=e[t]);return r}(e,a);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var p=n.createContext({}),y=function(e){var a=n.useContext(p),t=a;return e&&(t="function"==typeof e?e(a):o(o({},a),e)),t},i=function(e){var a=y(e.components);return n.createElement(p.Provider,{value:a},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var a=e.children;return n.createElement(n.Fragment,{},a)}},m=n.forwardRef((function(e,a){var t=e.components,r=e.mdxType,s=e.originalType,p=e.parentName,i=l(e,["components","mdxType","originalType","parentName"]),c=y(t),m=r,g=c["".concat(p,".").concat(m)]||c[m]||d[m]||s;return t?n.createElement(g,o(o({ref:a},i),{},{components:t})):n.createElement(g,o({ref:a},i))}));function g(e,a){var t=arguments,r=a&&a.mdxType;if("string"==typeof e||r){var s=t.length,o=new Array(s);o[0]=m;var l={};for(var p in a)hasOwnProperty.call(a,p)&&(l[p]=a[p]);l.originalType=e,l[c]="string"==typeof e?e:r,o[1]=l;for(var y=2;y{t.r(a),t.d(a,{assets:()=>p,contentTitle:()=>o,default:()=>d,frontMatter:()=>s,metadata:()=>l,toc:()=>y});var n=t(5072),r=(t(1504),t(5788));const s={id:"headless",title:"Headless",sidebar_label:"Headless",slug:"/getting-started/headless"},o=void 0,l={unversionedId:"getting-started/headless",id:"getting-started/headless",title:"Headless",description:"Thanks to its offscreen capabilities, React Native Skia can run on Node.",source:"@site/docs/getting-started/headless.md",sourceDirName:"getting-started",slug:"/getting-started/headless",permalink:"/react-native-skia/docs/getting-started/headless",draft:!1,editUrl:"https://github.com/shopify/react-native-skia/edit/main/docs/docs/getting-started/headless.md",tags:[],version:"current",frontMatter:{id:"headless",title:"Headless",sidebar_label:"Headless",slug:"/getting-started/headless"},sidebar:"tutorialSidebar",previous:{title:"Web",permalink:"/react-native-skia/docs/getting-started/web"},next:{title:"Bundle Size",permalink:"/react-native-skia/docs/getting-started/bundle-size"}},p={},y=[{value:"Hello World",id:"hello-world",level:2},{value:"GPU Acceleration",id:"gpu-acceleration",level:2}],i={toc:y},c="wrapper";function d(e){let{components:a,...t}=e;return(0,r.yg)(c,(0,n.c)({},i,t,{components:a,mdxType:"MDXLayout"}),(0,r.yg)("p",null,"Thanks to its offscreen capabilities, React Native Skia can run on Node.\nThis means that you can use the Skia API to draw things that can be encoded and saved as images.\nBy default, drawings will be executed on the CPU but it is possible to also use ",(0,r.yg)("a",{parentName:"p",href:"#gpu-acceleration"},"GPU Acceleration"),"."),(0,r.yg)("h2",{id:"hello-world"},"Hello World"),(0,r.yg)("p",null,"You will notice in the example below that the import URL looks different than the one used in React Native. There are two reasons for it. First, because Node programs don't rely on module bundlers such as Webpack, you will need to use the commonjs build of React Native Skia. Finally, we want to import the Skia APIs we need on Node without importing the one that rely on pure React Native APIs."),(0,r.yg)("div",{className:"shiki-twoslash-fragment"},(0,r.yg)("pre",{parentName:"div",className:"shiki min-light",style:{backgroundColor:"#ffffff",color:"#24292eff"}},(0,r.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,r.yg)("div",{parentName:"pre",className:"code-container"},(0,r.yg)("code",{parentName:"div"},(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { LoadSkiaWeb } "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"@shopify/react-native-skia/lib/commonjs/web/LoadSkiaWeb"'),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { Fill"),(0,r.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," makeOffscreenSurface"),(0,r.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," drawOffscreen"),(0,r.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," getSkiaExports } "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"@shopify/react-native-skia/lib/commonjs/headless"'),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"}),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"async"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," () "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"width"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"256"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"height"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"256"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," size "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"*"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"0.33"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"await"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"LoadSkiaWeb"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"();")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#C2C3C5"}},"// Once that CanvasKit is loaded, you can access Skia via getSkiaExports()")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#C2C3C5"}},'// Alternatively you can do const {Skia} = require("@shopify/react-native-skia")')),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {"),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"Skia"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"} "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"getSkiaExports"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"();")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"surface"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"makeOffscreenSurface"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(width"),(0,r.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," height);")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"image"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"drawOffscreen"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(surface"),(0,r.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," <"),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"Group"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"blendMode"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"multiply"'),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},">")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," <"),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"Circle"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"cx"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{r} "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"cy"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{r} "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{r} "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"color"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"cyan"'),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," />")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," <"),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"Circle"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"cx"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{size "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"-"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," r} "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"cy"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{r} "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{r} "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"color"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"magenta"'),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," />")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," <"),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"Circle")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"cx"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{size"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"/"),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"2"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"}")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"cy"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{size "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"-"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," r}")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{r}")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"color"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"yellow"')),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," />")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," );")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"console"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".log"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"image"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".encodeToBase64"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"());")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#C2C3C5"}},"// Cleaning up CanvasKit resources")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"image"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".dispose"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"();")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"surface"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".dispose"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"();")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"})();"))))),(0,r.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,r.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,r.yg)("div",{parentName:"pre",className:"code-container"},(0,r.yg)("code",{parentName:"div"},(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"LoadSkiaWeb"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"@shopify/react-native-skia/lib/commonjs/web/LoadSkiaWeb"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"Fill"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},","),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"makeOffscreenSurface"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},","),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"drawOffscreen"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},","),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"getSkiaExports"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"@shopify/react-native-skia/lib/commonjs/headless"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"}),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"async"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"width"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#B48EAD"}},"256"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"height"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#B48EAD"}},"256"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"size"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"*"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#B48EAD"}},"0.33"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"await"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"LoadSkiaWeb"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"()"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#616E88"}},"// Once that CanvasKit is loaded, you can access Skia via getSkiaExports()")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#616E88"}},'// Alternatively you can do const {Skia} = require("@shopify/react-native-skia")')),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"Skia"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"getSkiaExports"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"()"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"surface"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"makeOffscreenSurface"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"width"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},","),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"height"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"image"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"drawOffscreen"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"surface"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"<"),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"Group"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"blendMode"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"multiply"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},">")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"<"),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"Circle"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"cx"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"cy"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"color"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"cyan"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"/>")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"<"),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"Circle"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"cx"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"size"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"-"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"cy"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"color"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"magenta"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"/>")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"<"),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"Circle")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"cx"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"size"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"/"),(0,r.yg)("span",{parentName:"div",style:{color:"#B48EAD"}},"2"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"cy"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"size"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"-"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"color"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"yellow"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"')),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"/>")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},""),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"console"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"log"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"image"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"encodeToBase64"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"())"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#616E88"}},"// Cleaning up CanvasKit resources")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"image"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"dispose"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"()"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"surface"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"dispose"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"()"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")()"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")))))),(0,r.yg)("h2",{id:"gpu-acceleration"},"GPU Acceleration"),(0,r.yg)("p",null,"React Native Skia relies on the ",(0,r.yg)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas"},"OffscreenCanvas API")," to support GPU-Accelerated offscreen surfacs.\nThis means, that to benefit from the GPU acceleration, you will need to provide a polyfill of the ",(0,r.yg)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas"},"OffscreenCanvas API")," on Node.\nFor example, ",(0,r.yg)("a",{parentName:"p",href:"https://gist.github.com/wcandillon/a46e922910a814139758d6eda9d99ff8"},"here")," is an OffScreenCanvas polyfill implementation that relies on WebGL using ",(0,r.yg)("a",{parentName:"p",href:"https://github.com/stackgl/headless-gl"},"headless-gl"),"."))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/48b260a9.e9b5d969.js b/assets/js/48b260a9.e9b5d969.js deleted file mode 100644 index 148bebf136..0000000000 --- a/assets/js/48b260a9.e9b5d969.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8648],{5788:(e,a,t)=>{t.d(a,{Iu:()=>i,yg:()=>g});var n=t(1504);function r(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function s(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),t.push.apply(t,n)}return t}function o(e){for(var a=1;a=0||(r[t]=e[t]);return r}(e,a);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var p=n.createContext({}),y=function(e){var a=n.useContext(p),t=a;return e&&(t="function"==typeof e?e(a):o(o({},a),e)),t},i=function(e){var a=y(e.components);return n.createElement(p.Provider,{value:a},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var a=e.children;return n.createElement(n.Fragment,{},a)}},m=n.forwardRef((function(e,a){var t=e.components,r=e.mdxType,s=e.originalType,p=e.parentName,i=l(e,["components","mdxType","originalType","parentName"]),c=y(t),m=r,g=c["".concat(p,".").concat(m)]||c[m]||d[m]||s;return t?n.createElement(g,o(o({ref:a},i),{},{components:t})):n.createElement(g,o({ref:a},i))}));function g(e,a){var t=arguments,r=a&&a.mdxType;if("string"==typeof e||r){var s=t.length,o=new Array(s);o[0]=m;var l={};for(var p in a)hasOwnProperty.call(a,p)&&(l[p]=a[p]);l.originalType=e,l[c]="string"==typeof e?e:r,o[1]=l;for(var y=2;y{t.r(a),t.d(a,{assets:()=>p,contentTitle:()=>o,default:()=>d,frontMatter:()=>s,metadata:()=>l,toc:()=>y});var n=t(5072),r=(t(1504),t(5788));const s={id:"headless",title:"Headless",sidebar_label:"Headless",slug:"/getting-started/headless"},o=void 0,l={unversionedId:"getting-started/headless",id:"getting-started/headless",title:"Headless",description:"Thanks to its offscreen capabilities, React Native Skia can run on Node.",source:"@site/docs/getting-started/headless.md",sourceDirName:"getting-started",slug:"/getting-started/headless",permalink:"/react-native-skia/docs/getting-started/headless",draft:!1,editUrl:"https://github.com/shopify/react-native-skia/edit/main/docs/docs/getting-started/headless.md",tags:[],version:"current",frontMatter:{id:"headless",title:"Headless",sidebar_label:"Headless",slug:"/getting-started/headless"},sidebar:"tutorialSidebar",previous:{title:"Web",permalink:"/react-native-skia/docs/getting-started/web"},next:{title:"Bundle Size",permalink:"/react-native-skia/docs/getting-started/bundle-size"}},p={},y=[{value:"Hello World",id:"hello-world",level:2},{value:"GPU Acceleration",id:"gpu-acceleration",level:2}],i={toc:y},c="wrapper";function d(e){let{components:a,...t}=e;return(0,r.yg)(c,(0,n.c)({},i,t,{components:a,mdxType:"MDXLayout"}),(0,r.yg)("p",null,"Thanks to its offscreen capabilities, React Native Skia can run on Node.\nThis means that you can use the Skia API to draw things that can be encoded and saved as images.\nBy default, drawings will be executed on the CPU but it is possible to also use ",(0,r.yg)("a",{parentName:"p",href:"#gpu-acceleration"},"GPU Acceleration"),"."),(0,r.yg)("h2",{id:"hello-world"},"Hello World"),(0,r.yg)("p",null,"You will notice in the example below that the import URL looks different than the one used in React Native. There are two reasons for it. First, because Node programs don't rely on module bundlers such as Webpack, you will need to use the commonjs build of React Native Skia. Finally, we want to import the Skia APIs we need on Node without importing the one that rely on pure React Native APIs."),(0,r.yg)("div",{className:"shiki-twoslash-fragment"},(0,r.yg)("pre",{parentName:"div",className:"shiki min-light",style:{backgroundColor:"#ffffff",color:"#24292eff"}},(0,r.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,r.yg)("div",{parentName:"pre",className:"code-container"},(0,r.yg)("code",{parentName:"div"},(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { LoadSkiaWeb } "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"@shopify/react-native-skia/lib/commonjs/web/LoadSkiaWeb"'),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { Fill"),(0,r.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," makeOffscreenSurface"),(0,r.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," drawOffscreen } "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"@shopify/react-native-skia/lib/commonjs/headless"'),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"}),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"async"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," () "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"width"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"256"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"height"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"256"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," size "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"*"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"0.33"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"await"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"LoadSkiaWeb"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"();")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"surface"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"makeOffscreenSurface"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(width"),(0,r.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," height);")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"image"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"drawOffscreen"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(surface"),(0,r.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," <"),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"Group"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"blendMode"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"multiply"'),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},">")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," <"),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"Circle"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"cx"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{r} "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"cy"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{r} "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{r} "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"color"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"cyan"'),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," />")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," <"),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"Circle"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"cx"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{size "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"-"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," r} "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"cy"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{r} "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{r} "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"color"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"magenta"'),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," />")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," <"),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"Circle")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"cx"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{size"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"/"),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"2"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"}")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"cy"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{size "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"-"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," r}")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{r}")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"color"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"yellow"')),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," />")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," );")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"console"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".log"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"image"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".encodeToBase64"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"());")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#C2C3C5"}},"// Cleaning up CanvasKit resources")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"image"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".dispose"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"();")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"surface"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".dispose"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"();")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"})();"))))),(0,r.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,r.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,r.yg)("div",{parentName:"pre",className:"code-container"},(0,r.yg)("code",{parentName:"div"},(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"LoadSkiaWeb"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"@shopify/react-native-skia/lib/commonjs/web/LoadSkiaWeb"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"Fill"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},","),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"makeOffscreenSurface"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},","),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"drawOffscreen"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"@shopify/react-native-skia/lib/commonjs/headless"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"}),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"async"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"width"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#B48EAD"}},"256"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"height"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#B48EAD"}},"256"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"size"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"*"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#B48EAD"}},"0.33"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"await"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"LoadSkiaWeb"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"()"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"surface"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"makeOffscreenSurface"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"width"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},","),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"height"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"image"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"drawOffscreen"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"surface"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"<"),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"Group"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"blendMode"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"multiply"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},">")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"<"),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"Circle"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"cx"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"cy"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"color"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"cyan"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"/>")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"<"),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"Circle"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"cx"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"size"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"-"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"cy"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"color"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"magenta"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"/>")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"<"),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"Circle")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"cx"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"size"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"/"),(0,r.yg)("span",{parentName:"div",style:{color:"#B48EAD"}},"2"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"cy"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"size"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"-"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"r"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"color"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"yellow"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"')),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"/>")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},""),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"console"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"log"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"image"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"encodeToBase64"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"())"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#616E88"}},"// Cleaning up CanvasKit resources")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"image"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"dispose"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"()"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"surface"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"dispose"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"()"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")()"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")))))),(0,r.yg)("h2",{id:"gpu-acceleration"},"GPU Acceleration"),(0,r.yg)("p",null,"React Native Skia relies on the ",(0,r.yg)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas"},"OffscreenCanvas API")," to support GPU-Accelerated offscreen surfacs.\nThis means, that to benefit from the GPU acceleration, you will need to provide a polyfill of the ",(0,r.yg)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas"},"OffscreenCanvas API")," on Node.\nFor example, ",(0,r.yg)("a",{parentName:"p",href:"https://gist.github.com/wcandillon/a46e922910a814139758d6eda9d99ff8"},"here")," is an OffScreenCanvas polyfill implementation that relies on WebGL using ",(0,r.yg)("a",{parentName:"p",href:"https://github.com/stackgl/headless-gl"},"headless-gl"),"."))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.3d954a90.js b/assets/js/runtime~main.441472cb.js similarity index 98% rename from assets/js/runtime~main.3d954a90.js rename to assets/js/runtime~main.441472cb.js index 2ca67b91e3..605bfe0511 100644 --- a/assets/js/runtime~main.3d954a90.js +++ b/assets/js/runtime~main.441472cb.js @@ -1 +1 @@ -(()=>{"use strict";var e,f,a,c,t,r={},b={};function d(e){var f=b[e];if(void 0!==f)return f.exports;var a=b[e]={id:e,loaded:!1,exports:{}};return r[e].call(a.exports,a,a.exports,d),a.loaded=!0,a.exports}d.m=r,d.c=b,e=[],d.O=(f,a,c,t)=>{if(!a){var r=1/0;for(i=0;i=t)&&Object.keys(d.O).every((e=>d.O[e](a[o])))?a.splice(o--,1):(b=!1,t0&&e[i-1][2]>t;i--)e[i]=e[i-1];e[i]=[a,c,t]},d.n=e=>{var f=e&&e.__esModule?()=>e.default:()=>e;return d.d(f,{a:f}),f},a=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,d.t=function(e,c){if(1&c&&(e=this(e)),8&c)return e;if("object"==typeof e&&e){if(4&c&&e.__esModule)return e;if(16&c&&"function"==typeof e.then)return e}var t=Object.create(null);d.r(t);var r={};f=f||[null,a({}),a([]),a(a)];for(var b=2&c&&e;"object"==typeof b&&!~f.indexOf(b);b=a(b))Object.getOwnPropertyNames(b).forEach((f=>r[f]=()=>e[f]));return r.default=()=>e,d.d(t,r),t},d.d=(e,f)=>{for(var a in f)d.o(f,a)&&!d.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:f[a]})},d.f={},d.e=e=>Promise.all(Object.keys(d.f).reduce(((f,a)=>(d.f[a](e,f),f)),[])),d.u=e=>"assets/js/"+({112:"b5fb04c4",336:"b180cb59",568:"c41113e6",572:"1fd95965",632:"746c3835",784:"56bc4d30",1052:"c27acf4f",1184:"7a82f8bb",1484:"cd1bddbb",1920:"77a286ef",2279:"b75af743",2428:"ff9a9fa0",2828:"c276972c",2920:"74962b7a",3328:"86213437",3656:"2e8580e3",3812:"2a1f4266",4038:"4202b8b4",4057:"0cfdea51",4314:"75c2a955",4368:"37f7667e",4412:"f01dbc50",4820:"50cc6587",5200:"0964e688",5436:"81ba9097",5480:"a353bf9a",5676:"74221e1e",5696:"935f2afb",5776:"9feca31f",5788:"fef6ce38",5820:"9292f71d",5832:"6d22a533",5852:"6b4de4e0",5984:"54f44165",6216:"0bfe406e",6264:"143afd72",6616:"9985d9ca",6720:"11bed396",6752:"17896441",6912:"e6799f70",6972:"4db8806d",7044:"a70226ba",7204:"f9843ad8",7624:"b602490d",8076:"9c337b23",8336:"adaaf6b2",8552:"1df93b7f",8648:"48b260a9",8680:"eb5f9d22",8761:"4f66049a",9290:"f9769624",9380:"c710f5d3",9392:"d9698d18",9648:"1a4e3797",9656:"1be78505",9738:"ce8b1716",9772:"f126396f",9852:"e28e8f5c"}[e]||e)+"."+{112:"f0d973a6",336:"2d96ace2",568:"3d689d17",572:"07df1cc3",632:"f1478fdd",784:"ba9a3bfb",1052:"affdef5e",1184:"2f6d6844",1484:"16611862",1676:"5ac4a266",1920:"c2f50220",2152:"b6af9506",2279:"96181acb",2428:"b1d63a75",2528:"e7e83c77",2828:"fa1aa92b",2920:"7fe27696",3328:"9912d481",3656:"f56e548c",3812:"52d37840",4038:"2beaeecb",4057:"753c69e3",4314:"b52550e8",4368:"fedcfe4b",4412:"fc5b2acc",4820:"74fa587d",5200:"f8c65042",5436:"38ca3029",5480:"7819fb7b",5676:"447efe0c",5696:"99909ab3",5776:"05e9701c",5788:"0297b03b",5820:"e78c0e05",5832:"b272f8e5",5852:"472ef326",5984:"730e4a14",6216:"7a74c4da",6264:"13ee0a23",6616:"d9017074",6720:"1c6cfe9d",6752:"c6f61a5f",6912:"2789276c",6972:"0a972f1f",7044:"110a07a6",7204:"803d3561",7624:"3c46103a",8076:"167d6ac4",8336:"8aa10fe4",8552:"85b6aeae",8648:"e9b5d969",8680:"81f6b5d7",8761:"6dbd9a4c",8879:"827915ee",9290:"cc136ead",9380:"8bb50d6b",9392:"6e86691e",9648:"f13d52da",9656:"a24f2068",9738:"bc4bacc9",9772:"6414f9a6",9852:"e8bc7dfd"}[e]+".js",d.miniCssF=e=>{},d.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),d.o=(e,f)=>Object.prototype.hasOwnProperty.call(e,f),c={},t="docs:",d.l=(e,f,a,r)=>{if(c[e])c[e].push(f);else{var b,o;if(void 0!==a)for(var n=document.getElementsByTagName("script"),i=0;i{b.onerror=b.onload=null,clearTimeout(s);var t=c[e];if(delete c[e],b.parentNode&&b.parentNode.removeChild(b),t&&t.forEach((e=>e(a))),f)return f(a)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:b}),12e4);b.onerror=l.bind(null,b.onerror),b.onload=l.bind(null,b.onload),o&&document.head.appendChild(b)}},d.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.p="/react-native-skia/",d.gca=function(e){return e={17896441:"6752",86213437:"3328",b5fb04c4:"112",b180cb59:"336",c41113e6:"568","1fd95965":"572","746c3835":"632","56bc4d30":"784",c27acf4f:"1052","7a82f8bb":"1184",cd1bddbb:"1484","77a286ef":"1920",b75af743:"2279",ff9a9fa0:"2428",c276972c:"2828","74962b7a":"2920","2e8580e3":"3656","2a1f4266":"3812","4202b8b4":"4038","0cfdea51":"4057","75c2a955":"4314","37f7667e":"4368",f01dbc50:"4412","50cc6587":"4820","0964e688":"5200","81ba9097":"5436",a353bf9a:"5480","74221e1e":"5676","935f2afb":"5696","9feca31f":"5776",fef6ce38:"5788","9292f71d":"5820","6d22a533":"5832","6b4de4e0":"5852","54f44165":"5984","0bfe406e":"6216","143afd72":"6264","9985d9ca":"6616","11bed396":"6720",e6799f70:"6912","4db8806d":"6972",a70226ba:"7044",f9843ad8:"7204",b602490d:"7624","9c337b23":"8076",adaaf6b2:"8336","1df93b7f":"8552","48b260a9":"8648",eb5f9d22:"8680","4f66049a":"8761",f9769624:"9290",c710f5d3:"9380",d9698d18:"9392","1a4e3797":"9648","1be78505":"9656",ce8b1716:"9738",f126396f:"9772",e28e8f5c:"9852"}[e]||e,d.p+d.u(e)},(()=>{var e={296:0,2176:0};d.f.j=(f,a)=>{var c=d.o(e,f)?e[f]:void 0;if(0!==c)if(c)a.push(c[2]);else if(/^2(17|9)6$/.test(f))e[f]=0;else{var t=new Promise(((a,t)=>c=e[f]=[a,t]));a.push(c[2]=t);var r=d.p+d.u(f),b=new Error;d.l(r,(a=>{if(d.o(e,f)&&(0!==(c=e[f])&&(e[f]=void 0),c)){var t=a&&("load"===a.type?"missing":a.type),r=a&&a.target&&a.target.src;b.message="Loading chunk "+f+" failed.\n("+t+": "+r+")",b.name="ChunkLoadError",b.type=t,b.request=r,c[1](b)}}),"chunk-"+f,f)}},d.O.j=f=>0===e[f];var f=(f,a)=>{var c,t,r=a[0],b=a[1],o=a[2],n=0;if(r.some((f=>0!==e[f]))){for(c in b)d.o(b,c)&&(d.m[c]=b[c]);if(o)var i=o(d)}for(f&&f(a);n{"use strict";var e,f,a,c,t,r={},b={};function d(e){var f=b[e];if(void 0!==f)return f.exports;var a=b[e]={id:e,loaded:!1,exports:{}};return r[e].call(a.exports,a,a.exports,d),a.loaded=!0,a.exports}d.m=r,d.c=b,e=[],d.O=(f,a,c,t)=>{if(!a){var r=1/0;for(i=0;i=t)&&Object.keys(d.O).every((e=>d.O[e](a[o])))?a.splice(o--,1):(b=!1,t0&&e[i-1][2]>t;i--)e[i]=e[i-1];e[i]=[a,c,t]},d.n=e=>{var f=e&&e.__esModule?()=>e.default:()=>e;return d.d(f,{a:f}),f},a=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,d.t=function(e,c){if(1&c&&(e=this(e)),8&c)return e;if("object"==typeof e&&e){if(4&c&&e.__esModule)return e;if(16&c&&"function"==typeof e.then)return e}var t=Object.create(null);d.r(t);var r={};f=f||[null,a({}),a([]),a(a)];for(var b=2&c&&e;"object"==typeof b&&!~f.indexOf(b);b=a(b))Object.getOwnPropertyNames(b).forEach((f=>r[f]=()=>e[f]));return r.default=()=>e,d.d(t,r),t},d.d=(e,f)=>{for(var a in f)d.o(f,a)&&!d.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:f[a]})},d.f={},d.e=e=>Promise.all(Object.keys(d.f).reduce(((f,a)=>(d.f[a](e,f),f)),[])),d.u=e=>"assets/js/"+({112:"b5fb04c4",336:"b180cb59",568:"c41113e6",572:"1fd95965",632:"746c3835",784:"56bc4d30",1052:"c27acf4f",1184:"7a82f8bb",1484:"cd1bddbb",1920:"77a286ef",2279:"b75af743",2428:"ff9a9fa0",2828:"c276972c",2920:"74962b7a",3328:"86213437",3656:"2e8580e3",3812:"2a1f4266",4038:"4202b8b4",4057:"0cfdea51",4314:"75c2a955",4368:"37f7667e",4412:"f01dbc50",4820:"50cc6587",5200:"0964e688",5436:"81ba9097",5480:"a353bf9a",5676:"74221e1e",5696:"935f2afb",5776:"9feca31f",5788:"fef6ce38",5820:"9292f71d",5832:"6d22a533",5852:"6b4de4e0",5984:"54f44165",6216:"0bfe406e",6264:"143afd72",6616:"9985d9ca",6720:"11bed396",6752:"17896441",6912:"e6799f70",6972:"4db8806d",7044:"a70226ba",7204:"f9843ad8",7624:"b602490d",8076:"9c337b23",8336:"adaaf6b2",8552:"1df93b7f",8648:"48b260a9",8680:"eb5f9d22",8761:"4f66049a",9290:"f9769624",9380:"c710f5d3",9392:"d9698d18",9648:"1a4e3797",9656:"1be78505",9738:"ce8b1716",9772:"f126396f",9852:"e28e8f5c"}[e]||e)+"."+{112:"f0d973a6",336:"2d96ace2",568:"3d689d17",572:"07df1cc3",632:"f1478fdd",784:"ba9a3bfb",1052:"affdef5e",1184:"2f6d6844",1484:"16611862",1676:"5ac4a266",1920:"c2f50220",2152:"b6af9506",2279:"96181acb",2428:"b1d63a75",2528:"e7e83c77",2828:"fa1aa92b",2920:"7fe27696",3328:"9912d481",3656:"f56e548c",3812:"52d37840",4038:"2beaeecb",4057:"753c69e3",4314:"b52550e8",4368:"fedcfe4b",4412:"fc5b2acc",4820:"74fa587d",5200:"f8c65042",5436:"38ca3029",5480:"7819fb7b",5676:"447efe0c",5696:"99909ab3",5776:"05e9701c",5788:"0297b03b",5820:"e78c0e05",5832:"b272f8e5",5852:"472ef326",5984:"730e4a14",6216:"7a74c4da",6264:"13ee0a23",6616:"d9017074",6720:"1c6cfe9d",6752:"c6f61a5f",6912:"2789276c",6972:"0a972f1f",7044:"110a07a6",7204:"803d3561",7624:"3c46103a",8076:"167d6ac4",8336:"8aa10fe4",8552:"85b6aeae",8648:"41d8dc6e",8680:"81f6b5d7",8761:"6dbd9a4c",8879:"827915ee",9290:"cc136ead",9380:"8bb50d6b",9392:"6e86691e",9648:"f13d52da",9656:"a24f2068",9738:"bc4bacc9",9772:"6414f9a6",9852:"e8bc7dfd"}[e]+".js",d.miniCssF=e=>{},d.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),d.o=(e,f)=>Object.prototype.hasOwnProperty.call(e,f),c={},t="docs:",d.l=(e,f,a,r)=>{if(c[e])c[e].push(f);else{var b,o;if(void 0!==a)for(var n=document.getElementsByTagName("script"),i=0;i{b.onerror=b.onload=null,clearTimeout(s);var t=c[e];if(delete c[e],b.parentNode&&b.parentNode.removeChild(b),t&&t.forEach((e=>e(a))),f)return f(a)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:b}),12e4);b.onerror=l.bind(null,b.onerror),b.onload=l.bind(null,b.onload),o&&document.head.appendChild(b)}},d.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.p="/react-native-skia/",d.gca=function(e){return e={17896441:"6752",86213437:"3328",b5fb04c4:"112",b180cb59:"336",c41113e6:"568","1fd95965":"572","746c3835":"632","56bc4d30":"784",c27acf4f:"1052","7a82f8bb":"1184",cd1bddbb:"1484","77a286ef":"1920",b75af743:"2279",ff9a9fa0:"2428",c276972c:"2828","74962b7a":"2920","2e8580e3":"3656","2a1f4266":"3812","4202b8b4":"4038","0cfdea51":"4057","75c2a955":"4314","37f7667e":"4368",f01dbc50:"4412","50cc6587":"4820","0964e688":"5200","81ba9097":"5436",a353bf9a:"5480","74221e1e":"5676","935f2afb":"5696","9feca31f":"5776",fef6ce38:"5788","9292f71d":"5820","6d22a533":"5832","6b4de4e0":"5852","54f44165":"5984","0bfe406e":"6216","143afd72":"6264","9985d9ca":"6616","11bed396":"6720",e6799f70:"6912","4db8806d":"6972",a70226ba:"7044",f9843ad8:"7204",b602490d:"7624","9c337b23":"8076",adaaf6b2:"8336","1df93b7f":"8552","48b260a9":"8648",eb5f9d22:"8680","4f66049a":"8761",f9769624:"9290",c710f5d3:"9380",d9698d18:"9392","1a4e3797":"9648","1be78505":"9656",ce8b1716:"9738",f126396f:"9772",e28e8f5c:"9852"}[e]||e,d.p+d.u(e)},(()=>{var e={296:0,2176:0};d.f.j=(f,a)=>{var c=d.o(e,f)?e[f]:void 0;if(0!==c)if(c)a.push(c[2]);else if(/^2(17|9)6$/.test(f))e[f]=0;else{var t=new Promise(((a,t)=>c=e[f]=[a,t]));a.push(c[2]=t);var r=d.p+d.u(f),b=new Error;d.l(r,(a=>{if(d.o(e,f)&&(0!==(c=e[f])&&(e[f]=void 0),c)){var t=a&&("load"===a.type?"missing":a.type),r=a&&a.target&&a.target.src;b.message="Loading chunk "+f+" failed.\n("+t+": "+r+")",b.name="ChunkLoadError",b.type=t,b.request=r,c[1](b)}}),"chunk-"+f,f)}},d.O.j=f=>0===e[f];var f=(f,a)=>{var c,t,r=a[0],b=a[1],o=a[2],n=0;if(r.some((f=>0!==e[f]))){for(c in b)d.o(b,c)&&(d.m[c]=b[c]);if(o)var i=o(d)}for(f&&f(a);n Animated Images | React Native Skia - + @@ -34,7 +34,7 @@ import useAnimatedImage">useAnimatedImage} from "@shopify/react-native-skia";
 
// bird is an SkAnimatedImage
const bird = useAnimatedImage(
require("../../assets/birdFlying.gif")
)!;
// SkAnimatedImage offers 3 methods: decodeNextFrame(), getCurrentFrame(), and currentFrameDuration()
// getCurrentFrame() returns a regular SkImage
const image = bird.getCurrentFrame();
// decode the next frame
bird.decodeNextFrame();
// fetch the current frame number
const currentFrame = bird.currentFrameDuration();
- + \ No newline at end of file diff --git a/docs/animations/animations/index.html b/docs/animations/animations/index.html index 3b03502beb..e3f186e7dd 100644 --- a/docs/animations/animations/index.html +++ b/docs/animations/animations/index.html @@ -4,7 +4,7 @@ Reanimated 3 | React Native Skia - + @@ -51,7 +51,7 @@ import Circle">Circle
cx={size/2}
cy={c}
r={r}
color="yellow"
/>
</Group>
</Canvas>
);
};

We offer some Skia specific animation hooks, especially for paths.

- + \ No newline at end of file diff --git a/docs/animations/gestures/index.html b/docs/animations/gestures/index.html index 4b16c1bc25..b13a78ebcd 100644 --- a/docs/animations/gestures/index.html +++ b/docs/animations/gestures/index.html @@ -4,7 +4,7 @@ Gestures | React Native Skia - + @@ -298,7 +298,7 @@ }">style} />
</GestureDetector>
</View>
);
};
- + \ No newline at end of file diff --git a/docs/animations/hooks/index.html b/docs/animations/hooks/index.html index bf56fd8da1..6001d6f302 100644 --- a/docs/animations/hooks/index.html +++ b/docs/animations/hooks/index.html @@ -4,7 +4,7 @@ Hooks | React Native Skia - + @@ -336,7 +336,7 @@ x: number; y: number; }">value.x);
val.set(Math.cos(r), Math.sin(r), 0, 0);
});
- + \ No newline at end of file diff --git a/docs/animations/reanimated2/index.html b/docs/animations/reanimated2/index.html index 9a804ab2cf..7201d5e8d0 100644 --- a/docs/animations/reanimated2/index.html +++ b/docs/animations/reanimated2/index.html @@ -4,7 +4,7 @@ Reanimated 2 | React Native Skia - + @@ -164,7 +164,7 @@ } import Gesture">Gesture.Pan().runOnJS(true).onChange(e => pos.value = vec(e.x, 0));
- + \ No newline at end of file diff --git a/docs/animations/textures/index.html b/docs/animations/textures/index.html index 53abd5ab68..9fe4c51671 100644 --- a/docs/animations/textures/index.html +++ b/docs/animations/textures/index.html @@ -4,7 +4,7 @@ Textures | React Native Skia - + @@ -141,7 +141,7 @@ import Canvas">Canvas style={{ flex: 1 }}>
<Image image={image} x={0} y={0} width={200} height={200} />
</Canvas>
);
};

This example demonstrates how to create a texture, draw a cyan color onto it, and then display it using the Image component from @shopify/react-native-skia. The runOnUI function ensures that the texture creation and drawing operations are performed on the UI thread for optimal performance.

Make sure that you have installed the necessary packages and configured your project to use Reanimated 2 and @shopify/react-native-skia before running this code.

- + \ No newline at end of file diff --git a/docs/backdrops-filters/index.html b/docs/backdrops-filters/index.html index ed6303dbb4..a1f0c79d44 100644 --- a/docs/backdrops-filters/index.html +++ b/docs/backdrops-filters/index.html @@ -4,7 +4,7 @@ Backdrop Filters | React Native Skia - + @@ -64,7 +64,7 @@ import Fill">Fill color="rgba(0, 0, 0, 0.2)" />
</BackdropBlur>
</Canvas>
);
};
- + \ No newline at end of file diff --git a/docs/canvas/contexts/index.html b/docs/canvas/contexts/index.html index 874a28eb34..0404b1a1e1 100644 --- a/docs/canvas/contexts/index.html +++ b/docs/canvas/contexts/index.html @@ -4,7 +4,7 @@ Contexts | React Native Skia - + @@ -148,7 +148,7 @@ import ReactNode">ReactNode;
}) => (
<ThemeContext.Provider value={{ primary }}>
{children}
</ThemeContext.Provider>
);
 
export const useTheme = () => {
const theme = useContext(ThemeContext);
if (theme === null) {
throw new Error("Theme provider not found");
}
return theme;
};
- + \ No newline at end of file diff --git a/docs/canvas/overview/index.html b/docs/canvas/overview/index.html index 7be3e0f9ef..437640c4aa 100644 --- a/docs/canvas/overview/index.html +++ b/docs/canvas/overview/index.html @@ -4,7 +4,7 @@ Canvas | React Native Skia - + @@ -32,7 +32,7 @@ import Canvas">Canvas style={{ flex: 1 }} ref={ref}>
<Circle r={128} cx={128} cy={128} color="red" />
</Canvas>
);
};
- + \ No newline at end of file diff --git a/docs/color-filters/index.html b/docs/color-filters/index.html index ba2d272f37..60af0646fd 100644 --- a/docs/color-filters/index.html +++ b/docs/color-filters/index.html @@ -4,7 +4,7 @@ Color Filters | React Native Skia - + @@ -137,7 +137,7 @@ import Circle">Circle cx={r} cy={r} r={r} />
</Group>
</Canvas>
);
};
- + \ No newline at end of file diff --git a/docs/getting-started/bundle-size/index.html b/docs/getting-started/bundle-size/index.html index e66424d42c..963a3a85b6 100644 --- a/docs/getting-started/bundle-size/index.html +++ b/docs/getting-started/bundle-size/index.html @@ -4,7 +4,7 @@ Bundle Size | React Native Skia - + @@ -13,7 +13,7 @@ This is because the library is built for different target architectures. If we take arm-64-bit for instance, the librnskia.so library file is only around 3,8 MB.

This implies that if you distribute your apps using App Bundles, the increase in download size should be around 4 MB on Android devices when distributed (including an increase of 220 KB to the Javascript Bundle).

iOS​

Unlike Android, there is no standard way to find the app size increase on iOS - but by archiving and distributing our build using the Ad-Hoc distribution method, we'll find some numbers in the report "App Thinning Size.txt":

Base app: 2,6 MB compressed, 7,2 MB uncompressed
With React Native Skia: 5,2 MB compressed, 13 MB uncompressed

Meaning that we’ve increased the size of our app by around 5,8 MB after adding React Native Skia. If we add the increased Javascript bundle of about 220 KB, we end up with about 6 MB of increased download size after including React Native Skia.

NPM Package​

The NPM download is bigger than these numbers indicate because we need to distribute Skia for all target platforms on both iOS and Android.

- + \ No newline at end of file diff --git a/docs/getting-started/headless/index.html b/docs/getting-started/headless/index.html index 623c2d53a3..9b8514e8d5 100644 --- a/docs/getting-started/headless/index.html +++ b/docs/getting-started/headless/index.html @@ -4,17 +4,17 @@ Headless | React Native Skia - +

Headless

Thanks to its offscreen capabilities, React Native Skia can run on Node. This means that you can use the Skia API to draw things that can be encoded and saved as images. -By default, drawings will be executed on the CPU but it is possible to also use GPU Acceleration.

Hello World​

You will notice in the example below that the import URL looks different than the one used in React Native. There are two reasons for it. First, because Node programs don't rely on module bundlers such as Webpack, you will need to use the commonjs build of React Native Skia. Finally, we want to import the Skia APIs we need on Node without importing the one that rely on pure React Native APIs.

tsx
import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/commonjs/web/LoadSkiaWeb";
import { Fill, makeOffscreenSurface, drawOffscreen } from "@shopify/react-native-skia/lib/commonjs/headless";
(async () => {
  const width = 256;
  const height = 256;
  const r = size * 0.33;
  await LoadSkiaWeb();
  const surface = makeOffscreenSurface(width, height);
  const image = drawOffscreen(surface,
    <Group blendMode="multiply">
      <Circle cx={r} cy={r} r={r} color="cyan" />
      <Circle cx={size - r} cy={r} r={r} color="magenta" />
      <Circle
        cx={size/2}
        cy={size - r}
        r={r}
        color="yellow"
      />
    </Group>);
  console.log(image.encodeToBase64());
  // Cleaning up CanvasKit resources
  image.dispose();
  surface.dispose();
})();
tsx
import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/commonjs/web/LoadSkiaWeb";
import { Fill, makeOffscreenSurface, drawOffscreen } from "@shopify/react-native-skia/lib/commonjs/headless";
(async () => {
  const width = 256;
  const height = 256;
  const r = size * 0.33;
  await LoadSkiaWeb();
  const surface = makeOffscreenSurface(width, height);
  const image = drawOffscreen(surface,
    <Group blendMode="multiply">
      <Circle cx={r} cy={r} r={r} color="cyan" />
      <Circle cx={size - r} cy={r} r={r} color="magenta" />
      <Circle
        cx={size/2}
        cy={size - r}
        r={r}
        color="yellow"
      />
    </Group>);
  console.log(image.encodeToBase64());
  // Cleaning up CanvasKit resources
  image.dispose();
  surface.dispose();
})();

GPU Acceleration​

React Native Skia relies on the OffscreenCanvas API to support GPU-Accelerated offscreen surfacs. +By default, drawings will be executed on the CPU but it is possible to also use GPU Acceleration.

Hello World​

You will notice in the example below that the import URL looks different than the one used in React Native. There are two reasons for it. First, because Node programs don't rely on module bundlers such as Webpack, you will need to use the commonjs build of React Native Skia. Finally, we want to import the Skia APIs we need on Node without importing the one that rely on pure React Native APIs.

tsx
import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/commonjs/web/LoadSkiaWeb";
import { Fill, makeOffscreenSurface, drawOffscreen, getSkiaExports } from "@shopify/react-native-skia/lib/commonjs/headless";
(async () => {
  const width = 256;
  const height = 256;
  const r = size * 0.33;
  await LoadSkiaWeb();
  // Once that CanvasKit is loaded, you can access Skia via getSkiaExports()
  // Alternatively you can do const {Skia} = require("@shopify/react-native-skia")
  const {Skia} = getSkiaExports();
  const surface = makeOffscreenSurface(width, height);
  const image = drawOffscreen(surface,
    <Group blendMode="multiply">
      <Circle cx={r} cy={r} r={r} color="cyan" />
      <Circle cx={size - r} cy={r} r={r} color="magenta" />
      <Circle
        cx={size/2}
        cy={size - r}
        r={r}
        color="yellow"
      />
    </Group>);
  console.log(image.encodeToBase64());
  // Cleaning up CanvasKit resources
  image.dispose();
  surface.dispose();
})();
tsx
import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/commonjs/web/LoadSkiaWeb";
import { Fill, makeOffscreenSurface, drawOffscreen, getSkiaExports } from "@shopify/react-native-skia/lib/commonjs/headless";
(async () => {
  const width = 256;
  const height = 256;
  const r = size * 0.33;
  await LoadSkiaWeb();
  // Once that CanvasKit is loaded, you can access Skia via getSkiaExports()
  // Alternatively you can do const {Skia} = require("@shopify/react-native-skia")
  const {Skia} = getSkiaExports();
  const surface = makeOffscreenSurface(width, height);
  const image = drawOffscreen(surface,
    <Group blendMode="multiply">
      <Circle cx={r} cy={r} r={r} color="cyan" />
      <Circle cx={size - r} cy={r} r={r} color="magenta" />
      <Circle
        cx={size/2}
        cy={size - r}
        r={r}
        color="yellow"
      />
    </Group>);
  console.log(image.encodeToBase64());
  // Cleaning up CanvasKit resources
  image.dispose();
  surface.dispose();
})();

GPU Acceleration​

React Native Skia relies on the OffscreenCanvas API to support GPU-Accelerated offscreen surfacs. This means, that to benefit from the GPU acceleration, you will need to provide a polyfill of the OffscreenCanvas API on Node. For example, here is an OffScreenCanvas polyfill implementation that relies on WebGL using headless-gl.

- + \ No newline at end of file diff --git a/docs/getting-started/hello-world/index.html b/docs/getting-started/hello-world/index.html index d70475a8fc..ac60bab975 100644 --- a/docs/getting-started/hello-world/index.html +++ b/docs/getting-started/hello-world/index.html @@ -4,7 +4,7 @@ Hello World | React Native Skia - + @@ -32,7 +32,7 @@ import Circle">Circle cx={width / 2} cy={width - r} r={r} color="yellow" />
</Group>
</Canvas>
);
};
 
export default App;

Result​

Hello World
- + \ No newline at end of file diff --git a/docs/getting-started/installation/index.html b/docs/getting-started/installation/index.html index 35d3b5b6f6..b2616594ca 100644 --- a/docs/getting-started/installation/index.html +++ b/docs/getting-started/installation/index.html @@ -4,7 +4,7 @@ Installation | React Native Skia - + @@ -19,7 +19,7 @@ Find CMake and click Show Package Details and download compatiable version 'X.X.X', and apply to install.

Web​

To use this library in the browser, see these instructions.

Playground​

We have an example project you can play with here.

sh
yarn bootstrap
cd example && yarn start
sh
yarn bootstrap
cd example && yarn start

To run the example project on iOS, you will need to run pod install, and on Android, you will also need Android NDK to be installed (see here).

Debugging​

As the library uses JSI for synchronous native methods access, remote debugging is no longer possible. You can use Flipper for debugging your JS code, however, connecting the debugger to the JS context. There is also an React Native VSCode extension that can provide a great debugging experience when using React Native Skia.

Testing with Jest​

React Native Skia test mocks use a web implementation that depends on loading CanvasKit.

The very first step is to make sure that your Skia files are not being transformed by jest, for instance, we can add it the transformIgnorePatterns directive:

js
"transformIgnorePatterns": [
  "node_modules/(?!(react-native|react-native.*|@react-native.*|@?react-navigation.*|@shopify/react-native-skia)/)"
]
js
"transformIgnorePatterns": [
  "node_modules/(?!(react-native|react-native.*|@react-native.*|@?react-navigation.*|@shopify/react-native-skia)/)"
]

Next, we recommend using ESM. To enable ESM support, you need to update your jest command to node --experimental-vm-modules node_modules/.bin/jest. But we also support CommonJS.

ESM Setup​

To load CanvasKit and subsequently the React Native Skia mock, add the following setup file to your Jest configuration:

js
// notice the extension: .mjs
"setupFiles": ["@shopify/react-native-skia/jestSetup.mjs"]
js
// notice the extension: .mjs
"setupFiles": ["@shopify/react-native-skia/jestSetup.mjs"]

CommonJS Setup​

We also offer a version of the setup file without ECMAScript modules support. To use this version, add the following setup file to your Jest configuration:

js
// notice the extension: .js
"setupFiles": ["@shopify/react-native-skia/jestSetup.js"]
js
// notice the extension: .js
"setupFiles": ["@shopify/react-native-skia/jestSetup.js"]

With this setup, you need to load the Skia environment in your test. Include the following at the top of your test file:

js
/**
 * @jest-environment @shopify/react-native-skia/jestEnv.mjs
 */
js
/**
 * @jest-environment @shopify/react-native-skia/jestEnv.mjs
 */

For instance:

js
/**
 * @jest-environment @shopify/react-native-skia/jestEnv.mjs
 */
import "react-native";
import React from "react";
import { cleanup, render } from "@testing-library/react-native";
import App from "./App";
it("renders correctly", () => {
  render(<App />);
});
afterEach(cleanup);
js
/**
 * @jest-environment @shopify/react-native-skia/jestEnv.mjs
 */
import "react-native";
import React from "react";
import { cleanup, render } from "@testing-library/react-native";
import App from "./App";
it("renders correctly", () => {
  render(<App />);
});
afterEach(cleanup);

With this configuration, you will have properly set up Jest to work with React Native Skia mocks using either ECMAScript Modules or CommonJS.

- + \ No newline at end of file diff --git a/docs/getting-started/web/index.html b/docs/getting-started/web/index.html index 165e9c7803..c24f47da4d 100644 --- a/docs/getting-started/web/index.html +++ b/docs/getting-started/web/index.html @@ -4,7 +4,7 @@ Web Support | React Native Skia - + @@ -25,7 +25,7 @@ Below is an index.web.js example:

tsx
import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/module/web";
LoadSkiaWeb().then(async () => {
  const App = (await import("./src/App")).default;
  AppRegistry.registerComponent("Example", () => App);
});
tsx
import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/module/web";
LoadSkiaWeb().then(async () => {
  const App = (await import("./src/App")).default;
  AppRegistry.registerComponent("Example", () => App);
});

Using a CDN​

Below, CanvasKit loads via code-splitting from a CDN. It is critical that the CDN-hosted CanvasKit version aligns with React Native Skia's requirements.

tsx
import { WithSkiaWeb } from "@shopify/react-native-skia/lib/module/web";
import { version } from 'canvaskit-wasm/package.json';
export default function App() {
  return (
    <WithSkiaWeb
      opts={{ locateFile: (file) => `https://cdn.jsdelivr.net/npm/canvaskit-wasm@${version}/bin/full/${file}` }}
      getComponent={() => import("./MySkiaComponent")}
  );
}
tsx
import { WithSkiaWeb } from "@shopify/react-native-skia/lib/module/web";
import { version } from 'canvaskit-wasm/package.json';
export default function App() {
  return (
    <WithSkiaWeb
      opts={{ locateFile: (file) => `https://cdn.jsdelivr.net/npm/canvaskit-wasm@${version}/bin/full/${file}` }}
      getComponent={() => import("./MySkiaComponent")}
  );
}

Alternatively, use deferred component registration:

tsx
import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/module/web";
import { version } from 'canvaskit-wasm/package.json';
LoadSkiaWeb({
  locateFile: (file) => `https://cdn.jsdelivr.net/npm/canvaskit-wasm@${version}/bin/full/${file}`
}).then(async () => {
  const App = (await import("./src/App")).default;
  AppRegistry.registerComponent("Example", () => App);
});
tsx
import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/module/web";
import { version } from 'canvaskit-wasm/package.json';
LoadSkiaWeb({
  locateFile: (file) => `https://cdn.jsdelivr.net/npm/canvaskit-wasm@${version}/bin/full/${file}`
}).then(async () => {
  const App = (await import("./src/App")).default;
  AppRegistry.registerComponent("Example", () => App);
});

Unsupported Features​

The following React Native Skia APIs are currently unsupported on React Native Web. To request these features, please submit a feature request on GitHub.

Unsupported

  • PathEffectFactory.MakeSum()
  • PathEffectFactory.MakeCompose()
  • PathFactory.MakeFromText()
  • ShaderFilter

Unplanned

  • ImageSvg

Manual webpack Installation​

To enable React Native Skia on Web using webpack, three key actions are required:

  • Ensure the canvaskit.wasm file is accessible to the build system.
  • Configure the build system to resolve the fs and path node modules, achievable via the node polyfill plugin.
  • Update aliases for react-native-reanimated and react-native/Libraries/Image/AssetRegistry so webpack can do the bundle.

Here is an example webpack v5 configuration accommodating React Native Skia:

tsx
import fs from "fs";
import { sources } from "webpack";
import NodePolyfillPlugin from "node-polyfill-webpack-plugin";
const newConfiguration = {
  ...currentConfiguration,
  plugins: [
    ...currentConfiguration.plugins,
    // 1. Ensure wasm file availability
    new (class CopySkiaPlugin {
      apply(compiler) {
        compiler.hooks.thisCompilation.tap("AddSkiaPlugin", (compilation) => {
          compilation.hooks.processAssets.tapPromise(
            {
              name: "copy-skia",
              stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
            },
            async () => {
              const src = require.resolve("canvaskit-wasm/bin/full/canvaskit.wasm");
              if (!compilation.getAsset(src)) {
                compilation.emitAsset("/canvaskit.wasm", new sources.RawSource(await fs.promises.readFile(src)));
              }
            }
          );
        });
      }
    })(),
    // 2. Polyfill fs and path modules
    new NodePolyfillPlugin()
  ],
  alias: {
    ...currentConfiguration.alias,
    // 3. Suppress reanimated module warning
    // This assumes Reanimated is installed, if not you can use false.
    "react-native-reanimated/package.json": require.resolve(
      "react-native-reanimated/package.json"
    ),
    "react-native-reanimated": require.resolve("react-native-reanimated"),
    "react-native/Libraries/Image/AssetRegistry": false,
  },
}
tsx
import fs from "fs";
import { sources } from "webpack";
import NodePolyfillPlugin from "node-polyfill-webpack-plugin";
const newConfiguration = {
  ...currentConfiguration,
  plugins: [
    ...currentConfiguration.plugins,
    // 1. Ensure wasm file availability
    new (class CopySkiaPlugin {
      apply(compiler) {
        compiler.hooks.thisCompilation.tap("AddSkiaPlugin", (compilation) => {
          compilation.hooks.processAssets.tapPromise(
            {
              name: "copy-skia",
              stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
            },
            async () => {
              const src = require.resolve("canvaskit-wasm/bin/full/canvaskit.wasm");
              if (!compilation.getAsset(src)) {
                compilation.emitAsset("/canvaskit.wasm", new sources.RawSource(await fs.promises.readFile(src)));
              }
            }
          );
        });
      }
    })(),
    // 2. Polyfill fs and path modules
    new NodePolyfillPlugin()
  ],
  alias: {
    ...currentConfiguration.alias,
    // 3. Suppress reanimated module warning
    // This assumes Reanimated is installed, if not you can use false.
    "react-native-reanimated/package.json": require.resolve(
      "react-native-reanimated/package.json"
    ),
    "react-native-reanimated": require.resolve("react-native-reanimated"),
    "react-native/Libraries/Image/AssetRegistry": false,
  },
}

Finally, proceed to load Skia.

- + \ No newline at end of file diff --git a/docs/group/index.html b/docs/group/index.html index 4133837c21..9c9679713b 100644 --- a/docs/group/index.html +++ b/docs/group/index.html @@ -4,7 +4,7 @@ Group | React Native Skia - + @@ -250,7 +250,7 @@ import Path">Path
path="M 170.1 215.5 C 165 222.3..."
strokeCap="round"
strokeJoin="round"
style="stroke"
strokeWidth={30}
/>
</FitBox>
</Canvas>
);
};
- + \ No newline at end of file diff --git a/docs/image-filters/blur/index.html b/docs/image-filters/blur/index.html index 3ef5d8ae85..13785f96ef 100644 --- a/docs/image-filters/blur/index.html +++ b/docs/image-filters/blur/index.html @@ -4,7 +4,7 @@ Blur | React Native Skia - + @@ -33,7 +33,7 @@ import Blur">Blur blur={4} />
</Image>
</Canvas>
);
};

Simple Blur

With mode="clamp"​

Clamp Blur

- + \ No newline at end of file diff --git a/docs/image-filters/displacement-map/index.html b/docs/image-filters/displacement-map/index.html index 725790ef43..36d8fd37eb 100644 --- a/docs/image-filters/displacement-map/index.html +++ b/docs/image-filters/displacement-map/index.html @@ -4,7 +4,7 @@ Displacement Map | React Native Skia - + @@ -39,7 +39,7 @@ import DisplacementMap">DisplacementMap>
</Image>
</Canvas>
);
};
- + \ No newline at end of file diff --git a/docs/image-filters/morphology/index.html b/docs/image-filters/morphology/index.html index c089227823..27aa5aa64d 100644 --- a/docs/image-filters/morphology/index.html +++ b/docs/image-filters/morphology/index.html @@ -4,7 +4,7 @@ Morphology | React Native Skia - + @@ -42,7 +42,7 @@ import Morphology">Morphology radius={0.3} operator="erode" />
</Text>
</Canvas>
);
};
- + \ No newline at end of file diff --git a/docs/image-filters/offset/index.html b/docs/image-filters/offset/index.html index 1fe5b047f1..f67ac8058e 100644 --- a/docs/image-filters/offset/index.html +++ b/docs/image-filters/offset/index.html @@ -4,7 +4,7 @@ Offset | React Native Skia - + @@ -36,7 +36,7 @@ import Offset">Offset x={64} y={64} />
</Image>
</Canvas>
);
};
- + \ No newline at end of file diff --git a/docs/image-filters/overview/index.html b/docs/image-filters/overview/index.html index 2b6a09ae7f..48223d3081 100644 --- a/docs/image-filters/overview/index.html +++ b/docs/image-filters/overview/index.html @@ -4,7 +4,7 @@ Image Filters | React Native Skia - + @@ -39,7 +39,7 @@ import Blur">Blur>
</Image>
</Canvas>
);
};
- + \ No newline at end of file diff --git a/docs/image-filters/runtime-shader/index.html b/docs/image-filters/runtime-shader/index.html index 5b52801b38..57bffb22b7 100644 --- a/docs/image-filters/runtime-shader/index.html +++ b/docs/image-filters/runtime-shader/index.html @@ -4,7 +4,7 @@ Runtime Shader | React Native Skia - + @@ -89,7 +89,7 @@ import Group">Group>
</Group>
</Canvas>
);
};
With supersamplingWithout supersampling
Runtime Shader
Runtime Shader
- + \ No newline at end of file diff --git a/docs/image-filters/shadows/index.html b/docs/image-filters/shadows/index.html index c8ec82a2a6..427391888f 100644 --- a/docs/image-filters/shadows/index.html +++ b/docs/image-filters/shadows/index.html @@ -4,7 +4,7 @@ Shadows | React Native Skia - + @@ -58,7 +58,7 @@ import Shadow">Shadow dx={-12} dy={-12} blur={25} color="#c7f8ff" inner />
</RoundedRect>
</Canvas>
);
};

Result​

- + \ No newline at end of file diff --git a/docs/images-svg/index.html b/docs/images-svg/index.html index 2303c7a26f..182f227526 100644 --- a/docs/images-svg/index.html +++ b/docs/images-svg/index.html @@ -4,7 +4,7 @@ SVG Images | React Native Skia - + @@ -310,7 +310,7 @@ You can use the href attribute instead. However, we found that it doesn't appear to be adequately supported. We would recommend avoiding using it.

Fallbacks​

Some SVG with issues display nicely in the browser because they are very tolerant of errors. We found that the Skia SVG module is much less forgiving.

- + \ No newline at end of file diff --git a/docs/images/index.html b/docs/images/index.html index 38f11d1f13..836c2f28b0 100644 --- a/docs/images/index.html +++ b/docs/images/index.html @@ -4,7 +4,7 @@ Images | React Native Skia - + @@ -58,7 +58,7 @@ import Canvas">Canvas style={{ flex: 1 }}>
<Image image={image} fit="contain" x={0} y={0} width={256} height={256} />
</Canvas>
);
};

fit="contain"​

fit=&quot;contain&quot;

fit="cover"​

fit=&quot;cover&quot;

fit="fill"​

fit=&quot;fill&quot;

fit="fitHeight"​

fit=&quot;fitHeight&quot;

fit="fitWidth"​

fit=&quot;fitWidth&quot;

fit="scaleDown"​

fit=&quot;scaleDown&quot;

fit="none"​

fit=&quot;none&quot;

Instance Methods​

NameDescription
heightReturns the possibly scaled height of the image.
widthReturns the possibly scaled width of the image.
getImageInfoReturns the image info for the image.
encodeToBytesEncodes the image pixels, returning the result as a UInt8Array.
encodeToBase64Encodes the image pixels, returning the result as a base64-encoded string.
readPixelsReads the image pixels, returning result as UInt8Array or Float32Array
- + \ No newline at end of file diff --git a/docs/mask-filters/index.html b/docs/mask-filters/index.html index 0ea5501b1f..c45f8af7b8 100644 --- a/docs/mask-filters/index.html +++ b/docs/mask-filters/index.html @@ -4,7 +4,7 @@ Mask Filters | React Native Skia - + @@ -32,7 +32,7 @@ import BlurMask">BlurMask blur={20} style="normal" />
</Circle>
</Canvas>
);
};
StyleResult
normalNormalinnerInner
solidSolidouterOuter
- + \ No newline at end of file diff --git a/docs/mask/index.html b/docs/mask/index.html index b0ea026164..359bf8d174 100644 --- a/docs/mask/index.html +++ b/docs/mask/index.html @@ -4,7 +4,7 @@ Mask | React Native Skia - + @@ -67,7 +67,7 @@ import Rect">Rect x={0} y={0} width={256} height={256} color="lightblue" />
</Mask>
</Canvas>
);

Result​

- + \ No newline at end of file diff --git a/docs/paint/overview/index.html b/docs/paint/overview/index.html index bda2c97a42..15092cef88 100644 --- a/docs/paint/overview/index.html +++ b/docs/paint/overview/index.html @@ -4,7 +4,7 @@ Painting | React Native Skia - + @@ -118,7 +118,7 @@ import Canvas">Canvas style={{ flex: 1 }}>
<Circle paint={paint} cx={r} cy={r} r={r} />
</Canvas>
);
};
- + \ No newline at end of file diff --git a/docs/paint/properties/index.html b/docs/paint/properties/index.html index 8000f38167..8be3328270 100644 --- a/docs/paint/properties/index.html +++ b/docs/paint/properties/index.html @@ -4,7 +4,7 @@ Painting Properties | React Native Skia - + @@ -75,7 +75,7 @@ softLight, difference, exclusion, multiply, hue, saturation, color, luminosity.

style​

The paint style can be fill (default) or stroke.

strokeWidth​

Thickness of the pen used to outline the shape.

strokeJoin​

Sets the geometry drawn at the corners of strokes. Values can be bevel, miter, or round.

strokeCap​

Returns the geometry drawn at the beginning and end of strokes. Values can be butt, round, or square.

strokeMiter​

Limit at which a sharp corner is drawn beveled.

antiAlias​

Requests, but does not require, that edge pixels draw opaque or with partial transparency.

dither​

Requests, but does not require, to distribute color error.

- + \ No newline at end of file diff --git a/docs/path-effects/index.html b/docs/path-effects/index.html index f7b8789a65..c47d2aef25 100644 --- a/docs/path-effects/index.html +++ b/docs/path-effects/index.html @@ -4,7 +4,7 @@ Path Effects | React Native Skia - + @@ -114,7 +114,7 @@ import processTransform2d">processTransform2d([{ scale: 8 }])}
/>
</Path>
</Canvas>
);
};

Result​

Corner Path Effect

- + \ No newline at end of file diff --git a/docs/shaders/colors/index.html b/docs/shaders/colors/index.html index 6b0c272e53..02ff729f97 100644 --- a/docs/shaders/colors/index.html +++ b/docs/shaders/colors/index.html @@ -4,7 +4,7 @@ Blending and Colors | React Native Skia - + @@ -68,7 +68,7 @@ import ColorShader">ColorShader color="lightBlue" />
</Fill>
</Canvas>
);
};

Result​

- + \ No newline at end of file diff --git a/docs/shaders/gradients/index.html b/docs/shaders/gradients/index.html index d177aa762d..6f14cf3062 100644 --- a/docs/shaders/gradients/index.html +++ b/docs/shaders/gradients/index.html @@ -4,7 +4,7 @@ Gradients | React Native Skia - + @@ -118,7 +118,7 @@ import vec">vec(128, 128)}
colors={["cyan", "magenta", "yellow", "cyan"]}
/>
</Rect>
</Canvas>
);
};

Result​

Sweep Gradient

- + \ No newline at end of file diff --git a/docs/shaders/images/index.html b/docs/shaders/images/index.html index 4e65b77b4b..e5b5a265f8 100644 --- a/docs/shaders/images/index.html +++ b/docs/shaders/images/index.html @@ -4,7 +4,7 @@ Image Shaders | React Native Skia - + @@ -37,7 +37,7 @@ import ImageShader">ImageShader
image={image}
fit="cover"
rect={{ x: 0, y: 0, width: 256, height: 256 }}
/>
</Circle>
</Canvas>
);
};

Result​

Image Shader

- + \ No newline at end of file diff --git a/docs/shaders/overview/index.html b/docs/shaders/overview/index.html index 7e6a0da0bd..e7860e2b33 100644 --- a/docs/shaders/overview/index.html +++ b/docs/shaders/overview/index.html @@ -4,7 +4,7 @@ Shading Language | React Native Skia - + @@ -98,7 +98,7 @@ import Shader">Shader>
</Fill>
</Canvas>
);
};

Simple Shader

- + \ No newline at end of file diff --git a/docs/shaders/perlin-noise/index.html b/docs/shaders/perlin-noise/index.html index 374902d97f..fa4b0763b3 100644 --- a/docs/shaders/perlin-noise/index.html +++ b/docs/shaders/perlin-noise/index.html @@ -4,7 +4,7 @@ Perlin Noise Shaders | React Native Skia - + @@ -66,7 +66,7 @@ import Turbulence">Turbulence freqX={0.05} freqY={0.05} octaves={4} />
</Rect>
</Canvas>
);
};

Result​

Turbulence

- + \ No newline at end of file diff --git a/docs/shapes/atlas/index.html b/docs/shapes/atlas/index.html index 8a89ac2b89..e007c98e17 100644 --- a/docs/shapes/atlas/index.html +++ b/docs/shapes/atlas/index.html @@ -4,7 +4,7 @@ Atlas | React Native Skia - + @@ -429,7 +429,7 @@ import Atlas">Atlas image={texture} sprites={sprites} transforms={transforms} />
</Canvas>
</GestureDetector>
);
};
- + \ No newline at end of file diff --git a/docs/shapes/box/index.html b/docs/shapes/box/index.html index 792a973a60..fbbdfa74bd 100644 --- a/docs/shapes/box/index.html +++ b/docs/shapes/box/index.html @@ -4,7 +4,7 @@ Box | React Native Skia - + @@ -46,7 +46,7 @@ import BoxShadow">BoxShadow dx={-10} dy={-10} blur={10} color="#c7f8ff" />
</Box>
</Canvas>
);

Result​

- + \ No newline at end of file diff --git a/docs/shapes/ellipses/index.html b/docs/shapes/ellipses/index.html index 68a7501622..8ee3bd4ff2 100644 --- a/docs/shapes/ellipses/index.html +++ b/docs/shapes/ellipses/index.html @@ -4,7 +4,7 @@ Ellipses | React Native Skia - + @@ -30,7 +30,7 @@ import Canvas">Canvas style={{ flex: 1 }}>
<Oval x={64} y={0} width={128} height={256} color="lightblue" />
</Canvas>
);
};

Oval

- + \ No newline at end of file diff --git a/docs/shapes/patch/index.html b/docs/shapes/patch/index.html index 204f99ffa0..d6b6b6a9f6 100644 --- a/docs/shapes/patch/index.html +++ b/docs/shapes/patch/index.html @@ -4,7 +4,7 @@ Patch | React Native Skia - + @@ -110,7 +110,7 @@ c2: SkPoint; }">bottomLeft]}
/>
</Canvas>
);
};

SVG Notation

- + \ No newline at end of file diff --git a/docs/shapes/path/index.html b/docs/shapes/path/index.html index 737617ab83..e47cc28cd8 100644 --- a/docs/shapes/path/index.html +++ b/docs/shapes/path/index.html @@ -4,7 +4,7 @@ Path | React Native Skia - + @@ -73,7 +73,7 @@ import Path">Path path={path} style="stroke" strokeWidth={4} color="#3EB489"/>
<Path path={path} color="lightblue" fillType="evenOdd" />
</Canvas>
);
};
- + \ No newline at end of file diff --git a/docs/shapes/pictures/index.html b/docs/shapes/pictures/index.html index e6abcf609d..ef3d6a0d5d 100644 --- a/docs/shapes/pictures/index.html +++ b/docs/shapes/pictures/index.html @@ -4,7 +4,7 @@ Pictures | React Native Skia - + @@ -140,7 +140,7 @@ import Picture">Picture picture={copyOfPicture} />}
</Group>
</Canvas>
);
};

Instance Methods​

NameDescription
makeShaderReturns a new shader that will draw with this picture.
serializeReturns a UInt8Array representing the drawing operations stored in the image.
- + \ No newline at end of file diff --git a/docs/shapes/polygons/index.html b/docs/shapes/polygons/index.html index 86d437fa8f..f9fcbb492c 100644 --- a/docs/shapes/polygons/index.html +++ b/docs/shapes/polygons/index.html @@ -4,7 +4,7 @@ Polygons | React Native Skia - + @@ -238,7 +238,7 @@ import Canvas">Canvas style={{ flex: 1 }}>
<Points
points={points}
mode="polygon"
color="lightblue"
style="stroke"
strokeWidth={4}
/>
</Canvas>
);
};

Point

- + \ No newline at end of file diff --git a/docs/shapes/vertices/index.html b/docs/shapes/vertices/index.html index dc26a69bbb..ff04cf678d 100644 --- a/docs/shapes/vertices/index.html +++ b/docs/shapes/vertices/index.html @@ -4,7 +4,7 @@ Vertices | React Native Skia - + @@ -77,7 +77,7 @@ import Canvas">Canvas style={{ flex: 1 }}>
<Vertices vertices={vertices} colors={colors} indices={indices} />
</Canvas>
);
};

Indices

- + \ No newline at end of file diff --git a/docs/snapshotviews/index.html b/docs/snapshotviews/index.html index dbe2a524ae..95e07b136c 100644 --- a/docs/snapshotviews/index.html +++ b/docs/snapshotviews/index.html @@ -4,7 +4,7 @@ Snapshot Views | React Native Skia - + @@ -69,7 +69,7 @@ import Image">Image
image={image}
x={0}
y={0}
width={image.width() / pd}
height={image.height() / pd}
/>
</Canvas>
)
}
</View>
)
};
- + \ No newline at end of file diff --git a/docs/text/blob/index.html b/docs/text/blob/index.html index 8d737b9ebc..8ab8dd044a 100644 --- a/docs/text/blob/index.html +++ b/docs/text/blob/index.html @@ -4,7 +4,7 @@ Text Blob | React Native Skia - + @@ -30,7 +30,7 @@ import Canvas">Canvas style={{ flex: 1 }}>
<TextBlob
blob={blob}
color="blue"
/>
</Canvas>
);
};
- + \ No newline at end of file diff --git a/docs/text/glyphs/index.html b/docs/text/glyphs/index.html index efbfca945b..8b5e41fb83 100644 --- a/docs/text/glyphs/index.html +++ b/docs/text/glyphs/index.html @@ -4,7 +4,7 @@ Glyphs | React Native Skia - + @@ -60,7 +60,7 @@ pos: SkPoint; }[]">glyphs}
/>
</Canvas>
);
}
- + \ No newline at end of file diff --git a/docs/text/paragraph/index.html b/docs/text/paragraph/index.html index e606d901dc..cb33e022f8 100644 --- a/docs/text/paragraph/index.html +++ b/docs/text/paragraph/index.html @@ -4,7 +4,7 @@ Paragraph | React Native Skia - + @@ -340,7 +340,7 @@ } import FontStyle">FontStyle.Italic })
.addText("This text is italic")
.pop()
.build();
return paragraphBuilder.build();
}, [customFontMgr]);
 
return <Paragraph paragraph={paragraph} x={0} y={0} width={300} />;
};

Result​

- + \ No newline at end of file diff --git a/docs/text/path/index.html b/docs/text/path/index.html index b38dce45c3..a281879a75 100644 --- a/docs/text/path/index.html +++ b/docs/text/path/index.html @@ -4,7 +4,7 @@ Text Path | React Native Skia - + @@ -44,7 +44,7 @@ import TextPath">TextPath font={font} path={path} text="Hello World!" />
</Group>
</Canvas>
);
};
- + \ No newline at end of file diff --git a/docs/text/text/index.html b/docs/text/text/index.html index 801918743d..a0d399269c 100644 --- a/docs/text/text/index.html +++ b/docs/text/text/index.html @@ -4,7 +4,7 @@ Text | React Native Skia - + @@ -232,7 +232,7 @@ } import FontStyle">FontStyle.Bold);
const font = Skia.Font(typeface, fontSize);
- + \ No newline at end of file diff --git a/docs/tutorials/index.html b/docs/tutorials/index.html index ddb4b8a9e3..ac1df20bec 100644 --- a/docs/tutorials/index.html +++ b/docs/tutorials/index.html @@ -4,14 +4,14 @@ Tutorials | React Native Skia - +

Tutorials

Below is a list of tutorials sorted by category. Please make a PR if you would like to add entries to the list.

Animations​

Gestures​

Backdrop Filters​

Charts​

Image Filters​

Gradients​

Noise​

Shaders​

Paths​

Vertices​

Native Views​

- + \ No newline at end of file diff --git a/index.html b/index.html index 1e4b5e97b4..666293260e 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,13 @@ React Native Skia | React Native Skia - +

React Native Skia

High Performance 2D Graphics

Documentation
- + \ No newline at end of file diff --git a/search/index.html b/search/index.html index 0581cda13e..3acc8881f3 100644 --- a/search/index.html +++ b/search/index.html @@ -4,13 +4,13 @@ Search the documentation | React Native Skia - +

Search the documentation

- + \ No newline at end of file