{"_id":"@0xbanky/react-native-streamdown","name":"@0xbanky/react-native-streamdown","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@0xbanky/react-native-streamdown","version":"0.2.0","description":"Streaming-ready Markdown for React Native, with GFM support (fork of react-native-streamdown)","main":"./lib/module/index.js","types":"./lib/typescript/src/index.d.ts","exports":{".":{"source":"./src/index.tsx","types":"./lib/typescript/src/index.d.ts","default":"./lib/module/index.js"},"./package.json":"./package.json"},"scripts":{"example":"yarn workspace react-native-streamdown-example","clean":"del-cli lib","prepare":"bob build","typecheck":"tsc","lint":"eslint \"**/*.{js,ts,tsx}\"","test":"jest","release":"release-it --only-version"},"keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+https://github.com/banky/react-native-streamdown.git"},"author":{"name":"banky","email":"badebajo@proton.me","url":"https://github.com/banky"},"contributors":[{"name":"Gregory Moskaliuk","email":"mosckalyuck@gmail.com","url":"https://github.com/hryhoriiK97"}],"license":"MIT","bugs":{"url":"https://github.com/banky/react-native-streamdown/issues"},"homepage":"https://github.com/banky/react-native-streamdown#readme","publishConfig":{"registry":"https://registry.npmjs.org/"},"devDependencies":{"@commitlint/config-conventional":"^19.8.1","@eslint/compat":"^1.3.2","@eslint/eslintrc":"^3.3.1","@eslint/js":"^9.35.0","@react-native/babel-preset":"0.83.0","@react-native/eslint-config":"0.83.0","@release-it/conventional-changelog":"^10.0.1","@types/jest":"^29.5.14","@types/react":"^19.1.12","commitlint":"^19.8.1","del-cli":"^6.0.0","eslint":"^9.35.0","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.4","jest":"^29.7.0","lefthook":"^2.0.3","prettier":"^2.8.8","react":"19.2.0","react-native":"0.83.2","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-rc.0","release-it":"^19.0.4","remend":"1.2.2","turbo":"^2.5.6","typescript":"^5.9.2"},"peerDependencies":{"react":"*","react-native":"*","react-native-enriched-markdown":"0.4.0","react-native-worklets":"0.8.0-rc.0","remend":"1.2.2"},"workspaces":["example"],"packageManager":"yarn@4.11.0","resolutions":{"metro":"patch:metro@npm%3A0.83.2#~/.yarn/patches/metro-npm-0.83.2-d09f48ca84.patch","metro-runtime":"patch:metro-runtime@npm%3A0.83.2#~/.yarn/patches/metro-runtime-npm-0.83.2-c614bbd3b9.patch"},"react-native-builder-bob":{"source":"src","output":"lib","targets":[["module",{"esm":true}],["typescript",{"project":"tsconfig.build.json"}]]},"prettier":{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false},"jest":{"preset":"react-native","modulePathIgnorePatterns":["<rootDir>/example/node_modules","<rootDir>/lib/"]},"commitlint":{"extends":["@commitlint/config-conventional"]},"release-it":{"git":{"commitMessage":"chore: release ${version}","tagName":"v${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":{"name":"angular"}}}},"create-react-native-library":{"type":"library","languages":"js","tools":["eslint","jest","lefthook","release-it"],"version":"0.57.2"},"gitHead":"557025d460ec35b7a5a03e8bb564d4397dab233a","_id":"@0xbanky/react-native-streamdown@0.2.0","_nodeVersion":"25.2.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-eapFy5LR2drA4B0IBrg05bMbzvHP76P8UGJY+kDJJw8MBIKQ5m/gjgP6TdRWpmdI+KgIcsKvdea+7bg9LJvG7w==","shasum":"7e808d4d823d9a7e1f73b124c138831c8811b725","tarball":"https://registry.npmjs.org/@0xbanky/react-native-streamdown/-/react-native-streamdown-0.2.0.tgz","fileCount":30,"unpackedSize":26487,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDyeHeYyB3eBqO4YHJN1gcEO4qWyhexkAZs38wwEQrvKAiBO1fZDcEHnDGkaP4c0hRzSaHoDW/e0lYdcVTAyD0P92A=="}]},"_npmUser":{"name":"0xbanky","email":"badebajo@proton.me"},"directories":{},"maintainers":[{"name":"0xbanky","email":"badebajo@proton.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-streamdown_0.2.0_1777059133025_0.6175047077144322"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-24T19:32:12.583Z","0.2.0":"2026-04-24T19:32:13.173Z","modified":"2026-04-24T19:32:13.435Z"},"maintainers":[{"name":"0xbanky","email":"badebajo@proton.me"}],"description":"Streaming-ready Markdown for React Native, with GFM support (fork of react-native-streamdown)","homepage":"https://github.com/banky/react-native-streamdown#readme","keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+https://github.com/banky/react-native-streamdown.git"},"contributors":[{"name":"Gregory Moskaliuk","email":"mosckalyuck@gmail.com","url":"https://github.com/hryhoriiK97"}],"author":{"name":"banky","email":"badebajo@proton.me","url":"https://github.com/banky"},"bugs":{"url":"https://github.com/banky/react-native-streamdown/issues"},"license":"MIT","readme":"# @0xbanky/react-native-streamdown\n\n> Fork of [`react-native-streamdown`](https://github.com/software-mansion-labs/react-native-streamdown) with GitHub Flavored Markdown (GFM) support — tables, task lists, strikethrough, autolinks — via the `flavor` prop.\n>\n> This project is not affiliated with, endorsed by, or sponsored by Vercel.\n\nA streaming-ready markdown component for React Native built on top of [`react-native-enriched-markdown`](https://github.com/software-mansion-labs/react-native-enriched-markdown) and [`remend`](https://www.npmjs.com/package/remend).\n\nIt processes raw, incomplete markdown (as it streams token-by-token from an LLM) in the background using [`react-native-worklets`](https://docs.swmansion.com/react-native-worklets/docs/) powerful concurrency feature - the Bundle Mode - keeping the JS thread free at all times.\n\n## Features\n\n- Renders incomplete streaming markdown correctly — no visual glitches mid-stream\n- Background thread processing via `react-native-worklets` Bundle Mode\n- Inline LaTeX support (`$...$`) with streaming completion — applied automatically, no configuration needed (we've also opened a [PR to add this directly to remend](https://github.com/vercel/streamdown/pull/446))\n- CommonMark rendering (headers, bold, italic, inline code, fenced code blocks, links, images) powered by `react-native-enriched-markdown` with built-in `streamingAnimation`\n- Optional GitHub Flavored Markdown (GFM) — tables, task lists, strikethrough, autolinks — via `flavor=\"github\"`\n- Customizable via `remendConfig`\n\n---\n\n## Installation\n\n```sh\nyarn add @0xbanky/react-native-streamdown\n```\n\n### Peer dependencies\n\n```sh\nyarn add react-native-enriched-markdown react-native-worklets remend\n```\n\n| Package                          | Version      |\n| -------------------------------- | ------------ |\n| `react-native-enriched-markdown` | `0.4.0`      |\n| `react-native-worklets`          | `0.8.0-rc.0` |\n| `remend`                         | `1.2.2`      |\n\n---\n\n## Required setup — Bundle Mode\n\n`react-native-streamdown` runs markdown processing on a worklet thread using **Bundle Mode** from `react-native-worklets`. This requires extra configuration steps from the [official Bundle Mode setup guide](https://docs.swmansion.com/react-native-worklets/docs/bundleMode/setup/). Make sure to complete these steps before continuing. For a real-world reference of an app configured with Bundle Mode, check out the [Bundle Mode Showcase App](https://github.com/software-mansion-labs/Bundle-Mode-showcase-app).\n\n### 1. `babel.config.js` — configure Worklets Babel plugin\n\n`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:\n\n#### Expo\n\n```js\nmodule.exports = function (api) {\n  api.cache(true);\n\n  return {\n    presets: ['babel-preset-expo'],\n    plugins: [\n      [\n        'react-native-worklets/plugin',\n        {\n          bundleMode: true,\n          // other options...\n          workletizableModules: ['remend'], // add this line\n        },\n      ],\n    ],\n  };\n};\n```\n\n#### React Native CLI\n\n```js\nconst workletsPluginOptions = {\n  bundleMode: true,\n  // other options...\n  workletizableModules: ['remend'], // add this line\n};\n```\n\n`workletizableModules: ['remend']` tells the Babel plugin to pre-bundle `remend` for the worklet runtime so it can be called off the JS thread.\n\n### 2. `metro.config.js` — configure Metro for monorepos\n\n`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`:\n\n#### Expo\n\n```js\nconst { getDefaultConfig } = require('expo/metro-config');\nconst {\n  getBundleModeMetroConfig,\n} = require('react-native-worklets/bundleMode');\n\nlet config = getDefaultConfig(__dirname);\n\n// Watch the .worklets/ output directory\nconfig.watchFolders.push(\n  require('path').resolve(\n    __dirname,\n    'node_modules/react-native-worklets/.worklets'\n  )\n);\n\n// Resolve react-native-worklets/.worklets/* via the Bundle Mode resolver\nconst defaultResolver = config.resolver.resolveRequest;\n\nconfig = getBundleModeMetroConfig(config);\n\nconfig.resolver.resolveRequest = (context, moduleName, platform) => {\n  if (moduleName.startsWith('react-native-worklets/.worklets/')) {\n    return bundleModeMetroConfig.resolver.resolveRequest(\n      context,\n      moduleName,\n      platform\n    );\n  }\n  return defaultResolver(context, moduleName, platform);\n};\n\nmodule.exports = config;\n```\n\n#### React Native CLI\n\n```js\nconst { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');\nconst { bundleModeMetroConfig } = require('react-native-worklets/bundleMode');\n\nlet config = getDefaultConfig(__dirname);\n\n// Watch the .worklets/ output directory\nconfig.watchFolders.push(\n  require('path').resolve(\n    __dirname,\n    'node_modules/react-native-worklets/.worklets'\n  )\n);\n\n// Resolve react-native-worklets/.worklets/* via the Bundle Mode resolver\nconst defaultResolver = config.resolver.resolveRequest;\n\nconfig = mergeConfig(config, bundleModeMetroConfig);\n\nconfig.resolver.resolveRequest = (context, moduleName, platform) => {\n  if (moduleName.startsWith('react-native-worklets/.worklets/')) {\n    return bundleModeMetroConfig.resolver.resolveRequest(\n      context,\n      moduleName,\n      platform\n    );\n  }\n  return defaultResolver(context, moduleName, platform);\n};\n\nmodule.exports = config;\n```\n\n---\n\n## Usage\n\n```tsx\nimport { StreamdownText } from '@0xbanky/react-native-streamdown';\n\n// markdown can be updated token-by-token as the LLM streams\n<StreamdownText markdown={partialMarkdown} />;\n```\n\n### Props\n\n`StreamdownText` accepts all props from `EnrichedMarkdownText` plus one additional prop:\n\n| Prop           | Type                         | Description                                                                                                                                 |\n| -------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |\n| `flavor`       | `'commonmark'` \\| `'github'` | Optional. Defaults to `'commonmark'`. Set to `'github'` to render GitHub Flavored Markdown — tables, task lists, strikethrough, autolinks.  |\n| `remendConfig` | `RemendOptions`              | Optional. Override the default remend processing config. See [remend docs](https://www.npmjs.com/package/remend) for all available options. |\n\n#### GFM example\n\n```tsx\n<StreamdownText markdown={partialMarkdown} flavor=\"github\" />\n```\n\nNote: `streamingAnimation` (tail-fade) is recommended only with `flavor=\"commonmark\"`; it's disabled automatically under `'github'` because that flavor uses a container-based renderer. You can still force it on by passing `streamingAnimation` explicitly.\n\n---\n\n## Example app\n\nThe `example/` directory in this repository contains a fully working demo app that shows:\n\n- **Streaming Markdown Simulator** — streams a sample markdown document token-by-token to demonstrate rendering quality and the `streamingAnimation` effect\n- **LLM Streaming Demo** — connects to the OpenAI Chat Completions API via SSE and renders the response live using `StreamdownText`\n\nIt is a practical reference for the full Bundle Mode setup (Babel, Metro, `package.json` flags) and for how to wire `StreamdownText` into a real streaming UI.\n\n---\n\n## Fork notes\n\nThis fork adds GFM rendering by exposing the upstream library's `flavor` prop. Tables, task lists, strikethrough, and autolinks render natively when `flavor=\"github\"`. `streamingAnimation` is scoped to `commonmark` because the GFM renderer is container-based.\n\n---\n\nBuilt by [Software Mansion](https://swmansion.com/).\n\n[<img width=\"128\" height=\"69\" alt=\"Software Mansion Logo\" src=\"https://github.com/user-attachments/assets/f0e18471-a7aa-4e80-86ac-87686a86fe56\" />](https://swmansion.com/)\n\n---\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-bea289cf1e29d8c845c458cd8926aac6"}