Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 69 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` |

---

Expand All @@ -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 = {
Expand All @@ -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');
Expand Down
2 changes: 1 addition & 1 deletion example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": [
Expand Down
14 changes: 7 additions & 7 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -10773,7 +10773,7 @@ __metadata:
"@react-native/metro-config": "*"
react: "*"
react-native: "*"
checksum: 10c0/9f04abb94bb88687aa225381d6239eddad80f0ce95279e87956b159b3be35c05dbba7114b1f790f5028bf054dda2bcad5484fe460e664bd50690fae6880f69db
checksum: 10c0/e349a12dd7a86d29fec605cff83bab5a949d503988dc1c0eb2bcfbb2ce720afe8e2a5e1652225963b576255d85d7cdc7d46ff32507719005f28c7b45d0bb7c0c
languageName: node
linkType: hard

Expand Down
Loading