Stream text

Free · MITReact Native · Expo

Text that arrives word by word: new words fade up and a caret pulses at the end, and when streaming stops it becomes one plain text block.

View as Markdown

Look

Try it on your phone

Scan to open this demo in your phone's browser and use it with your fingers.

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/stream-text.json

Then run npx expo install --fix so react-native-reanimated match your Expo SDK. Files land in components/goodui-native/stream-text.

Usage

import { useState } from "react";
import { StreamText } from "@/components/goodui-native/stream-text/stream-text";

const [text, setText] = useState("");
const [streaming, setStreaming] = useState(true);

await provider.stream({ prompt }, { onToken: (chunk) => setText((t) => t + chunk) });
setStreaming(false);

<StreamText text={text} streaming={streaming} />

When to use

Use it for

A model reply that streams in.
Short generated text that should feel live.

Reach for something else

Text that already exists: use Text.
Markdown or code: it renders plain text only.

API reference

Prop	Type	Default
text* The text so far. Append to it as tokens arrive.	string	—
streaming Still arriving: new words fade up and a caret pulses at the end.	boolean	false
textStyle	StyleProp<TextStyle>	—
style Style for the outer container.	StyleProp<ViewStyle>	—
testID Identifier for end-to-end tests.	string	—

Motion and haptics

Each new word fades up 5 pt over 240 ms, and the caret pulses.
Reduced motion: words appear at once and the caret holds still.

One animated view per word, only in the paragraph still arriving. Finished paragraphs are plain text, and the whole reply becomes one block at the end.

Each finished sentence is announced once: through a hidden live region, or an announcement on iOS. The text so far stays readable on focus. Finished text is plain Text.

Notes for AI

Pass the whole text so far, not the newest chunk.
Set streaming to false when the reply ends, and keep it mounted so the last sentence is announced.
Chinese, Japanese and Thai split with Intl.Segmenter. Where the engine lacks it, they fall back to characters and Thai clusters, which can wrap inside a word until the reply ends.
Style with textStyle. It takes a Text style, not size or tone props.

Prompt composer

The input for AI apps: a field that grows with the text on a spring, chips that add phrases to the prompt, and a send button that morphs into a stop square while a job runs.

AI provider

The logic layer behind the AI components, with no UI: a typed provider adapter with an offline mock, a credit ledger that keeps subscription and bought credits apart, and a generation queue that charges, refunds and retries.

Chat bubble

Message bubbles that group into runs with one tail, carry a receipt that ticks forward (clock, a check that draws itself, two checks, both brightening when read) and spring up out of the composer; plus a TypingIndicator whose dots wave and a Composer whose mic morphs into a filled send arrow as soon as there is text.