diff --git a/404.html b/404.html index e4a9cfe444..d01136b436 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/e28e8f5c.3129dfde.js b/assets/js/e28e8f5c.3129dfde.js new file mode 100644 index 0000000000..f443a264bd --- /dev/null +++ b/assets/js/e28e8f5c.3129dfde.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9852],{5788:(e,a,n)=>{n.d(a,{Iu:()=>i,yg:()=>g});var t=n(1504);function s(e,a,n){return a in e?Object.defineProperty(e,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[a]=n,e}function r(e,a){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);a&&(t=t.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),n.push.apply(n,t)}return n}function o(e){for(var a=1;a=0||(s[n]=e[n]);return s}(e,a);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(s[n]=e[n])}return s}var p=t.createContext({}),y=function(e){var a=t.useContext(p),n=a;return e&&(n="function"==typeof e?e(a):o(o({},a),e)),n},i=function(e){var a=y(e.components);return t.createElement(p.Provider,{value:a},e.children)},d="mdxType",c={inlineCode:"code",wrapper:function(e){var a=e.children;return t.createElement(t.Fragment,{},a)}},m=t.forwardRef((function(e,a){var n=e.components,s=e.mdxType,r=e.originalType,p=e.parentName,i=l(e,["components","mdxType","originalType","parentName"]),d=y(n),m=s,g=d["".concat(p,".").concat(m)]||d[m]||c[m]||r;return n?t.createElement(g,o(o({ref:a},i),{},{components:n})):t.createElement(g,o({ref:a},i))}));function g(e,a){var n=arguments,s=a&&a.mdxType;if("string"==typeof e||s){var r=n.length,o=new Array(r);o[0]=m;var l={};for(var p in a)hasOwnProperty.call(a,p)&&(l[p]=a[p]);l.originalType=e,l[d]="string"==typeof e?e:s,o[1]=l;for(var y=2;y{n.r(a),n.d(a,{assets:()=>c,contentTitle:()=>i,default:()=>v,frontMatter:()=>y,metadata:()=>d,toc:()=>m});var t=n(5072),s=n(1504),r=n(5788),o=n(6528);const l={append:function(e,a){if((a=a||{}).id=a.id||e.dataset.snackId||e.dataset.sketchId,a.platform=a.platform||e.dataset.snackPlatform||e.dataset.sketchPlatform,a.supportedPlatforms=a.supportedPlatforms||e.dataset.snackSupportedPlatforms||e.dataset.snackSupportedplatforms,a.preview=a.preview||e.dataset.snackPreview||e.dataset.sketchPreview||"true",a.sdkVersion=a.sdkVersion||e.dataset.snackSdkVersion||e.dataset.snackSdkversion,a.name=a.name||e.dataset.snackName,a.description=a.description||e.dataset.snackDescription,a.theme=a.theme||e.dataset.snackTheme,a.appetizePayerCode=a.appetizePayerCode||e.dataset.snackAppetizePayerCode,a.loading=a.loading||e.dataset.snackLoading,!a.code&&e.dataset.snackCode&&(a.code=decodeURIComponent(e.dataset.snackCode)),!a.files&&e.dataset.snackFiles&&(a.files=decodeURIComponent(e.dataset.snackFiles)),!a.dependencies&&e.dataset.snackDependencies&&(a.dependencies=e.dataset.snackDependencies),!e.querySelector("iframe[data-snack-iframe]")&&(a.id||a.code||a.files)){var n=Math.random().toString(36).substr(2,10),t=document.createElement("iframe"),s="?iframeId="+n;a.preview&&(s+="&preview="+a.preview),a.platform&&(s+="&platform="+a.platform),a.supportedPlatforms&&(s+="&supportedPlatforms="+a.supportedPlatforms),a.sdkVersion&&(s+="&sdkVersion="+a.sdkVersion),a.name&&(s+="&name="+a.name),a.description&&(s+="&description="+a.description),a.theme&&(s+="&theme="+a.theme),a.appetizePayerCode&&(s+="&appetizePayerCode="+a.appetizePayerCode),a.verbose&&(s+="&verbose="+a.verbose),a.loading&&(t.loading=a.loading),a.id?t.src="https://snack.expo.dev/embedded/"+a.id+s:t.src="https://snack.expo.dev/embedded"+s+"&waitForData=true",t.style="display: block",t.height="100%",t.width="100%",t.frameBorder="0",t.allowTransparency=!0,t.dataset.snackIframe=!0,e.appendChild(t),(a.code||a.files||a.dependencies)&&window.addEventListener("message",(function(e){var s=e.data[0],r=e.data[1];"expoFrameLoaded"===s&&r.iframeId===n&&t.contentWindow.postMessage(["expoDataEvent",{iframeId:n,dependencies:a.dependencies,code:a.code,files:a.files}],"*")}))}},remove:function(e){var a=e.querySelector("iframe[data-snack-iframe]");a&&a.parentNode.removeChild(a)},initialize:function(){document.querySelectorAll("[data-sketch-id], [data-snack-id], [data-snack-code]").forEach((function(e){l.append(e)}))}},p=e=>{let{id:a}=e;const{colorMode:n}=(0,o.U)(),t=(0,s.useRef)(null);return(0,s.useEffect)((()=>{l.remove(t.current),l.append(t.current)}),[n]),s.createElement("div",{ref:t,"data-snack-id":a,"data-snack-platform":"web","data-snack-preview":"true","data-snack-theme":"dark"===n?"dark":"light",style:{overflow:"hidden",background:"#f9f9f9",border:"1px solid var(--color-border)",borderRadius:4,height:505,width:"100%"}})},y={id:"web",title:"Web Support",sidebar_label:"Web",slug:"/getting-started/web"},i=void 0,d={unversionedId:"getting-started/web",id:"getting-started/web",title:"Web Support",description:"React Native Skia runs in the browser via CanvasKit, a WebAssembly (WASM) build of Skia.",source:"@site/docs/getting-started/web.mdx",sourceDirName:"getting-started",slug:"/getting-started/web",permalink:"/react-native-skia/docs/getting-started/web",draft:!1,editUrl:"https://github.com/shopify/react-native-skia/edit/main/docs/docs/getting-started/web.mdx",tags:[],version:"current",frontMatter:{id:"web",title:"Web Support",sidebar_label:"Web",slug:"/getting-started/web"},sidebar:"tutorialSidebar",previous:{title:"Hello World",permalink:"/react-native-skia/docs/getting-started/hello-world"},next:{title:"Headless",permalink:"/react-native-skia/docs/getting-started/headless"}},c={},m=[{value:"Expo",id:"expo",level:2},{value:"Expo Router",id:"expo-router",level:3},{value:"Snack",id:"snack",level:3},{value:"Remotion",id:"remotion",level:2},{value:"Loading Skia",id:"loading-skia",level:2},{value:"Using Code-Splitting",id:"using-code-splitting",level:3},{value:"Using Deferred Component Registration",id:"using-deferred-component-registration",level:3},{value:"Using a CDN",id:"using-a-cdn",level:2},{value:"Unsupported Features",id:"unsupported-features",level:2},{value:"Manual Webpack Installation",id:"manual-webpack-installation",level:2}],g={toc:m},N="wrapper";function v(e){let{components:a,...n}=e;return(0,r.yg)(N,(0,t.c)({},g,n,{components:a,mdxType:"MDXLayout"}),(0,r.yg)("p",null,"React Native Skia runs in the browser via ",(0,r.yg)("a",{parentName:"p",href:"https://skia.org/docs/user/modules/canvaskit/"},"CanvasKit"),", a WebAssembly (WASM) build of Skia.\nThe CanvasKit WASM file, which is 2.9MB when gzipped, is loaded asynchronously.\nDespite its considerable size, it offers flexibility in determining when and how Skia loads, giving you full control over the user experience."),(0,r.yg)("p",null,"We support direct integration with ",(0,r.yg)("a",{parentName:"p",href:"#expo"},"Expo")," and ",(0,r.yg)("a",{parentName:"p",href:"#remotion"},"Remotion"),".\nAdditionally, you'll find manual installation steps for any webpack projects."),(0,r.yg)("p",null,"It should also be mentionned that React Native Skia can be used on projects without the need to install React Native Web."),(0,r.yg)("h2",{id:"expo"},"Expo"),(0,r.yg)("admonition",{type:"info"},(0,r.yg)("p",{parentName:"admonition"},"Metro and expo-router support is available from v0.1.240 and onwards.\nIf you are using v0.1.221 (recommended version for Expo SDK 50), you can use ",(0,r.yg)("a",{parentName:"p",href:"https://github.com/Shopify/react-native-skia/files/14357144/%40shopify%2Breact-native-skia%2B0.1.221.patch"},"this patch")," (using ",(0,r.yg)("a",{parentName:"p",href:"https://www.npmjs.com/package/patch-package"},(0,r.yg)("inlineCode",{parentName:"a"},"patch-package")),".")),(0,r.yg)("p",null,"Use the ",(0,r.yg)("inlineCode",{parentName:"p"},"setup-skia-web")," script to ensure that the ",(0,r.yg)("inlineCode",{parentName:"p"},"canvaskit.wasm")," file is accessible within your Expo project's public folder.\nIf you're ",(0,r.yg)("a",{parentName:"p",href:"#using-a-cdn"},"loading CanvasKit from a CDN"),", running the ",(0,r.yg)("inlineCode",{parentName:"p"},"setup-skia-web")," script is unnecessary."),(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"},"bash"),(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:"#24292EFF"}},"$ npx expo install @shopify/react-native-skia")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"$ yarn setup-skia-web"))))),(0,r.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,r.yg)("div",{parentName:"pre",className:"language-id"},"bash"),(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:"#D8DEE9FF"}},"$ npx expo install @shopify/react-native-skia")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"$ yarn setup-skia-web")))))),(0,r.yg)("admonition",{type:"info"},(0,r.yg)("p",{parentName:"admonition"},"Run ",(0,r.yg)("inlineCode",{parentName:"p"},"yarn setup-skia-web")," each time you upgrade the ",(0,r.yg)("inlineCode",{parentName:"p"},"@shopify/react-native-skia")," package.\nConsider incorporating it into your ",(0,r.yg)("inlineCode",{parentName:"p"},"postinstall")," script for convenience.")),(0,r.yg)("p",null,"After setup, choose your method to ",(0,r.yg)("a",{parentName:"p",href:"#loading-skia"},"Load Skia"),"."),(0,r.yg)("h3",{id:"expo-router"},"Expo Router"),(0,r.yg)("p",null,"For projects using Expo Router, you can use ",(0,r.yg)("a",{parentName:"p",href:"#using-code-splitting"},"code-splitting")," or ",(0,r.yg)("a",{parentName:"p",href:"#using-deferred-component-registration"},"deferred component registration"),".\nIf you wish to use deferred component registration with Expo Router, create a new entry script and reference it in your ",(0,r.yg)("inlineCode",{parentName:"p"},"package.json"),". For instance, if you've created ",(0,r.yg)("inlineCode",{parentName:"p"},"index.js")," and ",(0,r.yg)("inlineCode",{parentName:"p"},"index.web.js")," in the ",(0,r.yg)("inlineCode",{parentName:"p"},"src/")," directory, update your ",(0,r.yg)("inlineCode",{parentName:"p"},"package.json")," accordingly:"),(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"},"js"),(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:"#C2C3C5"}},"// package.json")),(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:"#22863A"}},'"main"'),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},": "),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"src/index"'),(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:"#C2C3C5"}},"//...")),(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"},"js"),(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:"#616E88"}},"// package.json")),(0,r.yg)("div",{parentName:"code",className:"line"},(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:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"main"),(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:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"src/index"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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:"#ECEFF4"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#616E88"}},"//...")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}")))))),(0,r.yg)("p",null,"Below is an example of ",(0,r.yg)("inlineCode",{parentName:"p"},"src/index.web.js"),":"),(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"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},"'@expo/metro-runtime'"),(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"}}," { App } "),(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"}},"'expo-router/build/qualified-entry'"),(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"}}," { renderRootComponent } "),(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"}},"'expo-router/build/renderRootComponent'"),(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:"#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/module/web'"),(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:"#6F42C1"}},"LoadSkiaWeb"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"()"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".then"),(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:"#6F42C1"}},"renderRootComponent"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(App);")),(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:"#A3BE8C"}},"@expo/metro-runtime"),(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"}},"App"),(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"}},"expo-router/build/qualified-entry"),(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"}},"renderRootComponent"),(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"}},"expo-router/build/renderRootComponent"),(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:"#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/module/web"),(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:"#88C0D0"}},"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:"#88C0D0"}},"then"),(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:"#88C0D0"}},"renderRootComponent"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"App"),(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)("p",null,"For the ",(0,r.yg)("inlineCode",{parentName:"p"},"src/index.js")," file, directly invoke ",(0,r.yg)("inlineCode",{parentName:"p"},"renderRootComponent(App)"),"."),(0,r.yg)("h3",{id:"snack"},"Snack"),(0,r.yg)("p",null,"Utilize the ",(0,r.yg)("a",{parentName:"p",href:"#using-code-splitting"},"code-splitting")," method for incorporating React Native Skia on ",(0,r.yg)("a",{parentName:"p",href:"https://snack.expo.dev/"},"snack"),"."),(0,r.yg)(p,{id:"@wcandillon/hello-snack",mdxType:"Snack"}),(0,r.yg)("h2",{id:"remotion"},"Remotion"),(0,r.yg)("p",null,"Follow these ",(0,r.yg)("a",{parentName:"p",href:"https://remotion.dev/skia"},"installation steps")," to use React Native Skia with Remotion."),(0,r.yg)("h2",{id:"loading-skia"},"Loading Skia"),(0,r.yg)("p",null,"Ensure Skia is fully loaded and initialized before importing the Skia module.\nTwo methods facilitate Skia's loading:"),(0,r.yg)("ul",null,(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("inlineCode",{parentName:"li"},"")," for code-splitting, delaying the loading of Skia-importing components."),(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("inlineCode",{parentName:"li"},"LoadSkiaWeb()")," to defer root component registration until Skia loads.")),(0,r.yg)("h3",{id:"using-code-splitting"},"Using Code-Splitting"),(0,r.yg)("p",null,"The ",(0,r.yg)("inlineCode",{parentName:"p"},"")," component utilizes ",(0,r.yg)("a",{parentName:"p",href:"https://reactjs.org/docs/code-splitting.html"},"code splitting")," to preload Skia.\nThe following example demonstrates preloading Skia before rendering the ",(0,r.yg)("inlineCode",{parentName:"p"},"MySkiaComponent"),":"),(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"}}," React "),(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"}},"'react'"),(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"}}," { Text } "),(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"}},'"react-native"'),(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"}}," { WithSkiaWeb } "),(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/module/web"'),(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:"#D32F2F"}},"export"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"default"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"function"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"App"),(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"}},"return"),(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"}},"WithSkiaWeb")),(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"}},"// import() uses the default export of MySkiaComponent.tsx")),(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"}},"getComponent"),(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:"#D32F2F"}},"=>"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"./MySkiaComponent"'),(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"}},"fallback"),(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"}},"Text"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},">Loading Skia...}")),(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)("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:"#D8DEE9"}},"React"),(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"}},"react"),(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"}},"Text"),(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"}},"react-native"),(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"}},"WithSkiaWeb"),(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/module/web"),(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:"#81A1C1"}},"export"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"default"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"function"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"App"),(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:"#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"}},"return"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," (")),(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"}},"WithSkiaWeb")),(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"}},"// import() uses the default export of MySkiaComponent.tsx")),(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"}},"getComponent"),(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:"#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"}},"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:"#A3BE8C"}},"./MySkiaComponent"),(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:"#8FBCBB"}},"fallback"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={<"),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"Text"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},">"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"Loading Skia..."),(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)("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:"#ECEFF4"}},"}")))))),(0,r.yg)("h3",{id:"using-deferred-component-registration"},"Using Deferred Component Registration"),(0,r.yg)("p",null,"The ",(0,r.yg)("inlineCode",{parentName:"p"},"LoadSkiaWeb()")," function facilitates Skia's loading prior to the React app's initiation.\nBelow is an ",(0,r.yg)("inlineCode",{parentName:"p"},"index.web.js")," example:"),(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/module/web"'),(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:"#6F42C1"}},"LoadSkiaWeb"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"()"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".then"),(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"}},"App"),(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:"#D32F2F"}},"await"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"./src/App"'),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},")).default;")),(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"}},"AppRegistry"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".registerComponent"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"Example"'),(0,r.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(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"}}," App);")),(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/module/web"),(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:"#88C0D0"}},"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:"#88C0D0"}},"then"),(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"}},"App"),(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"}},"await"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(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:"#A3BE8C"}},"./src/App"),(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:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"default"),(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"}},"AppRegistry"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"registerComponent"),(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"}},"Example"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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:"#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:"#D8DEE9"}},"App"),(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:"using-a-cdn"},"Using a CDN"),(0,r.yg)("p",null,"Below, CanvasKit loads via code-splitting from a CDN.\nIt is critical that the CDN-hosted CanvasKit version aligns with React Native Skia's requirements."),(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"}}," { WithSkiaWeb } "),(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/module/web"'),(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"}}," { version } "),(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"}},"'canvaskit-wasm/package.json'"),(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:"#D32F2F"}},"export"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"default"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"function"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"App"),(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"}},"return"),(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"}},"WithSkiaWeb")),(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"}},"opts"),(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"}},"locateFile"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," (file) "),(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:"#22863A"}},"`https://cdn.jsdelivr.net/npm/canvaskit-wasm@"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"${"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"version"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},"/bin/full/"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"${"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"file"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},"`"),(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"}},"getComponent"),(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:"#D32F2F"}},"=>"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"./MySkiaComponent"'),(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)("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"}},"WithSkiaWeb"),(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/module/web"),(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"}},"version"),(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"}},"canvaskit-wasm/package.json"),(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:"#81A1C1"}},"export"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"default"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"function"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"App"),(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:"#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"}},"return"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," (")),(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"}},"WithSkiaWeb")),(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"}},"opts"),(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:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"locateFile"),(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:"#ECEFF4"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"file"),(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)("span",{parentName:"div",style:{color:"#A3BE8C"}},"https://cdn.jsdelivr.net/npm/canvaskit-wasm@"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"${"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"version"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"/bin/full/"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"${"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"file"),(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:"#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:"#8FBCBB"}},"getComponent"),(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:"#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"}},"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:"#A3BE8C"}},"./MySkiaComponent"),(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:"#D8DEE9"}},");")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"}")))))),(0,r.yg)("p",null,"Alternatively, use deferred component registration:"),(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/module/web"'),(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"}}," { version } "),(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"}},"'canvaskit-wasm/package.json'"),(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:"#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:"#6F42C1"}},"locateFile"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," (file) "),(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:"#22863A"}},"`https://cdn.jsdelivr.net/npm/canvaskit-wasm@"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"${"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"version"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},"/bin/full/"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"${"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"file"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},"`")),(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"}},".then"),(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"}},"App"),(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:"#D32F2F"}},"await"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"./src/App"'),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},")).default;")),(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"}},"AppRegistry"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".registerComponent"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"Example"'),(0,r.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(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"}}," App);")),(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/module/web"),(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"}},"version"),(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"}},"canvaskit-wasm/package.json"),(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:"#88C0D0"}},"LoadSkiaWeb"),(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:"#88C0D0"}},"locateFile"),(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:"#ECEFF4"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"file"),(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)("span",{parentName:"div",style:{color:"#A3BE8C"}},"https://cdn.jsdelivr.net/npm/canvaskit-wasm@"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"${"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"version"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"/bin/full/"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"${"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"file"),(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:"#ECEFF4"}},"}"),(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:"#88C0D0"}},"then"),(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"}},"App"),(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"}},"await"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(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:"#A3BE8C"}},"./src/App"),(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:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"default"),(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"}},"AppRegistry"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"registerComponent"),(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"}},"Example"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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:"#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:"#D8DEE9"}},"App"),(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:"unsupported-features"},"Unsupported Features"),(0,r.yg)("p",null,"The following React Native Skia APIs are currently unsupported on React Native Web.\nTo request these features, please submit ",(0,r.yg)("a",{parentName:"p",href:"https://github.com/Shopify/react-native-skia/issues/new/choose"},"a feature request on GitHub"),"."),(0,r.yg)("p",null,(0,r.yg)("strong",{parentName:"p"},"Unsupported")),(0,r.yg)("ul",null,(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("inlineCode",{parentName:"li"},"PathEffectFactory.MakeSum()")),(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("inlineCode",{parentName:"li"},"PathEffectFactory.MakeCompose()")),(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("inlineCode",{parentName:"li"},"PathFactory.MakeFromText()")),(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("inlineCode",{parentName:"li"},"ShaderFilter"))),(0,r.yg)("p",null,(0,r.yg)("strong",{parentName:"p"},"Unplanned")),(0,r.yg)("ul",null,(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("inlineCode",{parentName:"li"},"ImageSvg"))),(0,r.yg)("h2",{id:"manual-webpack-installation"},"Manual Webpack Installation"),(0,r.yg)("p",null,"To enable React Native Skia on Web using Webpack, three key actions are required:"),(0,r.yg)("ul",null,(0,r.yg)("li",{parentName:"ul"},"Ensure the ",(0,r.yg)("inlineCode",{parentName:"li"},"canvaskit.wasm")," file is accessible to the build system."),(0,r.yg)("li",{parentName:"ul"},"Configure the build system to resolve the ",(0,r.yg)("inlineCode",{parentName:"li"},"fs")," and ",(0,r.yg)("inlineCode",{parentName:"li"},"path")," node modules, achievable via the ",(0,r.yg)("a",{parentName:"li",href:"https://www.npmjs.com/package/node-polyfill-webpack-plugin"},"node polyfill plugin"),"."),(0,r.yg)("li",{parentName:"ul"},"Address Webpack's warning about the absent ",(0,r.yg)("inlineCode",{parentName:"li"},"react-native-reanimated")," module, as React Native Skia references it.")),(0,r.yg)("p",null,"Here is an example Webpack v5 configuration accommodating React Native Skia:"),(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"}}," fs "),(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"}},'"fs"'),(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"}}," { sources } "),(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"}},'"webpack"'),(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"}}," NodePolyfillPlugin "),(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"}},'"node-polyfill-webpack-plugin"'),(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:"#D32F2F"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"newConfiguration"),(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"}},"..."),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"currentConfiguration"),(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"}}," plugins"),(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"}},"..."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"currentConfiguration"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},".plugins"),(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:"#C2C3C5"}},"// 1. Ensure wasm file availability")),(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"}},"new"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," ("),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"class"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"CopySkiaPlugin"),(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"}},"apply"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(compiler) {")),(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"}},"compiler"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"hooks"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"thisCompilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".tap"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"AddSkiaPlugin"'),(0,r.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," (compilation) "),(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:"#1976D2"}},"compilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"hooks"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"processAssets"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".tapPromise"),(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"}}," name"),(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:"#22863A"}},'"copy-skia"'),(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"}}," stage"),(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"}},"compiler"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"webpack"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"Compilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"PROCESS_ASSETS_STAGE_ADDITIONAL"),(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:"#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:"#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"}},"src"),(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"}},"require"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".resolve"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"canvaskit-wasm/bin/full/canvaskit.wasm"'),(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"}},"if"),(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:"#1976D2"}},"compilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".getAsset"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(src)) {")),(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"}},"compilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".emitAsset"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"/canvaskit.wasm"'),(0,r.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"new"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"sources"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".RawSource"),(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:"#1976D2"}},"fs"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"promises"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".readFile"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(src)));")),(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)("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:"#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:"#C2C3C5"}},"// 2. Polyfill fs and path modules")),(0,r.yg)("div",{parentName:"code",className:"line"}),(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"}},"new"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"NodePolyfillPlugin"),(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:"#212121"}},",")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," externals"),(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"}},"..."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"currentConfiguration"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},".externals"),(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:"#C2C3C5"}},"// 3. Suppress reanimated module warning")),(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:"#22863A"}},'"react-native-reanimated"'),(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:"#22863A"}},"\"require('react-native-reanimated')\""),(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:"#22863A"}},'"react-native-reanimated/package.json"'),(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:"#22863A"}},"\"require('react-native-reanimated/package.json')\""),(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:"#212121"}},",")),(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:"#D8DEE9"}},"fs"),(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"}},"fs"),(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"}},"sources"),(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"}},"webpack"),(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:"#D8DEE9"}},"NodePolyfillPlugin"),(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"}},"node-polyfill-webpack-plugin"),(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:"#81A1C1"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"newConfiguration"),(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"}},"..."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"currentConfiguration"),(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:"#D8DEE9"}},"plugins"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," [")),(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:"#D8DEE9"}},"currentConfiguration"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"plugins"),(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:"#ECEFF4"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#616E88"}},"// 1. Ensure wasm file availability")),(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"}},"new"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," ("),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"class"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"CopySkiaPlugin"),(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:"#88C0D0"}},"apply"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"compiler"),(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:"#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:"#D8DEE9"}},"compiler"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"hooks"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"thisCompilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"tap"),(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"}},"AddSkiaPlugin"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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:"#ECEFF4"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"compilation"),(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:"#D8DEE9"}},"compilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"hooks"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"processAssets"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"tapPromise"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"(")),(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:"#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:"#D8DEE9"}},"name"),(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:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"copy-skia"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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:"#D8DEE9"}},"stage"),(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"}},"compiler"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"webpack"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"Compilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"PROCESS_ASSETS_STAGE_ADDITIONAL"),(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:"#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"}},"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"}},"src"),(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"}},"require"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"resolve"),(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"}},"canvaskit-wasm/bin/full/canvaskit.wasm"),(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"}},"if"),(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:"#D8DEE9"}},"compilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"getAsset"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"src"),(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:"#D8DEE9"}},"compilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"emitAsset"),(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"}},"/canvaskit.wasm"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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"}},"new"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"sources"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"RawSource"),(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:"#D8DEE9"}},"fs"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"promises"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"readFile"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"src"),(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:"#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:"#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:"#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:"#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:"#ECEFF4"}},"}"),(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:"#ECEFF4"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#616E88"}},"// 2. Polyfill fs and path modules")),(0,r.yg)("div",{parentName:"code",className:"line"}),(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"}},"new"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"NodePolyfillPlugin"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"()")),(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:"#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:"#D8DEE9"}},"externals"),(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:"#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:"#D8DEE9"}},"currentConfiguration"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"externals"),(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:"#ECEFF4"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#616E88"}},"// 3. Suppress reanimated module warning")),(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:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"react-native-reanimated"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"require('react-native-reanimated')"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"react-native-reanimated/package.json"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"require('react-native-reanimated/package.json')"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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:"#ECEFF4"}},"},")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}")))))),(0,r.yg)("p",null,"Finally, proceed to ",(0,r.yg)("a",{parentName:"p",href:"#loading-skia"},"load Skia"),"."))}v.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/e28e8f5c.c4737ec7.js b/assets/js/e28e8f5c.c4737ec7.js deleted file mode 100644 index 2d8a21cf00..0000000000 --- a/assets/js/e28e8f5c.c4737ec7.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[9852],{5788:(e,a,n)=>{n.d(a,{Iu:()=>i,yg:()=>g});var t=n(1504);function s(e,a,n){return a in e?Object.defineProperty(e,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[a]=n,e}function r(e,a){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);a&&(t=t.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),n.push.apply(n,t)}return n}function o(e){for(var a=1;a=0||(s[n]=e[n]);return s}(e,a);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(s[n]=e[n])}return s}var p=t.createContext({}),y=function(e){var a=t.useContext(p),n=a;return e&&(n="function"==typeof e?e(a):o(o({},a),e)),n},i=function(e){var a=y(e.components);return t.createElement(p.Provider,{value:a},e.children)},d="mdxType",c={inlineCode:"code",wrapper:function(e){var a=e.children;return t.createElement(t.Fragment,{},a)}},m=t.forwardRef((function(e,a){var n=e.components,s=e.mdxType,r=e.originalType,p=e.parentName,i=l(e,["components","mdxType","originalType","parentName"]),d=y(n),m=s,g=d["".concat(p,".").concat(m)]||d[m]||c[m]||r;return n?t.createElement(g,o(o({ref:a},i),{},{components:n})):t.createElement(g,o({ref:a},i))}));function g(e,a){var n=arguments,s=a&&a.mdxType;if("string"==typeof e||s){var r=n.length,o=new Array(r);o[0]=m;var l={};for(var p in a)hasOwnProperty.call(a,p)&&(l[p]=a[p]);l.originalType=e,l[d]="string"==typeof e?e:s,o[1]=l;for(var y=2;y{n.r(a),n.d(a,{assets:()=>c,contentTitle:()=>i,default:()=>v,frontMatter:()=>y,metadata:()=>d,toc:()=>m});var t=n(5072),s=n(1504),r=n(5788),o=n(6528);const l={append:function(e,a){if((a=a||{}).id=a.id||e.dataset.snackId||e.dataset.sketchId,a.platform=a.platform||e.dataset.snackPlatform||e.dataset.sketchPlatform,a.supportedPlatforms=a.supportedPlatforms||e.dataset.snackSupportedPlatforms||e.dataset.snackSupportedplatforms,a.preview=a.preview||e.dataset.snackPreview||e.dataset.sketchPreview||"true",a.sdkVersion=a.sdkVersion||e.dataset.snackSdkVersion||e.dataset.snackSdkversion,a.name=a.name||e.dataset.snackName,a.description=a.description||e.dataset.snackDescription,a.theme=a.theme||e.dataset.snackTheme,a.appetizePayerCode=a.appetizePayerCode||e.dataset.snackAppetizePayerCode,a.loading=a.loading||e.dataset.snackLoading,!a.code&&e.dataset.snackCode&&(a.code=decodeURIComponent(e.dataset.snackCode)),!a.files&&e.dataset.snackFiles&&(a.files=decodeURIComponent(e.dataset.snackFiles)),!a.dependencies&&e.dataset.snackDependencies&&(a.dependencies=e.dataset.snackDependencies),!e.querySelector("iframe[data-snack-iframe]")&&(a.id||a.code||a.files)){var n=Math.random().toString(36).substr(2,10),t=document.createElement("iframe"),s="?iframeId="+n;a.preview&&(s+="&preview="+a.preview),a.platform&&(s+="&platform="+a.platform),a.supportedPlatforms&&(s+="&supportedPlatforms="+a.supportedPlatforms),a.sdkVersion&&(s+="&sdkVersion="+a.sdkVersion),a.name&&(s+="&name="+a.name),a.description&&(s+="&description="+a.description),a.theme&&(s+="&theme="+a.theme),a.appetizePayerCode&&(s+="&appetizePayerCode="+a.appetizePayerCode),a.verbose&&(s+="&verbose="+a.verbose),a.loading&&(t.loading=a.loading),a.id?t.src="https://snack.expo.dev/embedded/"+a.id+s:t.src="https://snack.expo.dev/embedded"+s+"&waitForData=true",t.style="display: block",t.height="100%",t.width="100%",t.frameBorder="0",t.allowTransparency=!0,t.dataset.snackIframe=!0,e.appendChild(t),(a.code||a.files||a.dependencies)&&window.addEventListener("message",(function(e){var s=e.data[0],r=e.data[1];"expoFrameLoaded"===s&&r.iframeId===n&&t.contentWindow.postMessage(["expoDataEvent",{iframeId:n,dependencies:a.dependencies,code:a.code,files:a.files}],"*")}))}},remove:function(e){var a=e.querySelector("iframe[data-snack-iframe]");a&&a.parentNode.removeChild(a)},initialize:function(){document.querySelectorAll("[data-sketch-id], [data-snack-id], [data-snack-code]").forEach((function(e){l.append(e)}))}},p=e=>{let{id:a}=e;const{colorMode:n}=(0,o.U)(),t=(0,s.useRef)(null);return(0,s.useEffect)((()=>{l.remove(t.current),l.append(t.current)}),[n]),s.createElement("div",{ref:t,"data-snack-id":a,"data-snack-platform":"web","data-snack-preview":"true","data-snack-theme":"dark"===n?"dark":"light",style:{overflow:"hidden",background:"#f9f9f9",border:"1px solid var(--color-border)",borderRadius:4,height:505,width:"100%"}})},y={id:"web",title:"Web Support",sidebar_label:"Web",slug:"/getting-started/web"},i=void 0,d={unversionedId:"getting-started/web",id:"getting-started/web",title:"Web Support",description:"React Native Skia runs in the browser via CanvasKit, a WebAssembly (WASM) build of Skia.",source:"@site/docs/getting-started/web.mdx",sourceDirName:"getting-started",slug:"/getting-started/web",permalink:"/react-native-skia/docs/getting-started/web",draft:!1,editUrl:"https://github.com/shopify/react-native-skia/edit/main/docs/docs/getting-started/web.mdx",tags:[],version:"current",frontMatter:{id:"web",title:"Web Support",sidebar_label:"Web",slug:"/getting-started/web"},sidebar:"tutorialSidebar",previous:{title:"Hello World",permalink:"/react-native-skia/docs/getting-started/hello-world"},next:{title:"Headless",permalink:"/react-native-skia/docs/getting-started/headless"}},c={},m=[{value:"Expo",id:"expo",level:2},{value:"Expo Router",id:"expo-router",level:3},{value:"Snack",id:"snack",level:3},{value:"Remotion",id:"remotion",level:2},{value:"Loading Skia",id:"loading-skia",level:2},{value:"Using Code-Splitting",id:"using-code-splitting",level:3},{value:"Using Deferred Component Registration",id:"using-deferred-component-registration",level:3},{value:"Using a CDN",id:"using-a-cdn",level:2},{value:"Unsupported Features",id:"unsupported-features",level:2},{value:"Manual Webpack Installation",id:"manual-webpack-installation",level:2}],g={toc:m},N="wrapper";function v(e){let{components:a,...n}=e;return(0,r.yg)(N,(0,t.c)({},g,n,{components:a,mdxType:"MDXLayout"}),(0,r.yg)("p",null,"React Native Skia runs in the browser via ",(0,r.yg)("a",{parentName:"p",href:"https://skia.org/docs/user/modules/canvaskit/"},"CanvasKit"),", a WebAssembly (WASM) build of Skia.\nThe CanvasKit WASM file, which is 2.9MB when gzipped, is loaded asynchronously.\nDespite its considerable size, it offers flexibility in determining when and how Skia loads, giving you full control over the user experience."),(0,r.yg)("p",null,"We support direct integration with ",(0,r.yg)("a",{parentName:"p",href:"#expo"},"Expo")," and ",(0,r.yg)("a",{parentName:"p",href:"#remotion"},"Remotion"),".\nAdditionally, you'll find manual installation steps for any webpack projects."),(0,r.yg)("p",null,"It should also be mentionned that React Native Skia can be used on projects without the need to install React Native Web."),(0,r.yg)("h2",{id:"expo"},"Expo"),(0,r.yg)("p",null,"Integrating React Native Skia with Expo Web is straightforward."),(0,r.yg)("p",null,"Use the ",(0,r.yg)("inlineCode",{parentName:"p"},"setup-skia-web")," script to ensure that the ",(0,r.yg)("inlineCode",{parentName:"p"},"canvaskit.wasm")," file is accessible within your Expo project's public folder.\nIf you're ",(0,r.yg)("a",{parentName:"p",href:"#using-a-cdn"},"loading CanvasKit from a CDN"),", running the ",(0,r.yg)("inlineCode",{parentName:"p"},"setup-skia-web")," script is unnecessary."),(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"},"bash"),(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:"#24292EFF"}},"$ npx expo install @shopify/react-native-skia")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"$ yarn setup-skia-web"))))),(0,r.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,r.yg)("div",{parentName:"pre",className:"language-id"},"bash"),(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:"#D8DEE9FF"}},"$ npx expo install @shopify/react-native-skia")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"$ yarn setup-skia-web")))))),(0,r.yg)("admonition",{type:"info"},(0,r.yg)("p",{parentName:"admonition"},"Run ",(0,r.yg)("inlineCode",{parentName:"p"},"yarn setup-skia-web")," each time you upgrade the ",(0,r.yg)("inlineCode",{parentName:"p"},"@shopify/react-native-skia")," package.\nConsider incorporating it into your ",(0,r.yg)("inlineCode",{parentName:"p"},"postinstall")," script for convenience.")),(0,r.yg)("p",null,"After setup, choose your method to ",(0,r.yg)("a",{parentName:"p",href:"#loading-skia"},"Load Skia"),"."),(0,r.yg)("h3",{id:"expo-router"},"Expo Router"),(0,r.yg)("p",null,"For projects using Expo Router, you can use ",(0,r.yg)("a",{parentName:"p",href:"#using-code-splitting"},"code-splitting")," or ",(0,r.yg)("a",{parentName:"p",href:"#using-deferred-component-registration"},"deferred component registration"),".\nIf you wish to use deferred component registration with Expo Router, create a new entry script and reference it in your ",(0,r.yg)("inlineCode",{parentName:"p"},"package.json"),". For instance, if you've created ",(0,r.yg)("inlineCode",{parentName:"p"},"index.js")," and ",(0,r.yg)("inlineCode",{parentName:"p"},"index.web.js")," in the ",(0,r.yg)("inlineCode",{parentName:"p"},"src/")," directory, update your ",(0,r.yg)("inlineCode",{parentName:"p"},"package.json")," accordingly:"),(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"},"js"),(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:"#C2C3C5"}},"// package.json")),(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:"#22863A"}},'"main"'),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},": "),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"src/index"'),(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:"#C2C3C5"}},"//...")),(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"},"js"),(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:"#616E88"}},"// package.json")),(0,r.yg)("div",{parentName:"code",className:"line"},(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:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"main"),(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:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"src/index"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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:"#ECEFF4"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#616E88"}},"//...")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}")))))),(0,r.yg)("p",null,"Below is an example of ",(0,r.yg)("inlineCode",{parentName:"p"},"src/index.web.js"),":"),(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"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},"'@expo/metro-runtime'"),(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"}}," { App } "),(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"}},"'expo-router/build/qualified-entry'"),(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"}}," { renderRootComponent } "),(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"}},"'expo-router/build/renderRootComponent'"),(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:"#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/module/web'"),(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:"#6F42C1"}},"LoadSkiaWeb"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"()"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".then"),(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:"#6F42C1"}},"renderRootComponent"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(App);")),(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:"#A3BE8C"}},"@expo/metro-runtime"),(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"}},"App"),(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"}},"expo-router/build/qualified-entry"),(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"}},"renderRootComponent"),(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"}},"expo-router/build/renderRootComponent"),(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:"#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/module/web"),(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:"#88C0D0"}},"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:"#88C0D0"}},"then"),(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:"#88C0D0"}},"renderRootComponent"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"App"),(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)("p",null,"For the ",(0,r.yg)("inlineCode",{parentName:"p"},"src/index.js")," file, directly invoke ",(0,r.yg)("inlineCode",{parentName:"p"},"renderRootComponent(App)"),"."),(0,r.yg)("h3",{id:"snack"},"Snack"),(0,r.yg)("p",null,"Utilize the ",(0,r.yg)("a",{parentName:"p",href:"#using-code-splitting"},"code-splitting")," method for incorporating React Native Skia on ",(0,r.yg)("a",{parentName:"p",href:"https://snack.expo.dev/"},"snack"),"."),(0,r.yg)(p,{id:"@wcandillon/hello-snack",mdxType:"Snack"}),(0,r.yg)("h2",{id:"remotion"},"Remotion"),(0,r.yg)("p",null,"Follow these ",(0,r.yg)("a",{parentName:"p",href:"https://remotion.dev/skia"},"installation steps")," to use React Native Skia with Remotion."),(0,r.yg)("h2",{id:"loading-skia"},"Loading Skia"),(0,r.yg)("p",null,"Ensure Skia is fully loaded and initialized before importing the Skia module.\nTwo methods facilitate Skia's loading:"),(0,r.yg)("ul",null,(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("inlineCode",{parentName:"li"},"")," for code-splitting, delaying the loading of Skia-importing components."),(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("inlineCode",{parentName:"li"},"LoadSkiaWeb()")," to defer root component registration until Skia loads.")),(0,r.yg)("h3",{id:"using-code-splitting"},"Using Code-Splitting"),(0,r.yg)("p",null,"The ",(0,r.yg)("inlineCode",{parentName:"p"},"")," component utilizes ",(0,r.yg)("a",{parentName:"p",href:"https://reactjs.org/docs/code-splitting.html"},"code splitting")," to preload Skia.\nThe following example demonstrates preloading Skia before rendering the ",(0,r.yg)("inlineCode",{parentName:"p"},"MySkiaComponent"),":"),(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"}}," React "),(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"}},"'react'"),(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"}}," { Text } "),(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"}},'"react-native"'),(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"}}," { WithSkiaWeb } "),(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/module/web"'),(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:"#D32F2F"}},"export"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"default"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"function"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"App"),(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"}},"return"),(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"}},"WithSkiaWeb")),(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"}},"// import() uses the default export of MySkiaComponent.tsx")),(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"}},"getComponent"),(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:"#D32F2F"}},"=>"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"./MySkiaComponent"'),(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"}},"fallback"),(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"}},"Text"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},">Loading Skia...}")),(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)("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:"#D8DEE9"}},"React"),(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"}},"react"),(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"}},"Text"),(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"}},"react-native"),(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"}},"WithSkiaWeb"),(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/module/web"),(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:"#81A1C1"}},"export"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"default"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"function"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"App"),(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:"#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"}},"return"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," (")),(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"}},"WithSkiaWeb")),(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"}},"// import() uses the default export of MySkiaComponent.tsx")),(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"}},"getComponent"),(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:"#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"}},"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:"#A3BE8C"}},"./MySkiaComponent"),(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:"#8FBCBB"}},"fallback"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={<"),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"Text"),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},">"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"Loading Skia..."),(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)("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:"#ECEFF4"}},"}")))))),(0,r.yg)("h3",{id:"using-deferred-component-registration"},"Using Deferred Component Registration"),(0,r.yg)("p",null,"The ",(0,r.yg)("inlineCode",{parentName:"p"},"LoadSkiaWeb()")," function facilitates Skia's loading prior to the React app's initiation.\nBelow is an ",(0,r.yg)("inlineCode",{parentName:"p"},"index.web.js")," example:"),(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/module/web"'),(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:"#6F42C1"}},"LoadSkiaWeb"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"()"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".then"),(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"}},"App"),(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:"#D32F2F"}},"await"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"./src/App"'),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},")).default;")),(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"}},"AppRegistry"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".registerComponent"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"Example"'),(0,r.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(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"}}," App);")),(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/module/web"),(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:"#88C0D0"}},"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:"#88C0D0"}},"then"),(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"}},"App"),(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"}},"await"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(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:"#A3BE8C"}},"./src/App"),(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:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"default"),(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"}},"AppRegistry"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"registerComponent"),(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"}},"Example"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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:"#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:"#D8DEE9"}},"App"),(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:"using-a-cdn"},"Using a CDN"),(0,r.yg)("p",null,"Below, CanvasKit loads via code-splitting from a CDN.\nIt is critical that the CDN-hosted CanvasKit version aligns with React Native Skia's requirements."),(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"}}," { WithSkiaWeb } "),(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/module/web"'),(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"}}," { version } "),(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"}},"'canvaskit-wasm/package.json'"),(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:"#D32F2F"}},"export"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"default"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"function"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"App"),(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"}},"return"),(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"}},"WithSkiaWeb")),(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"}},"opts"),(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"}},"locateFile"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," (file) "),(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:"#22863A"}},"`https://cdn.jsdelivr.net/npm/canvaskit-wasm@"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"${"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"version"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},"/bin/full/"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"${"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"file"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},"`"),(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"}},"getComponent"),(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:"#D32F2F"}},"=>"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"./MySkiaComponent"'),(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)("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"}},"WithSkiaWeb"),(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/module/web"),(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"}},"version"),(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"}},"canvaskit-wasm/package.json"),(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:"#81A1C1"}},"export"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"default"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"function"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"App"),(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:"#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"}},"return"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," (")),(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"}},"WithSkiaWeb")),(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"}},"opts"),(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:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"locateFile"),(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:"#ECEFF4"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"file"),(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)("span",{parentName:"div",style:{color:"#A3BE8C"}},"https://cdn.jsdelivr.net/npm/canvaskit-wasm@"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"${"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"version"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"/bin/full/"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"${"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"file"),(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:"#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:"#8FBCBB"}},"getComponent"),(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:"#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"}},"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:"#A3BE8C"}},"./MySkiaComponent"),(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:"#D8DEE9"}},");")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"}")))))),(0,r.yg)("p",null,"Alternatively, use deferred component registration:"),(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/module/web"'),(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"}}," { version } "),(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"}},"'canvaskit-wasm/package.json'"),(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:"#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:"#6F42C1"}},"locateFile"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," (file) "),(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:"#22863A"}},"`https://cdn.jsdelivr.net/npm/canvaskit-wasm@"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"${"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"version"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},"/bin/full/"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"${"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"file"),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},"`")),(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"}},".then"),(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"}},"App"),(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:"#D32F2F"}},"await"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"./src/App"'),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},")).default;")),(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"}},"AppRegistry"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".registerComponent"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"Example"'),(0,r.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(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"}}," App);")),(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/module/web"),(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"}},"version"),(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"}},"canvaskit-wasm/package.json"),(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:"#88C0D0"}},"LoadSkiaWeb"),(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:"#88C0D0"}},"locateFile"),(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:"#ECEFF4"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"file"),(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)("span",{parentName:"div",style:{color:"#A3BE8C"}},"https://cdn.jsdelivr.net/npm/canvaskit-wasm@"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"${"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"version"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"/bin/full/"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"${"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"file"),(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:"#ECEFF4"}},"}"),(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:"#88C0D0"}},"then"),(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"}},"App"),(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"}},"await"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(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:"#A3BE8C"}},"./src/App"),(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:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"default"),(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"}},"AppRegistry"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"registerComponent"),(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"}},"Example"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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:"#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:"#D8DEE9"}},"App"),(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:"unsupported-features"},"Unsupported Features"),(0,r.yg)("p",null,"The following React Native Skia APIs are currently unsupported on React Native Web.\nTo request these features, please submit ",(0,r.yg)("a",{parentName:"p",href:"https://github.com/Shopify/react-native-skia/issues/new/choose"},"a feature request on GitHub"),"."),(0,r.yg)("p",null,(0,r.yg)("strong",{parentName:"p"},"Unsupported")),(0,r.yg)("ul",null,(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("inlineCode",{parentName:"li"},"PathEffectFactory.MakeSum()")),(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("inlineCode",{parentName:"li"},"PathEffectFactory.MakeCompose()")),(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("inlineCode",{parentName:"li"},"PathFactory.MakeFromText()")),(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("inlineCode",{parentName:"li"},"ShaderFilter"))),(0,r.yg)("p",null,(0,r.yg)("strong",{parentName:"p"},"Unplanned")),(0,r.yg)("ul",null,(0,r.yg)("li",{parentName:"ul"},(0,r.yg)("inlineCode",{parentName:"li"},"ImageSvg"))),(0,r.yg)("h2",{id:"manual-webpack-installation"},"Manual Webpack Installation"),(0,r.yg)("p",null,"To enable React Native Skia on Web using Webpack, three key actions are required:"),(0,r.yg)("ul",null,(0,r.yg)("li",{parentName:"ul"},"Ensure the ",(0,r.yg)("inlineCode",{parentName:"li"},"canvaskit.wasm")," file is accessible to the build system."),(0,r.yg)("li",{parentName:"ul"},"Configure the build system to resolve the ",(0,r.yg)("inlineCode",{parentName:"li"},"fs")," and ",(0,r.yg)("inlineCode",{parentName:"li"},"path")," node modules, achievable via the ",(0,r.yg)("a",{parentName:"li",href:"https://www.npmjs.com/package/node-polyfill-webpack-plugin"},"node polyfill plugin"),"."),(0,r.yg)("li",{parentName:"ul"},"Address Webpack's warning about the absent ",(0,r.yg)("inlineCode",{parentName:"li"},"react-native-reanimated")," module, as React Native Skia references it.")),(0,r.yg)("p",null,"Here is an example Webpack v5 configuration accommodating React Native Skia:"),(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"}}," fs "),(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"}},'"fs"'),(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"}}," { sources } "),(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"}},'"webpack"'),(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"}}," NodePolyfillPlugin "),(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"}},'"node-polyfill-webpack-plugin"'),(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:"#D32F2F"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"newConfiguration"),(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"}},"..."),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"currentConfiguration"),(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"}}," plugins"),(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"}},"..."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"currentConfiguration"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},".plugins"),(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:"#C2C3C5"}},"// 1. Ensure wasm file availability")),(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"}},"new"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," ("),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"class"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"CopySkiaPlugin"),(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"}},"apply"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(compiler) {")),(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"}},"compiler"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"hooks"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"thisCompilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".tap"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"AddSkiaPlugin"'),(0,r.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," (compilation) "),(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:"#1976D2"}},"compilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"hooks"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"processAssets"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".tapPromise"),(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"}}," name"),(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:"#22863A"}},'"copy-skia"'),(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"}}," stage"),(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"}},"compiler"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"webpack"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"Compilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"PROCESS_ASSETS_STAGE_ADDITIONAL"),(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:"#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:"#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"}},"src"),(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"}},"require"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".resolve"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"canvaskit-wasm/bin/full/canvaskit.wasm"'),(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"}},"if"),(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:"#1976D2"}},"compilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".getAsset"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(src)) {")),(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"}},"compilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".emitAsset"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"/canvaskit.wasm"'),(0,r.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"new"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"sources"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".RawSource"),(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:"#1976D2"}},"fs"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"promises"),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".readFile"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(src)));")),(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)("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:"#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:"#C2C3C5"}},"// 2. Polyfill fs and path modules")),(0,r.yg)("div",{parentName:"code",className:"line"}),(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"}},"new"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"NodePolyfillPlugin"),(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:"#212121"}},",")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," externals"),(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"}},"..."),(0,r.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"currentConfiguration"),(0,r.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},".externals"),(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:"#C2C3C5"}},"// 3. Suppress reanimated module warning")),(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:"#22863A"}},'"react-native-reanimated"'),(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:"#22863A"}},"\"require('react-native-reanimated')\""),(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:"#22863A"}},'"react-native-reanimated/package.json"'),(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:"#22863A"}},"\"require('react-native-reanimated/package.json')\""),(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:"#212121"}},",")),(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:"#D8DEE9"}},"fs"),(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"}},"fs"),(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"}},"sources"),(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"}},"webpack"),(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:"#D8DEE9"}},"NodePolyfillPlugin"),(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"}},"node-polyfill-webpack-plugin"),(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:"#81A1C1"}},"const"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"newConfiguration"),(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"}},"..."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"currentConfiguration"),(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:"#D8DEE9"}},"plugins"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," [")),(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:"#D8DEE9"}},"currentConfiguration"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"plugins"),(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:"#ECEFF4"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#616E88"}},"// 1. Ensure wasm file availability")),(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"}},"new"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," ("),(0,r.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"class"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"CopySkiaPlugin"),(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:"#88C0D0"}},"apply"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"compiler"),(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:"#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:"#D8DEE9"}},"compiler"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"hooks"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"thisCompilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"tap"),(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"}},"AddSkiaPlugin"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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:"#ECEFF4"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"compilation"),(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:"#D8DEE9"}},"compilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"hooks"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"processAssets"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"tapPromise"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"(")),(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:"#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:"#D8DEE9"}},"name"),(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:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"copy-skia"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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:"#D8DEE9"}},"stage"),(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"}},"compiler"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"webpack"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"Compilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"PROCESS_ASSETS_STAGE_ADDITIONAL"),(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:"#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"}},"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"}},"src"),(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"}},"require"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"resolve"),(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"}},"canvaskit-wasm/bin/full/canvaskit.wasm"),(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"}},"if"),(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:"#D8DEE9"}},"compilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"getAsset"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"src"),(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:"#D8DEE9"}},"compilation"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"emitAsset"),(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"}},"/canvaskit.wasm"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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"}},"new"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"sources"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"RawSource"),(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:"#D8DEE9"}},"fs"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"promises"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"readFile"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"src"),(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:"#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:"#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:"#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:"#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:"#ECEFF4"}},"}"),(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:"#ECEFF4"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#616E88"}},"// 2. Polyfill fs and path modules")),(0,r.yg)("div",{parentName:"code",className:"line"}),(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"}},"new"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"NodePolyfillPlugin"),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"()")),(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:"#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:"#D8DEE9"}},"externals"),(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:"#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:"#D8DEE9"}},"currentConfiguration"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,r.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"externals"),(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:"#ECEFF4"}}," "),(0,r.yg)("span",{parentName:"div",style:{color:"#616E88"}},"// 3. Suppress reanimated module warning")),(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:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"react-native-reanimated"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"require('react-native-reanimated')"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"react-native-reanimated/package.json"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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:"#ECEFF4"}},'"'),(0,r.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"require('react-native-reanimated/package.json')"),(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(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:"#ECEFF4"}},"},")),(0,r.yg)("div",{parentName:"code",className:"line"},(0,r.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}")))))),(0,r.yg)("p",null,"Finally, proceed to ",(0,r.yg)("a",{parentName:"p",href:"#loading-skia"},"load Skia"),"."))}v.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.f2dc12ae.js b/assets/js/runtime~main.d015ffcf.js similarity index 98% rename from assets/js/runtime~main.f2dc12ae.js rename to assets/js/runtime~main.d015ffcf.js index b4f3c01a4f..1f155c8c79 100644 --- a/assets/js/runtime~main.f2dc12ae.js +++ b/assets/js/runtime~main.d015ffcf.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:"e6e1dade",336:"2d96ace2",568:"b6e6d0b2",572:"9e984946",632:"f1478fdd",784:"9fba47cd",1052:"80af99e6",1184:"19ab985a",1484:"25b3e79e",1676:"5ac4a266",1920:"a847af70",2152:"b6af9506",2279:"96181acb",2428:"b1d63a75",2528:"e7e83c77",2828:"f6696911",2920:"cb676423",3328:"18c2d9cc",3656:"d879c050",3812:"52d37840",4038:"2beaeecb",4057:"b4451aab",4314:"b52550e8",4368:"4d4ff03c",4412:"fc5b2acc",4820:"d8a03576",5200:"f8c65042",5436:"728458a8",5480:"c90cdad4",5676:"447efe0c",5696:"99909ab3",5776:"05e9701c",5788:"a3c6b621",5820:"1665d70c",5832:"10d2bea0",5852:"472ef326",5984:"730e4a14",6216:"4f01e522",6264:"13ee0a23",6616:"f80dc1e0",6720:"174dc800",6752:"c6f61a5f",6912:"2789276c",6972:"0a972f1f",7044:"fbe3382b",7204:"803d3561",7624:"3c46103a",8076:"171d2f25",8336:"8aa10fe4",8552:"85b6aeae",8648:"e9b5d969",8680:"81f6b5d7",8761:"2a55aa13",8879:"827915ee",9290:"b977f251",9380:"76e3f527",9392:"7bc9ee6f",9648:"f13d52da",9656:"a24f2068",9738:"bc4bacc9",9772:"b2606d4f",9852:"c4737ec7"}[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:"e6e1dade",336:"2d96ace2",568:"b6e6d0b2",572:"9e984946",632:"f1478fdd",784:"9fba47cd",1052:"80af99e6",1184:"19ab985a",1484:"25b3e79e",1676:"5ac4a266",1920:"a847af70",2152:"b6af9506",2279:"96181acb",2428:"b1d63a75",2528:"e7e83c77",2828:"f6696911",2920:"cb676423",3328:"18c2d9cc",3656:"d879c050",3812:"52d37840",4038:"2beaeecb",4057:"b4451aab",4314:"b52550e8",4368:"4d4ff03c",4412:"fc5b2acc",4820:"d8a03576",5200:"f8c65042",5436:"728458a8",5480:"c90cdad4",5676:"447efe0c",5696:"99909ab3",5776:"05e9701c",5788:"a3c6b621",5820:"1665d70c",5832:"10d2bea0",5852:"472ef326",5984:"730e4a14",6216:"4f01e522",6264:"13ee0a23",6616:"f80dc1e0",6720:"174dc800",6752:"c6f61a5f",6912:"2789276c",6972:"0a972f1f",7044:"fbe3382b",7204:"803d3561",7624:"3c46103a",8076:"171d2f25",8336:"8aa10fe4",8552:"85b6aeae",8648:"e9b5d969",8680:"81f6b5d7",8761:"2a55aa13",8879:"827915ee",9290:"b977f251",9380:"76e3f527",9392:"7bc9ee6f",9648:"f13d52da",9656:"a24f2068",9738:"bc4bacc9",9772:"b2606d4f",9852:"3129dfde"}[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 4d1a530b35..a85cd6785e 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 e3c1470822..99416f0ebe 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 6be9ac6d32..bf950b69b8 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 c0d4fbbab3..2cbd20107e 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 1fdb030ba1..3b18a3fe0e 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 a66d5094f6..70abc9c3ef 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 a0acaf2a16..fb8189ee56 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 b6db94cf23..7646ae77f0 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 c3a3963d53..544c1dd81c 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 34d5639ff3..152aee29ea 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 ed76d0c6a4..cf2aa32701 100644 --- a/docs/getting-started/headless/index.html +++ b/docs/getting-started/headless/index.html @@ -4,7 +4,7 @@ Headless | React Native Skia - + @@ -14,7 +14,7 @@ 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. 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 afe1e40952..eb2fdca01f 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 72fcb6134b..2a031d216c 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 02415e5f6d..9df1fef60f 100644 --- a/docs/getting-started/web/index.html +++ b/docs/getting-started/web/index.html @@ -4,7 +4,7 @@ Web Support | React Native Skia - + @@ -12,7 +12,8 @@

Web Support

React Native Skia runs in the browser via CanvasKit, a WebAssembly (WASM) build of Skia. The CanvasKit WASM file, which is 2.9MB when gzipped, is loaded asynchronously. Despite its considerable size, it offers flexibility in determining when and how Skia loads, giving you full control over the user experience.

We support direct integration with Expo and Remotion. -Additionally, you'll find manual installation steps for any webpack projects.

It should also be mentionned that React Native Skia can be used on projects without the need to install React Native Web.

Expo​

Integrating React Native Skia with Expo Web is straightforward.

Use the setup-skia-web script to ensure that the canvaskit.wasm file is accessible within your Expo project's public folder. +Additionally, you'll find manual installation steps for any webpack projects.

It should also be mentionned that React Native Skia can be used on projects without the need to install React Native Web.

Expo​

info

Metro and expo-router support is available from v0.1.240 and onwards. +If you are using v0.1.221 (recommended version for Expo SDK 50), you can use this patch (using patch-package.

Use the setup-skia-web script to ensure that the canvaskit.wasm file is accessible within your Expo project's public folder. If you're loading CanvasKit from a CDN, running the setup-skia-web script is unnecessary.

bash
$ npx expo install @shopify/react-native-skia
$ yarn setup-skia-web
bash
$ npx expo install @shopify/react-native-skia
$ yarn setup-skia-web
info

Run yarn setup-skia-web each time you upgrade the @shopify/react-native-skia package. Consider incorporating it into your postinstall script for convenience.

After setup, choose your method to Load Skia.

Expo Router​

For projects using Expo Router, you can use code-splitting or deferred component registration. If you wish to use deferred component registration with Expo Router, create a new entry script and reference it in your package.json. For instance, if you've created index.js and index.web.js in the src/ directory, update your package.json accordingly:

js
// package.json
{
  "main": "src/index",
  //...
}
js
// package.json
{
  "main": "src/index",
  //...
}

Below is an example of src/index.web.js:

tsx
import '@expo/metro-runtime';
import { App } from 'expo-router/build/qualified-entry';
import { renderRootComponent } from 'expo-router/build/renderRootComponent';
import { LoadSkiaWeb } from '@shopify/react-native-skia/lib/module/web';
LoadSkiaWeb().then(async () => {
  renderRootComponent(App);
});
tsx
import '@expo/metro-runtime';
import { App } from 'expo-router/build/qualified-entry';
import { renderRootComponent } from 'expo-router/build/renderRootComponent';
import { LoadSkiaWeb } from '@shopify/react-native-skia/lib/module/web';
LoadSkiaWeb().then(async () => {
  renderRootComponent(App);
});

For the src/index.js file, directly invoke renderRootComponent(App).

Snack​

Utilize the code-splitting method for incorporating React Native Skia on snack.

Remotion​

Follow these installation steps to use React Native Skia with Remotion.

Loading Skia​

Ensure Skia is fully loaded and initialized before importing the Skia module. @@ -21,7 +22,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.
  • Address Webpack's warning about the absent react-native-reanimated module, as React Native Skia references it.

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()
  ],
  externals: {
    ...currentConfiguration.externals,
    // 3. Suppress reanimated module warning
    "react-native-reanimated": "require('react-native-reanimated')",
    "react-native-reanimated/package.json": "require('react-native-reanimated/package.json')",
  },
}
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()
  ],
  externals: {
    ...currentConfiguration.externals,
    // 3. Suppress reanimated module warning
    "react-native-reanimated": "require('react-native-reanimated')",
    "react-native-reanimated/package.json": "require('react-native-reanimated/package.json')",
  },
}

Finally, proceed to load Skia.

- + \ No newline at end of file diff --git a/docs/group/index.html b/docs/group/index.html index 0a6a4d014c..6b3e0e240e 100644 --- a/docs/group/index.html +++ b/docs/group/index.html @@ -4,7 +4,7 @@ Group | React Native Skia - + @@ -249,7 +249,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 4f3521bd59..c47f7dc900 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 4574562fb1..b28dc61f48 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 6c4dcdfa00..f7de6e6c33 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 f1a04a1422..1686a48e91 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 88727acfb1..b81d114fb8 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 6494af30a2..7ad0f6ef09 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 b8f183cf85..f768fa2dec 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 c2a03b0519..76a086f7f0 100644 --- a/docs/images-svg/index.html +++ b/docs/images-svg/index.html @@ -4,7 +4,7 @@ SVG Images | React Native Skia - + @@ -280,7 +280,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 7991670026..dc4508d6e6 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 f815965331..24feff3861 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 2e05eed0b8..8aec97d6af 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 d12d9fdbb5..9d894317f3 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 8aa39e0e92..695d9b9ccc 100644 --- a/docs/paint/properties/index.html +++ b/docs/paint/properties/index.html @@ -4,7 +4,7 @@ Painting Properties | React Native Skia - + @@ -50,7 +50,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 1cc14340b6..e04fe1a177 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 2d761db636..5549d93148 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 480ecb60be..5654989dcc 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 97a89dafd5..19be2650eb 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 78d550dfb6..9cb5917931 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 995c5de60d..fe13090a93 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 4825cc5749..f33e08ec17 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 0389307928..a0390b5289 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 4c544376c6..b6c17e978b 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 ac1cd0ed51..6454249378 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 2834bc78df..eac99353e5 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 6574c28b20..25d6c72039 100644 --- a/docs/shapes/pictures/index.html +++ b/docs/shapes/pictures/index.html @@ -4,7 +4,7 @@ Pictures | React Native Skia - + @@ -92,7 +92,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 591c95b475..295f769ad5 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 8256855af8..da00c59cc5 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 2dc2deb697..76693c78e0 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 a46f6b72dc..5b0b02d7a1 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 a15b774524..791d49fa1c 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 f818c6ac71..a13ed401ce 100644 --- a/docs/text/paragraph/index.html +++ b/docs/text/paragraph/index.html @@ -4,7 +4,7 @@ Paragraph | React Native Skia - + @@ -342,7 +342,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 0faf75eea4..7fb70852ca 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 7dd3cbd616..21934fb28a 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 1985e280ad..fb16fb4977 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 adb7dffef3..ea960745bd 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 3b4c3c37a2..86feb8a65f 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