Skip to content

Releases: ARBAB1/react-native-streaming-markdown

v0.1.1 — static licence badge

Choose a tag to compare

@ARBAB1 ARBAB1 released this 11 Sep 22:50

README-only release. No code changes — 0.1.0 and 0.1.1 are identical at runtime.

The licence badge is now a static image rather than a live registry lookup. The npm endpoint was queried before the package existed, cached the 404, and served "package not found" on a package that is plainly MIT. npm freezes the README at publish time, so carrying the fix over needed a version.

Full diff: v0.1.0...v0.1.1

v0.1.0 — first release

Choose a tag to compare

@ARBAB1 ARBAB1 released this 11 Sep 22:33

Markdown for React Native that is meant to be rendered while it is still arriving.

Existing markdown renderers assume you hold the whole document. An AI response does not work that way — it arrives a few characters at a time, and every frame you render is a prefix of a document that is not finished yet. This library parses those prefixes on purpose.

The rule

Once a span renders with a style, it keeps that style in every later frame. Styling may turn on. It may never turn off.

source so far a regex renderer this library
Use plain plain
Use ** bold plain
Use **bo bold plain
Use **bold bold plain
Use **bold** bold bold

A regex renderer commits to bold the moment it sees **, before it knows the span closes. If the model was writing 2 ** 8, it has to take the bold back off — mid-sentence, while you are reading. That flash is the flicker.

What this fixes

failure solution
Text flashes bold, then un-bolds Unclosed inline delimiters render as literal text
Code streams as a paragraph, then snaps into a block Unclosed fences render as a code block immediately
Dropped frames; lost scroll and selection Nodes keyed by source line, stable under append
Blank screen mid-response Every prefix of every document parses, tested exhaustively

Block constructs invert the inline rule for the same reason. An opening ** is ambiguous; an opening fence is not — a fence is always going to become a code block, so committing immediately never has to be undone.

Included

  • <Markdown streaming cursor styles onLinkPress renderers> component
  • Headings, paragraphs, bold, italic, strikethrough, inline code, links, hard breaks, escapes, bullet and ordered lists with nesting, blockquotes, fenced code blocks, horizontal rules
  • snake_case left alone, so code in prose is not italicised
  • react-native-streaming-markdown/parser subpath — the parser has no React Native dependency and runs in tests, on a server, or on the web
  • 26 tests, including a character-by-character replay that fails if any style ever toggles off
  • Zero runtime dependencies. No native modules, so it works in Expo Go.

Install

npm install react-native-streaming-markdown
<Markdown streaming={isStreaming} cursor>{text}</Markdown>

Full write-up of the problem and each solution: docs/DESIGN.md