diff --git a/404.html b/404.html index a2db56ff20..ced64064ef 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.bf487d96.js b/assets/js/e28e8f5c.bf487d96.js new file mode 100644 index 0000000000..2a665261b2 --- /dev/null +++ b/assets/js/e28e8f5c.bf487d96.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 o(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 r(e){for(var a=1;a=0||(s[n]=e[n]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=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):r(r({},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,o=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]||o;return n?t.createElement(g,r(r({ref:a},i),{},{components:n})):t.createElement(g,r({ref:a},i))}));function g(e,a){var n=arguments,s=a&&a.mdxType;if("string"==typeof e||s){var o=n.length,r=new Array(o);r[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,r[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),o=n(5788),r=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],o=e.data[1];"expoFrameLoaded"===s&&o.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,r.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:"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,o.yg)(N,(0,t.c)({},g,n,{components:a,mdxType:"MDXLayout"}),(0,o.yg)("p",null,"React Native Skia runs in the browser via ",(0,o.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,o.yg)("p",null,"We support direct integration with ",(0,o.yg)("a",{parentName:"p",href:"#expo"},"Expo")," and ",(0,o.yg)("a",{parentName:"p",href:"#remotion"},"Remotion"),".\nAdditionally, you'll find manual installation steps for any webpack projects."),(0,o.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,o.yg)("h2",{id:"expo"},"Expo"),(0,o.yg)("admonition",{type:"info"},(0,o.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,o.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,o.yg)("a",{parentName:"p",href:"https://www.npmjs.com/package/patch-package"},(0,o.yg)("inlineCode",{parentName:"a"},"patch-package")),".")),(0,o.yg)("p",null,"Use the ",(0,o.yg)("inlineCode",{parentName:"p"},"setup-skia-web")," script to ensure that the ",(0,o.yg)("inlineCode",{parentName:"p"},"canvaskit.wasm")," file is accessible within your Expo project's public folder.\nIf you're ",(0,o.yg)("a",{parentName:"p",href:"#using-a-cdn"},"loading CanvasKit from a CDN"),", running the ",(0,o.yg)("inlineCode",{parentName:"p"},"setup-skia-web")," script is unnecessary."),(0,o.yg)("div",{className:"shiki-twoslash-fragment"},(0,o.yg)("pre",{parentName:"div",className:"shiki min-light",style:{backgroundColor:"#ffffff",color:"#24292eff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"bash"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"$ npx expo install @shopify/react-native-skia")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"$ yarn setup-skia-web"))))),(0,o.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"bash"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"$ npx expo install @shopify/react-native-skia")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"$ yarn setup-skia-web")))))),(0,o.yg)("admonition",{type:"info"},(0,o.yg)("p",{parentName:"admonition"},"Run ",(0,o.yg)("inlineCode",{parentName:"p"},"yarn setup-skia-web")," each time you upgrade the ",(0,o.yg)("inlineCode",{parentName:"p"},"@shopify/react-native-skia")," package.\nConsider incorporating it into your ",(0,o.yg)("inlineCode",{parentName:"p"},"postinstall")," script for convenience.")),(0,o.yg)("p",null,"After setup, choose your method to ",(0,o.yg)("a",{parentName:"p",href:"#loading-skia"},"Load Skia"),"."),(0,o.yg)("p",null,"For projects using Expo Router, you can use ",(0,o.yg)("a",{parentName:"p",href:"#using-code-splitting"},"code-splitting")," or ",(0,o.yg)("a",{parentName:"p",href:"#using-deferred-component-registration"},"deferred component registration"),".\nIf you wish to use deferred component registration with Expo Router, you need to create your own ",(0,o.yg)("inlineCode",{parentName:"p"},"main")," property in ",(0,o.yg)("inlineCode",{parentName:"p"},"package.json"),".\nFor instance, if you've created ",(0,o.yg)("inlineCode",{parentName:"p"},"index.tsx")," and ",(0,o.yg)("inlineCode",{parentName:"p"},"index.web.tsx")," in your root directory, update your ",(0,o.yg)("inlineCode",{parentName:"p"},"package.json")," accordingly:"),(0,o.yg)("div",{className:"shiki-twoslash-fragment"},(0,o.yg)("pre",{parentName:"div",className:"shiki min-light",style:{backgroundColor:"#ffffff",color:"#24292eff"}},(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},'- "main": "expo-router/entry",\n+ "main": "index",'))),(0,o.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},'- "main": "expo-router/entry",\n+ "main": "index",')))),(0,o.yg)("p",null,"Below is an example of ",(0,o.yg)("inlineCode",{parentName:"p"},"index.web.tsx"),":"),(0,o.yg)("div",{className:"shiki-twoslash-fragment"},(0,o.yg)("pre",{parentName:"div",className:"shiki min-light",style:{backgroundColor:"#ffffff",color:"#24292eff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"'@expo/metro-runtime'"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { App } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"'expo-router/build/qualified-entry'"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { renderRootComponent } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"'expo-router/build/renderRootComponent'"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { LoadSkiaWeb } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"'@shopify/react-native-skia/lib/module/web'"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"LoadSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".then"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"async"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," () "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"renderRootComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(App);")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"});"))))),(0,o.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"@expo/metro-runtime"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"expo-router/build/qualified-entry"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"renderRootComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"expo-router/build/renderRootComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"LoadSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"@shopify/react-native-skia/lib/module/web"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"LoadSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"then"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"async"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"renderRootComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")))))),(0,o.yg)("p",null,"For the ",(0,o.yg)("inlineCode",{parentName:"p"},"index.tsx")," file, directly invoke ",(0,o.yg)("inlineCode",{parentName:"p"},"renderRootComponent(App)"),"."),(0,o.yg)("h3",{id:"snack"},"Snack"),(0,o.yg)("p",null,"Utilize the ",(0,o.yg)("a",{parentName:"p",href:"#using-code-splitting"},"code-splitting")," method for incorporating React Native Skia on ",(0,o.yg)("a",{parentName:"p",href:"https://snack.expo.dev/"},"snack"),"."),(0,o.yg)(p,{id:"@wcandillon/hello-snack",mdxType:"Snack"}),(0,o.yg)("h2",{id:"remotion"},"Remotion"),(0,o.yg)("p",null,"Follow these ",(0,o.yg)("a",{parentName:"p",href:"https://remotion.dev/skia"},"installation steps")," to use React Native Skia with Remotion."),(0,o.yg)("h2",{id:"loading-skia"},"Loading Skia"),(0,o.yg)("p",null,"Ensure Skia is fully loaded and initialized before importing the Skia module.\nTwo methods facilitate Skia's loading:"),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},(0,o.yg)("inlineCode",{parentName:"li"},"")," for code-splitting, delaying the loading of Skia-importing components."),(0,o.yg)("li",{parentName:"ul"},(0,o.yg)("inlineCode",{parentName:"li"},"LoadSkiaWeb()")," to defer root component registration until Skia loads.")),(0,o.yg)("h3",{id:"using-code-splitting"},"Using Code-Splitting"),(0,o.yg)("p",null,"The ",(0,o.yg)("inlineCode",{parentName:"p"},"")," component utilizes ",(0,o.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,o.yg)("inlineCode",{parentName:"p"},"MySkiaComponent"),":"),(0,o.yg)("div",{className:"shiki-twoslash-fragment"},(0,o.yg)("pre",{parentName:"div",className:"shiki min-light",style:{backgroundColor:"#ffffff",color:"#24292eff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," React "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"'react'"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { Text } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"react-native"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { WithSkiaWeb } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"@shopify/react-native-skia/lib/module/web"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"export"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"default"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"function"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"() {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"return"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," (")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," <"),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"WithSkiaWeb")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#C2C3C5"}},"// import() uses the default export of MySkiaComponent.tsx")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"getComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{() "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"@/components/MySkiaComponent"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},")}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"fallback"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{<"),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"Text"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},">Loading Skia...}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," />")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," );")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"}"))))),(0,o.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"React"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"react"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"Text"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"react-native"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"WithSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"@shopify/react-native-skia/lib/module/web"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"export"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"default"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"function"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"return"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," (")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"<"),(0,o.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"WithSkiaWeb")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#616E88"}},"// import() uses the default export of MySkiaComponent.tsx")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"getComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"@/components/MySkiaComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"fallback"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={<"),(0,o.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"Text"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},">"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"Loading Skia..."),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"/>")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," )"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}")))))),(0,o.yg)("admonition",{type:"info"},(0,o.yg)("p",{parentName:"admonition"},"When using expo router in dev mode you cannot load components that are inside the app directory, as they will get evaluated by the router before CanvasKit is loaded.\nMake sure the component to load lies outside the 'app' directory.")),(0,o.yg)("h3",{id:"using-deferred-component-registration"},"Using Deferred Component Registration"),(0,o.yg)("p",null,"The ",(0,o.yg)("inlineCode",{parentName:"p"},"LoadSkiaWeb()")," function facilitates Skia's loading prior to the React app's initiation.\nBelow is an ",(0,o.yg)("inlineCode",{parentName:"p"},"index.web.js")," example:"),(0,o.yg)("div",{className:"shiki-twoslash-fragment"},(0,o.yg)("pre",{parentName:"div",className:"shiki min-light",style:{backgroundColor:"#ffffff",color:"#24292eff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { LoadSkiaWeb } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"@shopify/react-native-skia/lib/module/web"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"LoadSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".then"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"async"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," () "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"const"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," ("),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"await"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"./src/App"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},")).default;")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"AppRegistry"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".registerComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"Example"'),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," () "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," App);")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"});"))))),(0,o.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"LoadSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"@shopify/react-native-skia/lib/module/web"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"LoadSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"then"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"async"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"const"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," ("),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"await"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"./src/App"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"))"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"default"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"AppRegistry"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"registerComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"Example"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},","),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")))))),(0,o.yg)("h2",{id:"using-a-cdn"},"Using a CDN"),(0,o.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,o.yg)("div",{className:"shiki-twoslash-fragment"},(0,o.yg)("pre",{parentName:"div",className:"shiki min-light",style:{backgroundColor:"#ffffff",color:"#24292eff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { WithSkiaWeb } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"@shopify/react-native-skia/lib/module/web"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { version } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"'canvaskit-wasm/package.json'"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"export"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"default"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"function"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"() {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"return"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," (")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," <"),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"WithSkiaWeb")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"opts"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{{ "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"locateFile"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," (file) "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"`https://cdn.jsdelivr.net/npm/canvaskit-wasm@"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"${"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"version"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"/bin/full/"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"${"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"file"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"`"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," }}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"getComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{() "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"./MySkiaComponent"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},")}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," );")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"}"))))),(0,o.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"WithSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"@shopify/react-native-skia/lib/module/web"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"version"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"canvaskit-wasm/package.json"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"export"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"default"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"function"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"return"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," (")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"<"),(0,o.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"WithSkiaWeb")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"opts"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"locateFile"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"file"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"`"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"https://cdn.jsdelivr.net/npm/canvaskit-wasm@"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"${"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"version"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"/bin/full/"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"${"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"file"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}`"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"getComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"./MySkiaComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},");")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"}")))))),(0,o.yg)("p",null,"Alternatively, use deferred component registration:"),(0,o.yg)("div",{className:"shiki-twoslash-fragment"},(0,o.yg)("pre",{parentName:"div",className:"shiki min-light",style:{backgroundColor:"#ffffff",color:"#24292eff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { LoadSkiaWeb } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"@shopify/react-native-skia/lib/module/web"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { version } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"'canvaskit-wasm/package.json'"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"LoadSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"({")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"locateFile"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," (file) "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"`https://cdn.jsdelivr.net/npm/canvaskit-wasm@"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"${"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"version"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"/bin/full/"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"${"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"file"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"`")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"})"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".then"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"async"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," () "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"const"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," ("),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"await"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"./src/App"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},")).default;")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"AppRegistry"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".registerComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"Example"'),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," () "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," App);")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"});"))))),(0,o.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"LoadSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"@shopify/react-native-skia/lib/module/web"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"version"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"canvaskit-wasm/package.json"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"LoadSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"locateFile"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"file"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"`"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"https://cdn.jsdelivr.net/npm/canvaskit-wasm@"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"${"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"version"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"/bin/full/"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"${"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"file"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}`")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"then"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"async"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"const"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," ("),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"await"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"./src/App"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"))"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"default"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"AppRegistry"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"registerComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"Example"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},","),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")))))),(0,o.yg)("h2",{id:"unsupported-features"},"Unsupported Features"),(0,o.yg)("p",null,"The following React Native Skia APIs are currently unsupported on React Native Web.\nTo request these features, please submit ",(0,o.yg)("a",{parentName:"p",href:"https://github.com/Shopify/react-native-skia/issues/new/choose"},"a feature request on GitHub"),"."),(0,o.yg)("p",null,(0,o.yg)("strong",{parentName:"p"},"Unsupported")),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},(0,o.yg)("inlineCode",{parentName:"li"},"PathEffectFactory.MakeSum()")),(0,o.yg)("li",{parentName:"ul"},(0,o.yg)("inlineCode",{parentName:"li"},"PathEffectFactory.MakeCompose()")),(0,o.yg)("li",{parentName:"ul"},(0,o.yg)("inlineCode",{parentName:"li"},"PathFactory.MakeFromText()")),(0,o.yg)("li",{parentName:"ul"},(0,o.yg)("inlineCode",{parentName:"li"},"ShaderFilter"))),(0,o.yg)("h2",{id:"manual-webpack-installation"},"Manual webpack Installation"),(0,o.yg)("p",null,"To enable React Native Skia on Web using webpack, three key actions are required:"),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},"Ensure the ",(0,o.yg)("inlineCode",{parentName:"li"},"canvaskit.wasm")," file is accessible to the build system."),(0,o.yg)("li",{parentName:"ul"},"Configure the build system to resolve the ",(0,o.yg)("inlineCode",{parentName:"li"},"fs")," and ",(0,o.yg)("inlineCode",{parentName:"li"},"path")," node modules, achievable via the ",(0,o.yg)("a",{parentName:"li",href:"https://www.npmjs.com/package/node-polyfill-webpack-plugin"},"node polyfill plugin"),"."),(0,o.yg)("li",{parentName:"ul"},"Update aliases for ",(0,o.yg)("inlineCode",{parentName:"li"},"react-native-reanimated")," and ",(0,o.yg)("inlineCode",{parentName:"li"},"react-native/Libraries/Image/AssetRegistry")," so webpack can do the bundle.")),(0,o.yg)("p",null,"Here is an example webpack v5 configuration accommodating React Native Skia:"),(0,o.yg)("div",{className:"shiki-twoslash-fragment"},(0,o.yg)("pre",{parentName:"div",className:"shiki min-light",style:{backgroundColor:"#ffffff",color:"#24292eff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," fs "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"fs"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { sources } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"webpack"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," NodePolyfillPlugin "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"node-polyfill-webpack-plugin"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"const"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"newConfiguration"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"..."),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"currentConfiguration"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," plugins"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," [")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"..."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"currentConfiguration"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},".plugins"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#C2C3C5"}},"// 1. Ensure wasm file availability")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"new"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," ("),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"class"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"CopySkiaPlugin"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"apply"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(compiler) {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"compiler"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"hooks"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"thisCompilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".tap"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"AddSkiaPlugin"'),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," (compilation) "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"compilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"hooks"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"processAssets"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".tapPromise"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," name"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"copy-skia"'),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," stage"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"compiler"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"webpack"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"Compilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"PROCESS_ASSETS_STAGE_ADDITIONAL"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," }"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"async"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," () "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"const"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"src"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"require"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".resolve"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"canvaskit-wasm/bin/full/canvaskit.wasm"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},");")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"if"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," ("),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"!"),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"compilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".getAsset"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(src)) {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"compilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".emitAsset"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"/canvaskit.wasm"'),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"new"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"sources"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".RawSource"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"await"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"fs"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"promises"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".readFile"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(src)));")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," }")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," }")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," );")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," });")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," }")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," })()"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#C2C3C5"}},"// 2. Polyfill fs and path modules")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"new"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"NodePolyfillPlugin"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"()")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," ]"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," alias"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"..."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"currentConfiguration"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},".alias"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#C2C3C5"}},"// 3. Suppress reanimated module warning")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#C2C3C5"}},"// This assumes Reanimated is installed, if not you can use false.")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"react-native-reanimated/package.json"'),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"require"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".resolve"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"react-native-reanimated/package.json"')),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," )"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"react-native-reanimated"'),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"require"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".resolve"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"react-native-reanimated"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"react-native/Libraries/Image/AssetRegistry"'),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"false"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," }"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"}"))))),(0,o.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"fs"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"fs"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"sources"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"webpack"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"NodePolyfillPlugin"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"node-polyfill-webpack-plugin"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"const"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"newConfiguration"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"..."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"currentConfiguration"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"plugins"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," [")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"..."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"currentConfiguration"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"plugins"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#616E88"}},"// 1. Ensure wasm file availability")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"new"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," ("),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"class"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"CopySkiaPlugin"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"apply"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"compiler"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"compiler"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"hooks"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"thisCompilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"tap"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"AddSkiaPlugin"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},","),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"compilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"compilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"hooks"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"processAssets"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"tapPromise"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"(")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"name"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"copy-skia"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"stage"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"compiler"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"webpack"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"Compilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"PROCESS_ASSETS_STAGE_ADDITIONAL"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"},")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"async"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"const"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"src"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"require"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"resolve"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"canvaskit-wasm/bin/full/canvaskit.wasm"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"if"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," ("),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"!"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"compilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"getAsset"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"src"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")) "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"compilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"emitAsset"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"/canvaskit.wasm"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},","),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"new"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"sources"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"RawSource"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"await"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"fs"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"promises"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"readFile"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"src"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")))"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," )"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")()"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#616E88"}},"// 2. Polyfill fs and path modules")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"new"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"NodePolyfillPlugin"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"()")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," ]"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"alias"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"..."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"currentConfiguration"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"alias"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#616E88"}},"// 3. Suppress reanimated module warning")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#616E88"}},"// This assumes Reanimated is installed, if not you can use false.")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"react-native-reanimated/package.json"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"require"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"resolve"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"(")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"react-native-reanimated/package.json"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"')),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," )"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"react-native-reanimated"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"require"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"resolve"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"react-native-reanimated"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"react-native/Libraries/Image/AssetRegistry"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"false"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"},")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}")))))),(0,o.yg)("p",null,"Finally, proceed to ",(0,o.yg)("a",{parentName:"p",href:"#loading-skia"},"load Skia"),"."))}v.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/e28e8f5c.e8bc7dfd.js b/assets/js/e28e8f5c.e8bc7dfd.js deleted file mode 100644 index 9df920ceaf..0000000000 --- a/assets/js/e28e8f5c.e8bc7dfd.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 o(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 r(e){for(var a=1;a=0||(s[n]=e[n]);return s}(e,a);if(Object.getOwnPropertySymbols){var o=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):r(r({},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,o=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]||o;return n?t.createElement(g,r(r({ref:a},i),{},{components:n})):t.createElement(g,r({ref:a},i))}));function g(e,a){var n=arguments,s=a&&a.mdxType;if("string"==typeof e||s){var o=n.length,r=new Array(o);r[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,r[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),o=n(5788),r=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],o=e.data[1];"expoFrameLoaded"===s&&o.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,r.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:"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,o.yg)(N,(0,t.c)({},g,n,{components:a,mdxType:"MDXLayout"}),(0,o.yg)("p",null,"React Native Skia runs in the browser via ",(0,o.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,o.yg)("p",null,"We support direct integration with ",(0,o.yg)("a",{parentName:"p",href:"#expo"},"Expo")," and ",(0,o.yg)("a",{parentName:"p",href:"#remotion"},"Remotion"),".\nAdditionally, you'll find manual installation steps for any webpack projects."),(0,o.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,o.yg)("h2",{id:"expo"},"Expo"),(0,o.yg)("admonition",{type:"info"},(0,o.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,o.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,o.yg)("a",{parentName:"p",href:"https://www.npmjs.com/package/patch-package"},(0,o.yg)("inlineCode",{parentName:"a"},"patch-package")),".")),(0,o.yg)("p",null,"Use the ",(0,o.yg)("inlineCode",{parentName:"p"},"setup-skia-web")," script to ensure that the ",(0,o.yg)("inlineCode",{parentName:"p"},"canvaskit.wasm")," file is accessible within your Expo project's public folder.\nIf you're ",(0,o.yg)("a",{parentName:"p",href:"#using-a-cdn"},"loading CanvasKit from a CDN"),", running the ",(0,o.yg)("inlineCode",{parentName:"p"},"setup-skia-web")," script is unnecessary."),(0,o.yg)("div",{className:"shiki-twoslash-fragment"},(0,o.yg)("pre",{parentName:"div",className:"shiki min-light",style:{backgroundColor:"#ffffff",color:"#24292eff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"bash"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"$ npx expo install @shopify/react-native-skia")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"$ yarn setup-skia-web"))))),(0,o.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"bash"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"$ npx expo install @shopify/react-native-skia")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"$ yarn setup-skia-web")))))),(0,o.yg)("admonition",{type:"info"},(0,o.yg)("p",{parentName:"admonition"},"Run ",(0,o.yg)("inlineCode",{parentName:"p"},"yarn setup-skia-web")," each time you upgrade the ",(0,o.yg)("inlineCode",{parentName:"p"},"@shopify/react-native-skia")," package.\nConsider incorporating it into your ",(0,o.yg)("inlineCode",{parentName:"p"},"postinstall")," script for convenience.")),(0,o.yg)("p",null,"After setup, choose your method to ",(0,o.yg)("a",{parentName:"p",href:"#loading-skia"},"Load Skia"),"."),(0,o.yg)("p",null,"For projects using Expo Router, you can use ",(0,o.yg)("a",{parentName:"p",href:"#using-code-splitting"},"code-splitting")," or ",(0,o.yg)("a",{parentName:"p",href:"#using-deferred-component-registration"},"deferred component registration"),".\nIf you wish to use deferred component registration with Expo Router, you need to create your own ",(0,o.yg)("inlineCode",{parentName:"p"},"main")," property in ",(0,o.yg)("inlineCode",{parentName:"p"},"package.json"),".\nFor instance, if you've created ",(0,o.yg)("inlineCode",{parentName:"p"},"index.tsx")," and ",(0,o.yg)("inlineCode",{parentName:"p"},"index.web.tsx")," in your root directory, update your ",(0,o.yg)("inlineCode",{parentName:"p"},"package.json")," accordingly:"),(0,o.yg)("div",{className:"shiki-twoslash-fragment"},(0,o.yg)("pre",{parentName:"div",className:"shiki min-light",style:{backgroundColor:"#ffffff",color:"#24292eff"}},(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},'- "main": "expo-router/entry",\n+ "main": "index",'))),(0,o.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},'- "main": "expo-router/entry",\n+ "main": "index",')))),(0,o.yg)("p",null,"Below is an example of ",(0,o.yg)("inlineCode",{parentName:"p"},"index.web.tsx"),":"),(0,o.yg)("div",{className:"shiki-twoslash-fragment"},(0,o.yg)("pre",{parentName:"div",className:"shiki min-light",style:{backgroundColor:"#ffffff",color:"#24292eff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"'@expo/metro-runtime'"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { App } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"'expo-router/build/qualified-entry'"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { renderRootComponent } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"'expo-router/build/renderRootComponent'"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { LoadSkiaWeb } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"'@shopify/react-native-skia/lib/module/web'"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"LoadSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".then"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"async"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," () "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"renderRootComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(App);")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"});"))))),(0,o.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"@expo/metro-runtime"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"expo-router/build/qualified-entry"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"renderRootComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"expo-router/build/renderRootComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"LoadSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"@shopify/react-native-skia/lib/module/web"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"LoadSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"then"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"async"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"renderRootComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")))))),(0,o.yg)("p",null,"For the ",(0,o.yg)("inlineCode",{parentName:"p"},"index.tsx")," file, directly invoke ",(0,o.yg)("inlineCode",{parentName:"p"},"renderRootComponent(App)"),"."),(0,o.yg)("h3",{id:"snack"},"Snack"),(0,o.yg)("p",null,"Utilize the ",(0,o.yg)("a",{parentName:"p",href:"#using-code-splitting"},"code-splitting")," method for incorporating React Native Skia on ",(0,o.yg)("a",{parentName:"p",href:"https://snack.expo.dev/"},"snack"),"."),(0,o.yg)(p,{id:"@wcandillon/hello-snack",mdxType:"Snack"}),(0,o.yg)("h2",{id:"remotion"},"Remotion"),(0,o.yg)("p",null,"Follow these ",(0,o.yg)("a",{parentName:"p",href:"https://remotion.dev/skia"},"installation steps")," to use React Native Skia with Remotion."),(0,o.yg)("h2",{id:"loading-skia"},"Loading Skia"),(0,o.yg)("p",null,"Ensure Skia is fully loaded and initialized before importing the Skia module.\nTwo methods facilitate Skia's loading:"),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},(0,o.yg)("inlineCode",{parentName:"li"},"")," for code-splitting, delaying the loading of Skia-importing components."),(0,o.yg)("li",{parentName:"ul"},(0,o.yg)("inlineCode",{parentName:"li"},"LoadSkiaWeb()")," to defer root component registration until Skia loads.")),(0,o.yg)("h3",{id:"using-code-splitting"},"Using Code-Splitting"),(0,o.yg)("p",null,"The ",(0,o.yg)("inlineCode",{parentName:"p"},"")," component utilizes ",(0,o.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,o.yg)("inlineCode",{parentName:"p"},"MySkiaComponent"),":"),(0,o.yg)("div",{className:"shiki-twoslash-fragment"},(0,o.yg)("pre",{parentName:"div",className:"shiki min-light",style:{backgroundColor:"#ffffff",color:"#24292eff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," React "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"'react'"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { Text } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"react-native"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { WithSkiaWeb } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"@shopify/react-native-skia/lib/module/web"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"export"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"default"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"function"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"() {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"return"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," (")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," <"),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"WithSkiaWeb")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#C2C3C5"}},"// import() uses the default export of MySkiaComponent.tsx")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"getComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{() "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"./MySkiaComponent"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},")}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"fallback"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{<"),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"Text"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},">Loading Skia...}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," />")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," );")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"}"))))),(0,o.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"React"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"react"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"Text"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"react-native"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"WithSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"@shopify/react-native-skia/lib/module/web"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"export"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"default"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"function"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"return"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," (")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"<"),(0,o.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"WithSkiaWeb")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#616E88"}},"// import() uses the default export of MySkiaComponent.tsx")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"getComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"./MySkiaComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"fallback"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={<"),(0,o.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"Text"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},">"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"Loading Skia..."),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"/>")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," )"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}")))))),(0,o.yg)("h3",{id:"using-deferred-component-registration"},"Using Deferred Component Registration"),(0,o.yg)("p",null,"The ",(0,o.yg)("inlineCode",{parentName:"p"},"LoadSkiaWeb()")," function facilitates Skia's loading prior to the React app's initiation.\nBelow is an ",(0,o.yg)("inlineCode",{parentName:"p"},"index.web.js")," example:"),(0,o.yg)("div",{className:"shiki-twoslash-fragment"},(0,o.yg)("pre",{parentName:"div",className:"shiki min-light",style:{backgroundColor:"#ffffff",color:"#24292eff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { LoadSkiaWeb } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"@shopify/react-native-skia/lib/module/web"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"LoadSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".then"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"async"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," () "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"const"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," ("),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"await"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"./src/App"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},")).default;")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"AppRegistry"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".registerComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"Example"'),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," () "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," App);")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"});"))))),(0,o.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"LoadSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"@shopify/react-native-skia/lib/module/web"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"LoadSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"then"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"async"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"const"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," ("),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"await"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"./src/App"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"))"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"default"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"AppRegistry"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"registerComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"Example"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},","),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")))))),(0,o.yg)("h2",{id:"using-a-cdn"},"Using a CDN"),(0,o.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,o.yg)("div",{className:"shiki-twoslash-fragment"},(0,o.yg)("pre",{parentName:"div",className:"shiki min-light",style:{backgroundColor:"#ffffff",color:"#24292eff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { WithSkiaWeb } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"@shopify/react-native-skia/lib/module/web"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { version } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"'canvaskit-wasm/package.json'"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"export"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"default"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"function"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"() {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"return"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," (")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," <"),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"WithSkiaWeb")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"opts"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{{ "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"locateFile"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," (file) "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"`https://cdn.jsdelivr.net/npm/canvaskit-wasm@"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"${"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"version"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"/bin/full/"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"${"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"file"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"`"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," }}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"getComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"{() "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"./MySkiaComponent"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},")}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," );")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"}"))))),(0,o.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"WithSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"@shopify/react-native-skia/lib/module/web"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"version"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"canvaskit-wasm/package.json"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"export"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"default"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"function"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"return"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," (")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"<"),(0,o.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"WithSkiaWeb")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"opts"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"locateFile"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"file"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"`"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"https://cdn.jsdelivr.net/npm/canvaskit-wasm@"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"${"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"version"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"/bin/full/"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"${"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"file"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}`"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"getComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"={"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"./MySkiaComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},");")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"}")))))),(0,o.yg)("p",null,"Alternatively, use deferred component registration:"),(0,o.yg)("div",{className:"shiki-twoslash-fragment"},(0,o.yg)("pre",{parentName:"div",className:"shiki min-light",style:{backgroundColor:"#ffffff",color:"#24292eff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { LoadSkiaWeb } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"@shopify/react-native-skia/lib/module/web"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { version } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"'canvaskit-wasm/package.json'"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"LoadSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"({")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"locateFile"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," (file) "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"`https://cdn.jsdelivr.net/npm/canvaskit-wasm@"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"${"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"version"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"/bin/full/"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"${"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"file"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},"`")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"})"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".then"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"async"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," () "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"const"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," ("),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"await"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"./src/App"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},")).default;")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"AppRegistry"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".registerComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"Example"'),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," () "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," App);")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"});"))))),(0,o.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"LoadSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"@shopify/react-native-skia/lib/module/web"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"version"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"canvaskit-wasm/package.json"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"'"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"LoadSkiaWeb"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"locateFile"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"file"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"`"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"https://cdn.jsdelivr.net/npm/canvaskit-wasm@"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"${"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"version"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"/bin/full/"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"${"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"file"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}`")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"then"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"async"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"const"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," ("),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"await"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"./src/App"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"))"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"default"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"AppRegistry"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"registerComponent"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"Example"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},","),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"App"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")))))),(0,o.yg)("h2",{id:"unsupported-features"},"Unsupported Features"),(0,o.yg)("p",null,"The following React Native Skia APIs are currently unsupported on React Native Web.\nTo request these features, please submit ",(0,o.yg)("a",{parentName:"p",href:"https://github.com/Shopify/react-native-skia/issues/new/choose"},"a feature request on GitHub"),"."),(0,o.yg)("p",null,(0,o.yg)("strong",{parentName:"p"},"Unsupported")),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},(0,o.yg)("inlineCode",{parentName:"li"},"PathEffectFactory.MakeSum()")),(0,o.yg)("li",{parentName:"ul"},(0,o.yg)("inlineCode",{parentName:"li"},"PathEffectFactory.MakeCompose()")),(0,o.yg)("li",{parentName:"ul"},(0,o.yg)("inlineCode",{parentName:"li"},"PathFactory.MakeFromText()")),(0,o.yg)("li",{parentName:"ul"},(0,o.yg)("inlineCode",{parentName:"li"},"ShaderFilter"))),(0,o.yg)("p",null,(0,o.yg)("strong",{parentName:"p"},"Unplanned")),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},(0,o.yg)("inlineCode",{parentName:"li"},"ImageSvg"))),(0,o.yg)("h2",{id:"manual-webpack-installation"},"Manual webpack Installation"),(0,o.yg)("p",null,"To enable React Native Skia on Web using webpack, three key actions are required:"),(0,o.yg)("ul",null,(0,o.yg)("li",{parentName:"ul"},"Ensure the ",(0,o.yg)("inlineCode",{parentName:"li"},"canvaskit.wasm")," file is accessible to the build system."),(0,o.yg)("li",{parentName:"ul"},"Configure the build system to resolve the ",(0,o.yg)("inlineCode",{parentName:"li"},"fs")," and ",(0,o.yg)("inlineCode",{parentName:"li"},"path")," node modules, achievable via the ",(0,o.yg)("a",{parentName:"li",href:"https://www.npmjs.com/package/node-polyfill-webpack-plugin"},"node polyfill plugin"),"."),(0,o.yg)("li",{parentName:"ul"},"Update aliases for ",(0,o.yg)("inlineCode",{parentName:"li"},"react-native-reanimated")," and ",(0,o.yg)("inlineCode",{parentName:"li"},"react-native/Libraries/Image/AssetRegistry")," so webpack can do the bundle.")),(0,o.yg)("p",null,"Here is an example webpack v5 configuration accommodating React Native Skia:"),(0,o.yg)("div",{className:"shiki-twoslash-fragment"},(0,o.yg)("pre",{parentName:"div",className:"shiki min-light",style:{backgroundColor:"#ffffff",color:"#24292eff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," fs "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"fs"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," { sources } "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"webpack"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," NodePolyfillPlugin "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"node-polyfill-webpack-plugin"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"const"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"newConfiguration"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"..."),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"currentConfiguration"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," plugins"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," [")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"..."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"currentConfiguration"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},".plugins"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#C2C3C5"}},"// 1. Ensure wasm file availability")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"new"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," ("),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"class"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"CopySkiaPlugin"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"apply"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(compiler) {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"compiler"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"hooks"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"thisCompilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".tap"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"AddSkiaPlugin"'),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," (compilation) "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"compilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"hooks"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"processAssets"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".tapPromise"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," name"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"copy-skia"'),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," stage"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"compiler"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"webpack"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"Compilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"PROCESS_ASSETS_STAGE_ADDITIONAL"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," }"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"async"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," () "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"const"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"src"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"require"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".resolve"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"canvaskit-wasm/bin/full/canvaskit.wasm"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},");")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"if"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," ("),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"!"),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"compilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".getAsset"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(src)) {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"compilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".emitAsset"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"/canvaskit.wasm"'),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},","),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"new"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"sources"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".RawSource"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"await"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"fs"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"promises"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".readFile"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(src)));")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," }")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," }")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," );")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," });")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," }")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," })()"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#C2C3C5"}},"// 2. Polyfill fs and path modules")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"new"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},"NodePolyfillPlugin"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"()")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," ]"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," alias"),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," {")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},"..."),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"currentConfiguration"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},".alias"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#C2C3C5"}},"// 3. Suppress reanimated module warning")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#C2C3C5"}},"// This assumes Reanimated is installed, if not you can use false.")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"react-native-reanimated/package.json"'),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"require"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".resolve"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"(")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"react-native-reanimated/package.json"')),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," )"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"react-native-reanimated"'),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"require"),(0,o.yg)("span",{parentName:"div",style:{color:"#6F42C1"}},".resolve"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"react-native-reanimated"'),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#22863A"}},'"react-native/Libraries/Image/AssetRegistry"'),(0,o.yg)("span",{parentName:"div",style:{color:"#D32F2F"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#1976D2"}},"false"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}}," }"),(0,o.yg)("span",{parentName:"div",style:{color:"#212121"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#24292EFF"}},"}"))))),(0,o.yg)("pre",{parentName:"div",className:"shiki nord",style:{backgroundColor:"#2e3440ff",color:"#d8dee9ff"}},(0,o.yg)("div",{parentName:"pre",className:"language-id"},"tsx"),(0,o.yg)("div",{parentName:"pre",className:"code-container"},(0,o.yg)("code",{parentName:"div"},(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"fs"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"fs"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"sources"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"webpack"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"import"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"NodePolyfillPlugin"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"from"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"node-polyfill-webpack-plugin"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"const"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"newConfiguration"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"..."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"currentConfiguration"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"plugins"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," [")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"..."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"currentConfiguration"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"plugins"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#616E88"}},"// 1. Ensure wasm file availability")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"new"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," ("),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"class"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#8FBCBB"}},"CopySkiaPlugin"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"apply"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"compiler"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"compiler"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"hooks"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"thisCompilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"tap"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"AddSkiaPlugin"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},","),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"compilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"compilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"hooks"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"processAssets"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"tapPromise"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"(")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"name"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"copy-skia"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"stage"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"compiler"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"webpack"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"Compilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"PROCESS_ASSETS_STAGE_ADDITIONAL"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"},")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"async"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"()"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"=>"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"const"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"src"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"="),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"require"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"resolve"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"canvaskit-wasm/bin/full/canvaskit.wasm"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"if"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," ("),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"!"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"compilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"getAsset"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"src"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")) "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"compilation"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"emitAsset"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"/canvaskit.wasm"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},","),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"new"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"sources"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"RawSource"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"await"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"fs"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"promises"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"readFile"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"src"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")))"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," )"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},";")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")()"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#616E88"}},"// 2. Polyfill fs and path modules")),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"}),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"new"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"NodePolyfillPlugin"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"()")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," ]"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"alias"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"{")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"..."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"currentConfiguration"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"alias"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#616E88"}},"// 3. Suppress reanimated module warning")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#616E88"}},"// This assumes Reanimated is installed, if not you can use false.")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"react-native-reanimated/package.json"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"require"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"resolve"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"(")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"react-native-reanimated/package.json"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"')),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," )"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"react-native-reanimated"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9"}},"require"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"."),(0,o.yg)("span",{parentName:"div",style:{color:"#88C0D0"}},"resolve"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},"("),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"react-native-reanimated"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}},")"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#A3BE8C"}},"react-native/Libraries/Image/AssetRegistry"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},'"'),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},":"),(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#81A1C1"}},"false"),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},",")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#D8DEE9FF"}}," "),(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"},")),(0,o.yg)("div",{parentName:"code",className:"line"},(0,o.yg)("span",{parentName:"div",style:{color:"#ECEFF4"}},"}")))))),(0,o.yg)("p",null,"Finally, proceed to ",(0,o.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.0b9e0624.js b/assets/js/runtime~main.fd812312.js similarity index 98% rename from assets/js/runtime~main.0b9e0624.js rename to assets/js/runtime~main.fd812312.js index 66a8b798ca..ca4074ab26 100644 --- a/assets/js/runtime~main.0b9e0624.js +++ b/assets/js/runtime~main.fd812312.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",652:"03495749",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:"11df961f",336:"2d96ace2",568:"5413a38e",572:"07df1cc3",632:"f1478fdd",652:"90a8d883",784:"84b26adc",1052:"affdef5e",1184:"2f6d6844",1484:"55f1d698",1676:"5ac4a266",1920:"c2f50220",2152:"b6af9506",2279:"96181acb",2428:"b1d63a75",2528:"e7e83c77",2828:"fa1aa92b",2920:"7fe27696",3328:"9912d481",3656:"f56e548c",3812:"52d37840",4038:"2beaeecb",4057:"753c69e3",4314:"b52550e8",4368:"fedcfe4b",4412:"fc5b2acc",4820:"74fa587d",5200:"1472e27e",5436:"aebf4858",5480:"7819fb7b",5676:"447efe0c",5696:"c825b1fa",5776:"05e9701c",5788:"0297b03b",5820:"e78c0e05",5832:"b272f8e5",5852:"c3025125",5984:"730e4a14",6216:"7a74c4da",6264:"13ee0a23",6616:"9fff5963",6720:"1c6cfe9d",6752:"c6f61a5f",6912:"fe387eb7",6972:"0a972f1f",7044:"7e78e243",7204:"803d3561",7624:"0803baa3",8076:"167d6ac4",8336:"8aa10fe4",8552:"85b6aeae",8648:"41d8dc6e",8680:"81f6b5d7",8761:"6dbd9a4c",8879:"827915ee",9290:"d3f8100d",9380:"de660e39",9392:"6e86691e",9648:"f13d52da",9656:"a24f2068",9738:"bc4bacc9",9772:"6414f9a6",9852:"e8bc7dfd"}[e]+".js",d.miniCssF=e=>{},d.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),d.o=(e,f)=>Object.prototype.hasOwnProperty.call(e,f),c={},t="docs:",d.l=(e,f,a,r)=>{if(c[e])c[e].push(f);else{var b,o;if(void 0!==a)for(var n=document.getElementsByTagName("script"),i=0;i{b.onerror=b.onload=null,clearTimeout(s);var t=c[e];if(delete c[e],b.parentNode&&b.parentNode.removeChild(b),t&&t.forEach((e=>e(a))),f)return f(a)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:b}),12e4);b.onerror=l.bind(null,b.onerror),b.onload=l.bind(null,b.onload),o&&document.head.appendChild(b)}},d.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.p="/react-native-skia/",d.gca=function(e){return e={17896441:"6752",86213437:"3328",b5fb04c4:"112",b180cb59:"336",c41113e6:"568","1fd95965":"572","746c3835":"632","03495749":"652","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",652:"03495749",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:"11df961f",336:"2d96ace2",568:"5413a38e",572:"07df1cc3",632:"f1478fdd",652:"90a8d883",784:"84b26adc",1052:"affdef5e",1184:"2f6d6844",1484:"55f1d698",1676:"5ac4a266",1920:"c2f50220",2152:"b6af9506",2279:"96181acb",2428:"b1d63a75",2528:"e7e83c77",2828:"fa1aa92b",2920:"7fe27696",3328:"9912d481",3656:"f56e548c",3812:"52d37840",4038:"2beaeecb",4057:"753c69e3",4314:"b52550e8",4368:"fedcfe4b",4412:"fc5b2acc",4820:"74fa587d",5200:"1472e27e",5436:"aebf4858",5480:"7819fb7b",5676:"447efe0c",5696:"c825b1fa",5776:"05e9701c",5788:"0297b03b",5820:"e78c0e05",5832:"b272f8e5",5852:"c3025125",5984:"730e4a14",6216:"7a74c4da",6264:"13ee0a23",6616:"9fff5963",6720:"1c6cfe9d",6752:"c6f61a5f",6912:"fe387eb7",6972:"0a972f1f",7044:"7e78e243",7204:"803d3561",7624:"0803baa3",8076:"167d6ac4",8336:"8aa10fe4",8552:"85b6aeae",8648:"41d8dc6e",8680:"81f6b5d7",8761:"6dbd9a4c",8879:"827915ee",9290:"d3f8100d",9380:"de660e39",9392:"6e86691e",9648:"f13d52da",9656:"a24f2068",9738:"bc4bacc9",9772:"6414f9a6",9852:"bf487d96"}[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","03495749":"652","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 - + @@ -62,7 +62,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 26150550a1..18d8749955 100644 --- a/docs/animations/animations/index.html +++ b/docs/animations/animations/index.html @@ -4,7 +4,7 @@ Animations | React Native Skia - + @@ -105,7 +105,7 @@ import vec">vec(width, height)}
colors={gradientColors}
/>
</Fill>
</Canvas>
);
};
- + \ No newline at end of file diff --git a/docs/animations/gestures/index.html b/docs/animations/gestures/index.html index 9792092dcb..47f168e250 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 824a8e138b..6a0127830b 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 c36e3b198f..ec07a72a39 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 ce83d31d4a..c9d8bb6b78 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 6cf8ac88a9..98e3d05a1e 100644 --- a/docs/backdrops-filters/index.html +++ b/docs/backdrops-filters/index.html @@ -4,7 +4,7 @@ Backdrop Filters | React Native Skia - + @@ -60,7 +60,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 b2d2a9b9f5..91bed47f3d 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 ff1b35d460..95ef812a3d 100644 --- a/docs/canvas/overview/index.html +++ b/docs/canvas/overview/index.html @@ -4,7 +4,7 @@ Canvas | React Native Skia - + @@ -33,7 +33,7 @@ import Canvas">Canvas>
);
};

Accessibilty​

The Canvas component supports the same properties as a View component including its accessibility properties. You can make elements inside the canvas accessible as well by overlayings views on top of your canvas. This is the same recipe used for applying gestures on specific canvas elements.

- + \ No newline at end of file diff --git a/docs/color-filters/index.html b/docs/color-filters/index.html index aa2cf07199..5f8ef98d86 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 6033f5eaa9..87e036541a 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 c79cc9ba12..69051265c5 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, getSkiaExports } from "@shopify/react-native-skia/lib/commonjs/headless";
(async () => {
  const width = 256;
  const height = 256;
  const r = size * 0.33;
  await LoadSkiaWeb();
  // Once that CanvasKit is loaded, you can access Skia via getSkiaExports()
  // Alternatively you can do const {Skia} = require("@shopify/react-native-skia")
  const {Skia} = getSkiaExports();
  const surface = makeOffscreenSurface(width, height);
  const image = drawOffscreen(surface,
    <Group blendMode="multiply">
      <Circle cx={r} cy={r} r={r} color="cyan" />
      <Circle cx={size - r} cy={r} r={r} color="magenta" />
      <Circle
        cx={size/2}
        cy={size - r}
        r={r}
        color="yellow"
      />
    </Group>);
  console.log(image.encodeToBase64());
  // Cleaning up CanvasKit resources
  image.dispose();
  surface.dispose();
})();
tsx
import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/commonjs/web/LoadSkiaWeb";
import { Fill, makeOffscreenSurface, drawOffscreen, getSkiaExports } from "@shopify/react-native-skia/lib/commonjs/headless";
(async () => {
  const width = 256;
  const height = 256;
  const r = size * 0.33;
  await LoadSkiaWeb();
  // Once that CanvasKit is loaded, you can access Skia via getSkiaExports()
  // Alternatively you can do const {Skia} = require("@shopify/react-native-skia")
  const {Skia} = getSkiaExports();
  const surface = makeOffscreenSurface(width, height);
  const image = drawOffscreen(surface,
    <Group blendMode="multiply">
      <Circle cx={r} cy={r} r={r} color="cyan" />
      <Circle cx={size - r} cy={r} r={r} color="magenta" />
      <Circle
        cx={size/2}
        cy={size - r}
        r={r}
        color="yellow"
      />
    </Group>);
  console.log(image.encodeToBase64());
  // Cleaning up CanvasKit resources
  image.dispose();
  surface.dispose();
})();

GPU Acceleration​

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

- + \ No newline at end of file diff --git a/docs/getting-started/hello-world/index.html b/docs/getting-started/hello-world/index.html index cef5883aa5..a568d40289 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 f9750e77f8..6bbd56f57a 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 ca29326e0a..ce2ff27a43 100644 --- a/docs/getting-started/web/index.html +++ b/docs/getting-started/web/index.html @@ -4,7 +4,7 @@ Web Support | React Native Skia - + @@ -21,11 +21,12 @@ + "main": "index",
-  "main": "expo-router/entry",
 +  "main": "index",

Below is an example of index.web.tsx:

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 index.tsx 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. Two methods facilitate Skia's loading:

  • <WithSkiaWeb /> for code-splitting, delaying the loading of Skia-importing components.
  • LoadSkiaWeb() to defer root component registration until Skia loads.

Using Code-Splitting​

The <WithSkiaWeb> component utilizes code splitting to preload Skia. -The following example demonstrates preloading Skia before rendering the MySkiaComponent:

tsx
import React from 'react';
import { Text } from "react-native";
import { WithSkiaWeb } from "@shopify/react-native-skia/lib/module/web";
export default function App() {
  return (
    <WithSkiaWeb
      // import() uses the default export of MySkiaComponent.tsx
      getComponent={() => import("./MySkiaComponent")}
      fallback={<Text>Loading Skia...</Text>}
    />
  );
}
tsx
import React from 'react';
import { Text } from "react-native";
import { WithSkiaWeb } from "@shopify/react-native-skia/lib/module/web";
export default function App() {
  return (
    <WithSkiaWeb
      // import() uses the default export of MySkiaComponent.tsx
      getComponent={() => import("./MySkiaComponent")}
      fallback={<Text>Loading Skia...</Text>}
    />
  );
}

Using Deferred Component Registration​

The LoadSkiaWeb() function facilitates Skia's loading prior to the React app's initiation. +The following example demonstrates preloading Skia before rendering the MySkiaComponent:

tsx
import React from 'react';
import { Text } from "react-native";
import { WithSkiaWeb } from "@shopify/react-native-skia/lib/module/web";
export default function App() {
  return (
    <WithSkiaWeb
      // import() uses the default export of MySkiaComponent.tsx
      getComponent={() => import("@/components/MySkiaComponent")}
      fallback={<Text>Loading Skia...</Text>}
    />
  );
}
tsx
import React from 'react';
import { Text } from "react-native";
import { WithSkiaWeb } from "@shopify/react-native-skia/lib/module/web";
export default function App() {
  return (
    <WithSkiaWeb
      // import() uses the default export of MySkiaComponent.tsx
      getComponent={() => import("@/components/MySkiaComponent")}
      fallback={<Text>Loading Skia...</Text>}
    />
  );
}
info

When using expo router in dev mode you cannot load components that are inside the app directory, as they will get evaluated by the router before CanvasKit is loaded. +Make sure the component to load lies outside the 'app' directory.

Using Deferred Component Registration​

The LoadSkiaWeb() function facilitates Skia's loading prior to the React app's initiation. Below is an index.web.js example:

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

Using a CDN​

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

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

Alternatively, use deferred component registration:

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

Unsupported Features​

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

Unsupported

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

Unplanned

  • ImageSvg

Manual webpack Installation​

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

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

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

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

Finally, proceed to load Skia.

- +To request these features, please submit a feature request on GitHub.

Unsupported

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

Manual webpack Installation​

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

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

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

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

Finally, proceed to load Skia.

+ \ No newline at end of file diff --git a/docs/group/index.html b/docs/group/index.html index ed58c96ac4..4ded845515 100644 --- a/docs/group/index.html +++ b/docs/group/index.html @@ -4,7 +4,7 @@ Group | React Native Skia - + @@ -244,7 +244,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 48eda85b5b..e75c6a76e7 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 451a8e6748..bbe495bc0a 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 8c3bc04704..137081f7d8 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 550a0c923d..eda3cab9a0 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 f7270972a7..4f5612682e 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 c6bede1d73..f0a9f6b976 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 f384b1e7bc..35ecb7b5d3 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 9de07dae2c..e7ebcb0905 100644 --- a/docs/images-svg/index.html +++ b/docs/images-svg/index.html @@ -4,7 +4,7 @@ SVG Images | React Native Skia - + @@ -184,7 +184,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 18e1b14213..033448b552 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 9de7e3630f..c4abda386e 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 6c2a32964d..164741c265 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 db8b601aeb..5bdf573566 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 564fbd763e..147f8c6722 100644 --- a/docs/paint/properties/index.html +++ b/docs/paint/properties/index.html @@ -4,7 +4,7 @@ Painting Properties | React Native Skia - + @@ -75,7 +75,7 @@ softLight, difference, exclusion, multiply, hue, saturation, color, luminosity.

style​

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

strokeWidth​

Thickness of the pen used to outline the shape.

strokeJoin​

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

strokeCap​

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

strokeMiter​

Limit at which a sharp corner is drawn beveled.

antiAlias​

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

dither​

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

- + \ No newline at end of file diff --git a/docs/path-effects/index.html b/docs/path-effects/index.html index 77e0760f79..b27dd775d5 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 3561d8b1d6..fdbf7d0bc0 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 8f4c36f619..8bc70c8686 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 9acaa99c2b..6e91d7b0b7 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 263c45de2c..8dbd2ad1b5 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 7c0484651c..56968c302a 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 a766de54f2..68a56311fc 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 6f5c06e28a..aa6403d4b4 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 210b5d13d4..2664ca6687 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 9aed7ab5db..3dea122ff3 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 3ed1e770e1..aa4e3b2484 100644 --- a/docs/shapes/path/index.html +++ b/docs/shapes/path/index.html @@ -4,7 +4,7 @@ Path | React Native Skia - + @@ -65,7 +65,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 8632d2bae7..b11560fc19 100644 --- a/docs/shapes/pictures/index.html +++ b/docs/shapes/pictures/index.html @@ -4,7 +4,7 @@ Pictures | React Native Skia - + @@ -140,7 +140,7 @@ import Picture">Picture picture={copyOfPicture} />}
</Group>
</Canvas>
);
};

Instance Methods​

NameDescription
makeShaderReturns a new shader that will draw with this picture.
serializeReturns a UInt8Array representing the drawing operations stored in the image.
- + \ No newline at end of file diff --git a/docs/shapes/polygons/index.html b/docs/shapes/polygons/index.html index 33d4391d58..9378ea51fd 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 34d49acf33..412eb2fa7f 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 000fec4f99..73d571ca3c 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 84e09e5e1b..286bd7a213 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 9bb7027d69..71a11c1b02 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 ee035b5efd..942bbf1f08 100644 --- a/docs/text/paragraph/index.html +++ b/docs/text/paragraph/index.html @@ -4,7 +4,7 @@ Paragraph | React Native Skia - + @@ -346,7 +346,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 7f0179e58d..23f91a1c38 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 49be079796..7fcc067985 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 1159ff2fef..d81b476261 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/docs/video/index.html b/docs/video/index.html index 528c65c9a6..f08a2a543e 100644 --- a/docs/video/index.html +++ b/docs/video/index.html @@ -4,7 +4,7 @@ Video | React Native Skia - + @@ -316,7 +316,7 @@ }; } import useVideo">useVideo(assets ? assets[0].localUri : null, options);
};

Video Encoding​

To encode videos from Skia images, you can use ffmpeg or also look into react-native-skia-video.

- + \ No newline at end of file diff --git a/index.html b/index.html index 44ed8e4fc5..89238a9d55 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 c86b3924e4..e6a66113f4 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