diff --git a/docs/docs/getting-started/web.mdx b/docs/docs/getting-started/web.mdx index d2e7769ff6..0b94e1b88f 100644 --- a/docs/docs/getting-started/web.mdx +++ b/docs/docs/getting-started/web.mdx @@ -37,24 +37,21 @@ $ yarn setup-skia-web Run `yarn setup-skia-web` each time you upgrade the `@shopify/react-native-skia` package. Consider incorporating it into your `postinstall` script for convenience. +``` ::: After setup, choose your method to [Load Skia](#loading-skia). -### Expo Router - For projects using Expo Router, you can use [code-splitting](#using-code-splitting) or [deferred component registration](#using-deferred-component-registration). -If you wish to use deferred component registration with Expo Router, create a new entry script and reference it in your `package.json`. For instance, if you've created `index.js` and `index.web.js` in the `src/` directory, update your `package.json` accordingly: -```js -// package.json -{ - "main": "src/index", - //... -} +If you wish to use deferred component registration with Expo Router, you need to create your own `main` property in `package.json`. +For instance, if you've created `index.tsx` and `index.web.tsx` in your root directory, update your `package.json` accordingly: +```patch +- "main": "expo-router/entry", ++ "main": "index", ``` -Below is an example of `src/index.web.js`: +Below is an example of `index.web.tsx`: ```tsx import '@expo/metro-runtime'; @@ -68,7 +65,7 @@ LoadSkiaWeb().then(async () => { }); ``` -For the `src/index.js` file, directly invoke `renderRootComponent(App)`. +For the `index.tsx` file, directly invoke `renderRootComponent(App)`. ### Snack @@ -171,15 +168,15 @@ To request these features, please submit [a feature request on GitHub](https://g * `ImageSvg` -## Manual Webpack Installation +## Manual webpack Installation -To enable React Native Skia on Web using Webpack, three key actions are required: +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](https://www.npmjs.com/package/node-polyfill-webpack-plugin). -- Address Webpack's warning about the absent `react-native-reanimated` module, as React Native Skia references it. +- 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: +Here is an example webpack v5 configuration accommodating React Native Skia: ```tsx import fs from "fs"; @@ -214,11 +211,15 @@ const newConfiguration = { new NodePolyfillPlugin() ], - externals: { - ...currentConfiguration.externals, + alias: { + ...currentConfiguration.alias, // 3. Suppress reanimated module warning - "react-native-reanimated": "require('react-native-reanimated')", - "react-native-reanimated/package.json": "require('react-native-reanimated/package.json')", + // 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, }, } ``` diff --git a/example/webpack.config.js b/example/webpack.config.js index 16eb5eeb22..4f0265cb6c 100644 --- a/example/webpack.config.js +++ b/example/webpack.config.js @@ -89,6 +89,7 @@ module.exports = { "react-native-reanimated/package.json" ), "react-native-reanimated": require.resolve("react-native-reanimated"), + "react-native/Libraries/Image/AssetRegistry": false, }, }, module: { diff --git a/package/src/external/reanimated/buffers.ts b/package/src/external/reanimated/buffers.ts index d0a53c5bb5..7d68b02ca0 100644 --- a/package/src/external/reanimated/buffers.ts +++ b/package/src/external/reanimated/buffers.ts @@ -1,11 +1,10 @@ import { useEffect, useMemo } from "react"; -import { startMapper, stopMapper } from "react-native-reanimated"; import type { WorkletFunction } from "react-native-reanimated/lib/typescript/reanimated2/commonTypes"; import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types"; import { Skia } from "../../skia"; -import { useSharedValue } from "./moduleWrapper"; +import { startMapper, stopMapper, useSharedValue } from "./moduleWrapper"; import { notifyChange } from "./interpolators"; type Modifier = (input: T, index: number) => void;