From 9070669cdfb2e650f6e5fe5217c9cc983f2cd849 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20=C5=BBelawski?= Date: Wed, 18 Mar 2026 07:45:24 +0100 Subject: [PATCH] chore: update readme and bump worklets --- README.md | 75 ++++++++++++++++++++++++++++++++++++++++---- example/package.json | 2 +- package.json | 4 +-- yarn.lock | 14 ++++----- 4 files changed, 79 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 29c965e..3569ee8 100644 --- a/README.md +++ b/README.md @@ -28,11 +28,11 @@ yarn add react-native-streamdown yarn add react-native-enriched-markdown react-native-worklets remend ``` -| Package | Version | -| -------------------------------- | ----------------------------- | -| `react-native-enriched-markdown` | `0.4.0` | -| `react-native-worklets` | `0.8.0-bundle-mode-preview-2` | -| `remend` | `1.2.2` | +| Package | Version | +| -------------------------------- | ------------ | +| `react-native-enriched-markdown` | `0.4.0` | +| `react-native-worklets` | `0.8.0-rc.0` | +| `remend` | `1.2.2` | --- @@ -42,7 +42,31 @@ yarn add react-native-enriched-markdown react-native-worklets remend ### 1. `babel.config.js` — configure Worklets Babel plugin -`react-native-streamdown` requires special options to be added to the Worklets Babel plugin config in `babel.config.js`: +`react-native-streamdown` requires special options to be added to the Worklets Babel plugin config in `babel.config.js`, namely `bundleMode: true` and `workletizableModules: ['remend']`. Your final config could look like this: + +#### Expo + +```js +module.exports = function (api) { + api.cache(true); + + return { + presets: ['babel-preset-expo'], + plugins: [ + [ + 'react-native-worklets/plugin', + { + bundleMode: true, + // other options... + workletizableModules: ['remend'], // add this line + }, + ], + ], + }; +}; +``` + +#### React Native CLI ```js const workletsPluginOptions = { @@ -58,6 +82,45 @@ const workletsPluginOptions = { `react-native-worklets` Bundle Mode generates files on the fly that might not be tracked by Metro in some monorepo setups. It might also shadow your resolving function. If you're running into issues with module resolution, you need to add the following to your `metro.config.js`: +#### Expo + +```js +const { getDefaultConfig } = require('expo/metro-config'); +const { + getBundleModeMetroConfig, +} = require('react-native-worklets/bundleMode'); + +let config = getDefaultConfig(__dirname); + +// Watch the .worklets/ output directory +config.watchFolders.push( + require('path').resolve( + __dirname, + 'node_modules/react-native-worklets/.worklets' + ) +); + +// Resolve react-native-worklets/.worklets/* via the Bundle Mode resolver +const defaultResolver = config.resolver.resolveRequest; + +config = getBundleModeMetroConfig(config); + +config.resolver.resolveRequest = (context, moduleName, platform) => { + if (moduleName.startsWith('react-native-worklets/.worklets/')) { + return bundleModeMetroConfig.resolver.resolveRequest( + context, + moduleName, + platform + ); + } + return defaultResolver(context, moduleName, platform); +}; + +module.exports = config; +``` + +#### React Native CLI + ```js const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config'); const { bundleModeMetroConfig } = require('react-native-worklets/bundleMode'); diff --git a/example/package.json b/example/package.json index 3ff1504..c5ac384 100644 --- a/example/package.json +++ b/example/package.json @@ -15,7 +15,7 @@ "react-native-enriched-markdown": "0.4.0", "react-native-safe-area-context": "^5.7.0", "react-native-streamdown": "*", - "react-native-worklets": "0.8.0-bundle-mode-preview-2", + "react-native-worklets": "0.8.0-rc.0", "remend": "1.2.2" }, "devDependencies": { diff --git a/package.json b/package.json index 8f854bf..2fd803e 100644 --- a/package.json +++ b/package.json @@ -81,7 +81,7 @@ "react-native-builder-bob": "^0.40.18", "react-native-enriched-markdown": "0.4.0", "react-native-sse": "1.2.1", - "react-native-worklets": "0.8.0-bundle-mode-preview-2", + "react-native-worklets": "0.8.0-rc.0", "release-it": "^19.0.4", "remend": "1.2.2", "turbo": "^2.5.6", @@ -91,7 +91,7 @@ "react": "*", "react-native": "*", "react-native-enriched-markdown": "0.4.0", - "react-native-worklets": "0.8.0-bundle-mode-preview-2", + "react-native-worklets": "0.8.0-rc.0", "remend": "1.2.2" }, "workspaces": [ diff --git a/yarn.lock b/yarn.lock index 9dfdb79..f64af4d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10707,7 +10707,7 @@ __metadata: react-native-monorepo-config: "npm:^0.3.3" react-native-safe-area-context: "npm:^5.7.0" react-native-streamdown: "npm:*" - react-native-worklets: "npm:0.8.0-bundle-mode-preview-2" + react-native-worklets: "npm:0.8.0-rc.0" remend: "npm:1.2.2" languageName: unknown linkType: soft @@ -10738,7 +10738,7 @@ __metadata: react-native-builder-bob: "npm:^0.40.18" react-native-enriched-markdown: "npm:0.4.0" react-native-sse: "npm:1.2.1" - react-native-worklets: "npm:0.8.0-bundle-mode-preview-2" + react-native-worklets: "npm:0.8.0-rc.0" release-it: "npm:^19.0.4" remend: "npm:1.2.2" turbo: "npm:^2.5.6" @@ -10747,14 +10747,14 @@ __metadata: react: "*" react-native: "*" react-native-enriched-markdown: 0.4.0 - react-native-worklets: 0.8.0-bundle-mode-preview-2 + react-native-worklets: 0.8.0-rc.0 remend: 1.2.2 languageName: unknown linkType: soft -"react-native-worklets@npm:0.8.0-bundle-mode-preview-2": - version: 0.8.0-bundle-mode-preview-2 - resolution: "react-native-worklets@npm:0.8.0-bundle-mode-preview-2" +"react-native-worklets@npm:0.8.0-rc.0": + version: 0.8.0-rc.0 + resolution: "react-native-worklets@npm:0.8.0-rc.0" dependencies: "@babel/plugin-transform-arrow-functions": "npm:7.27.1" "@babel/plugin-transform-class-properties": "npm:7.27.1" @@ -10773,7 +10773,7 @@ __metadata: "@react-native/metro-config": "*" react: "*" react-native: "*" - checksum: 10c0/9f04abb94bb88687aa225381d6239eddad80f0ce95279e87956b159b3be35c05dbba7114b1f790f5028bf054dda2bcad5484fe460e664bd50690fae6880f69db + checksum: 10c0/e349a12dd7a86d29fec605cff83bab5a949d503988dc1c0eb2bcfbb2ce720afe8e2a5e1652225963b576255d85d7cdc7d46ff32507719005f28c7b45d0bb7c0c languageName: node linkType: hard