@0xbanky/react-native-streamdown

@0xbanky/react-native-streamdown

Fork of react-native-streamdown with GitHub Flavored Markdown (GFM) support — tables, task lists, strikethrough, autolinks — via the flavor prop.

This project is not affiliated with, endorsed by, or sponsored by Vercel.

A streaming-ready markdown component for React Native built on top of react-native-enriched-markdown and remend.

It processes raw, incomplete markdown (as it streams token-by-token from an LLM) in the background using react-native-worklets powerful concurrency feature - the Bundle Mode - keeping the JS thread free at all times.

Features

• Renders incomplete streaming markdown correctly — no visual glitches mid-stream
• Background thread processing via react-native-worklets Bundle Mode
• Inline LaTeX support ($...$) with streaming completion — applied automatically, no configuration needed (we've also opened a PR to add this directly to remend)
• CommonMark rendering (headers, bold, italic, inline code, fenced code blocks, links, images) powered by react-native-enriched-markdown with built-in streamingAnimation
• Optional GitHub Flavored Markdown (GFM) — tables, task lists, strikethrough, autolinks — via flavor="github"
• Customizable via remendConfig

---

Installation

yarn add @0xbanky/react-native-streamdown

Peer dependencies

yarn add react-native-enriched-markdown react-native-worklets remend

---

Required setup — Bundle Mode

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. 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.

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, namely bundleMode: true and workletizableModules: ['remend']. Your final config could look like this:

Expo

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

const workletsPluginOptions = {
  bundleMode: true,
  // other options...
  workletizableModules: ['remend'], // add this line
};

workletizableModules: ['remend'] tells the Babel plugin to pre-bundle remend for the worklet runtime so it can be called off the JS thread.

2. metro.config.js — configure Metro for monorepos

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

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

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const { bundleModeMetroConfig } = 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 = mergeConfig(config, bundleModeMetroConfig);

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;

---

Usage

import { StreamdownText } from '@0xbanky/react-native-streamdown';

// markdown can be updated token-by-token as the LLM streams
<StreamdownText markdown={partialMarkdown} />;

Props

StreamdownText accepts all props from EnrichedMarkdownText plus one additional prop:

GFM example

<StreamdownText markdown={partialMarkdown} flavor="github" />

Note: 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.

---

Example app

The example/ directory in this repository contains a fully working demo app that shows:

• Streaming Markdown Simulator — streams a sample markdown document token-by-token to demonstrate rendering quality and the streamingAnimation effect
• LLM Streaming Demo — connects to the OpenAI Chat Completions API via SSE and renders the response live using StreamdownText

It 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.

---

Fork notes

This 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.

---

Built by Software Mansion.

---

License

MIT