# Stream text

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

- Type: Component (data)
- Access: Free, open source (MIT)
- Page: https://goodui.dev/native/components/stream-text
- Markdown: https://goodui.dev/native/components/stream-text.md
- Registry item: https://goodui.dev/native/r/stream-text.json
- Dependencies: react-native-reanimated
- Keywords: react native streaming text, chatgpt typing effect, ai response animation, word by word text, token streaming ui

## When to use

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

## When not to use

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

## Installation

With the shadcn CLI (needs a components.json in the Expo app), then `npx expo install --fix` so native dependencies match your Expo SDK. The foundation comes along the first time.

```bash
npx shadcn@latest add https://goodui.dev/native/r/stream-text.json
npx expo install --fix
```

The component lands in `components/goodui-native/stream-text/` and imports the foundation from `components/goodui-native/foundation/` with relative paths; it also installs locale.

Built-in strings follow `<GooduiLocaleProvider>` (one [language pack](https://goodui.dev/native/r/locale-tr.json) translates the whole kit); the `labels` prop overrides them for one instance.

## Usage

```tsx
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} />
```

## API reference

### StreamText

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

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

## Accessibility

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

## Motion

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

## Performance

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

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

## Related

- [Prompt composer](https://goodui.dev/native/components/prompt-composer.md): 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](https://goodui.dev/native/components/ai-provider.md): 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](https://goodui.dev/native/components/chat-bubble.md): 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.

## Guidance for AI tools

Stream text: 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. Use only the documented props. Keep accessibility, reduced motion and both color schemes intact when adapting it.

Full library index: https://goodui.dev/native/llms.txt