Native Animation

Sign in Get all-access

Base Typing Text animation preview

Base Typing Text animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add base-typing-text

Base Typing Text

React Native Typing Text Component

Character-by-character text with configurable phrases, typing speed, delay, looping, cursor, completion callback, typography, and theme.

Native Animation Base · Free · MIT

Read and download source

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

About this component

Related guides

React Native Text Animation: Reveals and Readable Copy

Character-by-character text with configurable phrases, typing speed, delay, looping, cursor, completion callback, typography, and theme.

How it works

A single cleaned-up timeout advances each typing or deletion step; no interval runs for every mounted character.
Text arrays type each phrase, hold for holdDelay, delete at the same speed, and advance. Without loop, the final phrase stays visible. Empty arrays render no text.
The optional 2 pt cursor stays solid during typing and deletion, then blinks in two discrete halves of a one-second cycle while idle.
Changing the text or playback settings restarts the sequence. Changing styles, theme, or the callback does not restart it. onComplete runs after each completed phrase.

For an assistant response with richer streaming states, explore streaming-ai-reply.

Install

npx nativeanimation add base-typing-text

The CLI also copies base-theme. Dependencies, if you copy by hand:

npx expo install react-native-reanimated react-native-worklets

Free forever. MIT.

Usage

import { BaseTypingText } from './base-typing-text';

<BaseTypingText text="Make room for your best work." duration={80} />
<BaseTypingText
  text={['Find design notes', 'Explore new ideas', 'Plan your week']}
  duration={90}
  holdDelay={1500}
  loop
/>

Wrap your app in BaseThemeProvider (from base-theme) to choose light/dark and an accent; without it, pieces use the light neutral theme. The theme prop overrides the provider. Use style to change text color, font family, size, alignment, and line height. The cursor uses the theme's foreground color and follows the text's font size.

Props

Prop	Type	Default	Description
`text`	`string \| string[]`	—	One phrase or a sequence.
`duration`	`number`	`100`	Milliseconds per character; deletion uses the same speed.
`delay`	`number`	`0`	Initial delay in milliseconds.
`loop`	`boolean`	`false`	Repeats after the last phrase.
`holdDelay`	`number`	`1000`	Pause before deleting a phrase.
`cursor`	`boolean`	`true`	Shows the idle-blinking cursor.
`style`	`StyleProp<TextStyle>`	—	Text styling.
`onComplete`	`() => void`	—	Called after each phrase has finished typing.
`theme`	`BaseTheme`	provider	Theme override.
`testID`	`string`	—	Identifier on the text.

Compatibility

Expo SDK 58 · React Native 0.88 · Reanimated 4.7 · react-native-worklets 0.13. Targets iOS, Android, and web, in Expo Go and development builds. Part of Native Animation Base, a free family sharing one theme. Text wraps naturally inside the space supplied by the parent; it is a standalone text block, not a nested text span. No safe-area padding is applied. Unicode code points stay intact; combined grapheme clusters may appear in more than one step.

Accessibility

The text exposes the full phrase or the full joined phrase array as its accessible label, so assistive technology does not announce partial characters. Reduce Motion displays the first full phrase immediately, calls onComplete once, and removes the cursor and automatic cycling. Timers and cursor animation are canceled on unmount.

Part of a shared foundation

Use it in a screen

Compose Base Typing Text with other Base components and a single shared theme. Ask your agent to read each API, then connect real navigation, state, and callbacks.

Build a habit tracker Build with an agent CLI and manual installation Theme and dark mode Accessibility checklist Native Animation Base UI library

Go further.

Base covers the everyday. Choose a more expressive interaction when your app calls for it.

Another way to solve this task · $9

Bubble Sale Banner ↗

A sale banner with jumping balloon letters and a printing receipt, with configurable copy, character artwork, fonts, and colors.

Another way to solve this task · $9

Year Digits Rollover ↗

An interactive year reveal with alternating bands on changing digits, with configurable start year, end year, colors, and numeral font asset.

Source code

Loading public source…

Dependencies

Package	Version
react-native-reanimated	4.7.1
react-native-worklets	0.13.0

Compatibility

SDK	Status	Revision	Last revision	Platforms	Dependencies
Expo SDK 58	Tested	1	10/27/2026	iOS, Web, Android	react-native-reanimated 4.7.1, react-native-worklets 0.13.0
Expo SDK 57	Tested	1	10/27/2026	iOS, Web, Android	react-native-reanimated 4.5.1, react-native-worklets 0.10.1

Scroll the table horizontally to review every column ↔

More animations

BaseTypingText.tsx

import Animated, {
  ReduceMotion,
  cancelAnimation,
  useAnimatedStyle,
  useSharedValue,
  withDelay,
  withRepeat,
  withSequence,
  withTiming,
} from 'react-native-reanimated';
import {
  useBaseReducedMotion,
  useBaseTheme,
  type BaseTheme,
} from '../base-theme';
import React, { useEffect, useRef, useState } from 'react';
import { StyleSheet, Text, type StyleProp, type TextStyle } from 'react-native';

export type BaseTypingTextProps = {
  text: string | string[];
  /** Milliseconds per character, for typing and deletion. */
  duration?: number;
  delay?: number;
  loop?: boolean;
  holdDelay?: number;
  cursor?: boolean;
  style?: StyleProp<TextStyle>;
  /** Called after each phrase finishes typing. */
  onComplete?: () => void;
  theme?: BaseTheme;
  testID?: string;
};

function TypingRun({
  text,
  duration = 100,
  delay = 0,
  loop = false,
  holdDelay = 1000,
  cursor = true,
  style,
  onComplete,
  theme: override,
  testID,
}: BaseTypingTextProps) {
  const theme = useBaseTheme(override);
  const reduced = useBaseReducedMotion();
  const phrases = typeof text === 'string' ? [text] : text;
  const textKey = JSON.stringify(phrases);
  const [visible, setVisible] = useState(reduced ? (phrases[0] ?? '') : '');
  const [writing, setWriting] = useState(false);
  const complete = useRef(onComplete);
  useEffect(() => {
    complete.current = onComplete;
  }, [onComplete]);
  const blink = useSharedValue(0);
  useEffect(() => {
    const words: string[] = JSON.parse(textKey);
    let timer: ReturnType<typeof setTimeout> | undefined;
    let stopped = false;
    let phrase = 0;
    let count = 0;
    let deleting = false;
    const wait = (fn: () => void, ms: number) => {
      timer = setTimeout(
        () => {
          if (!stopped) fn();
        },
        Math.max(0, ms),
      );
    };
    if (!words.length) return;
    if (reduced) {
      complete.current?.();
      return;
    }
    const step = () => {
      const characters = Array.from(words[phrase]);
      if (deleting) {
        count = Math.max(0, count - 1);
        setVisible(characters.slice(0, count).join(''));
        setWriting(count > 0);
        if (count > 0) wait(step, Math.max(1, duration));
        else {
          deleting = false;
          phrase = (phrase + 1) % words.length;
          wait(step, Math.max(1, duration));
        }
        return;
      }
      count = Math.min(characters.length, count + 1);
      setVisible(characters.slice(0, count).join(''));
      if (count < characters.length) {
        setWriting(true);
        wait(step, Math.max(1, duration));
      } else {
        setWriting(false);
        complete.current?.();
        if (loop || phrase < words.length - 1)
          wait(() => {
            deleting = true;
            setWriting(true);
            step();
          }, holdDelay);
      }
    };
    wait(step, delay);
    return () => {
      stopped = true;
      clearTimeout(timer);
    };
  }, [textKey, duration, delay, loop, holdDelay, reduced]);
  useEffect(() => {
    cancelAnimation(blink);
    blink.set(0);
    if (!reduced && cursor && !writing)
      blink.set(
        withRepeat(
          withSequence(
            ReduceMotion.Never,
            withDelay(
              500,
              withTiming(1, { reduceMotion: ReduceMotion.Never, duration: 0 }),
              ReduceMotion.Never,
            ),
            withDelay(
              500,
              withTiming(0, { reduceMotion: ReduceMotion.Never, duration: 0 }),
              ReduceMotion.Never,
            ),
          ),
          -1,
          undefined,
          undefined,
          ReduceMotion.Never,
        ),
      );
    return () => cancelAnimation(blink);
  }, [blink, writing, reduced, cursor]);
  const cursorStyle = useAnimatedStyle(() => ({
    opacity: writing ? 1 : blink.get(),
  }));
  const fontSize = Math.max(12, StyleSheet.flatten(style)?.fontSize ?? 16);
  return (
    <Text
      testID={testID}
      accessible
      accessibilityLabel={phrases.join(' ')}
      style={[
        {
          color: theme.colors.foreground,
          fontFamily: theme.fonts.regular,
          fontSize: 16,
          lineHeight: 24,
        },
        style,
      ]}
    >
      {reduced ? (phrases[0] ?? '') : visible}
      {cursor && !reduced ? (
        <Animated.View
          accessible={false}
          importantForAccessibility="no"
          style={[
            {
              width: 2,
              height: fontSize,
              marginLeft: 2,
              backgroundColor: theme.colors.foreground,
            },
            cursorStyle,
          ]}
        />
      ) : null}
    </Text>
  );
}

export function BaseTypingText(props: BaseTypingTextProps) {
  const reduced = useBaseReducedMotion();
  const resetKey = JSON.stringify([
    props.text,
    props.duration,
    props.delay,
    props.loop,
    props.holdDelay,
    reduced,
  ]);
  return <TypingRun key={resetKey} {...props} />;
}

LICENSE

MIT License

Copyright (c) 2026 Native Animation

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

nativeanimation.manifest.json

{
  "schemaVersion": 1,
  "id": "base-typing-text",
  "family": "base",
  "license": "MIT",
  "kind": "component",
  "registryDependencies": [
    "base-theme"
  ],
  "dependencies": {
    "react-native-reanimated": "4.7.1",
    "react-native-worklets": "0.13.0"
  }
}