Native Animation

Sign in Get all-access

Base Highlight Text animation preview

Base Highlight 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-highlight-text

Base Highlight Text

React Native Highlight Text Component

A left-to-right highlight sweep behind each wrapped text line, with configurable text, highlight color, duration, delay, trigger, 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

A left-to-right highlight sweep behind each wrapped text line, with configurable text, highlight color, duration, delay, trigger, typography, and theme.

How it works

Native text reports line rectangles through onTextLayout. A web-only range observer measures the actual line wrapping and remeasures when fonts or width change.
Each measured line gets a separate rounded background, painted behind the text without clipping descenders.
One shared value expands every line's background from 0% to 100% with Easing.inOut(Easing.ease) over duration milliseconds.
Set trigger to false to reset, then true when your viewport observer reports that the text is visible. Viewport detection belongs to the host app.

For a fuller editorial treatment, explore marker-highlight-quote.

Install

npx nativeanimation add base-highlight-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 { BaseHighlightText } from './base-highlight-text';

<BaseHighlightText
  text="Give your best ideas room to grow."
  duration={2000}
  trigger={isVisible}
  style={{ fontSize: 24, lineHeight: 34 }}
/>

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. style customizes the text. Set layout spacing on the parent; use this as a standalone text block rather than nesting it inside another Text.

Props

Prop	Type	Default	Description
`text`	`string`	—	Text to highlight.
`highlightColor`	`string`	primary at 18% light / 30% dark	Background color behind the text.
`duration`	`number`	`2000`	Sweep duration in milliseconds.
`delay`	`number`	`0`	Delay before the sweep in milliseconds.
`trigger`	`boolean`	`true`	Starts on true, resets on false.
`style`	`StyleProp<TextStyle>`	—	Font, color, line height, and alignment.
`theme`	`BaseTheme`	provider	Theme override.
`testID`	`string`	—	Identifier on the container.

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. Web measurement lives in a .web.ts file and never enters the native bundle. No safe-area padding is applied. All lines sweep together; the component does not scroll or observe the viewport itself.

Accessibility

The full text remains selectable by assistive technology through one accessible text element; backgrounds are decorative and ignore touches. Reduce Motion paints the complete highlight immediately, without a sweep or delay. Keep custom foreground and highlight colors at an accessible contrast ratio.

Part of a shared foundation

Use it in a screen

Compose Base Highlight 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

BaseHighlightText.tsx

import Animated, {
  ReduceMotion,
  cancelAnimation,
  Easing,
  useAnimatedStyle,
  useSharedValue,
  withDelay,
  withTiming,
  type SharedValue,
} from 'react-native-reanimated';
import {
  useBaseReducedMotion,
  alpha,
  useBaseTheme,
  type BaseTheme,
} from '../base-theme';
import React, {
  useCallback,
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
} from 'react';
import { Text, View, type StyleProp, type TextStyle } from 'react-native';

import { observeTextLines, type TextLine } from './measureLines';

export type BaseHighlightTextProps = {
  text: string;
  highlightColor?: string;
  duration?: number;
  delay?: number;
  /** Set false to reset, then true when the text enters the viewport. */
  trigger?: boolean;
  style?: StyleProp<TextStyle>;
  theme?: BaseTheme;
  testID?: string;
};
function HighlightLine({
  line,
  progress,
  color,
}: {
  line: TextLine;
  progress: SharedValue<number>;
  color: string;
}) {
  const animated = useAnimatedStyle(() => ({
    width: Math.max(0, line.width * progress.get()),
  }));
  return (
    <Animated.View
      style={[
        {
          position: 'absolute',
          left: line.x,
          top: line.y,
          height: line.height,
          borderRadius: 4,
          backgroundColor: color,
        },
        animated,
      ]}
    />
  );
}
export function BaseHighlightText({
  text,
  highlightColor,
  duration = 2000,
  delay = 0,
  trigger = true,
  style,
  theme: override,
  testID,
}: BaseHighlightTextProps) {
  const theme = useBaseTheme(override);
  const reduced = useBaseReducedMotion();
  const progress = useSharedValue(reduced ? 1 : 0);
  const [lines, setLines] = useState<TextLine[]>([]);
  const label = useRef<React.ComponentRef<typeof Text>>(null);
  const updateLines = useCallback((next: TextLine[]) => {
    setLines((previous) =>
      JSON.stringify(previous) === JSON.stringify(next) ? previous : next,
    );
  }, []);
  useLayoutEffect(
    () =>
      observeTextLines(
        label.current as unknown as Parameters<typeof observeTextLines>[0],
        updateLines,
      ),
    [text, style, updateLines],
  );
  useEffect(() => {
    cancelAnimation(progress);
    progress.set(reduced ? 1 : 0);
    if (!reduced && trigger)
      progress.set(
        withDelay(
          Math.max(0, delay),
          withTiming(1, {
            reduceMotion: ReduceMotion.Never,
            duration: Math.max(0, duration),
            easing: Easing.inOut(Easing.ease),
          }),
          ReduceMotion.Never,
        ),
      );
    return () => cancelAnimation(progress);
  }, [text, trigger, reduced, duration, delay, progress]);
  const color =
    highlightColor ??
    alpha(theme.colors.primary, theme.scheme === 'dark' ? 0.3 : 0.18);
  return (
    <View testID={testID} style={{ alignSelf: 'stretch' }}>
      <View
        pointerEvents="none"
        accessible={false}
        importantForAccessibility="no-hide-descendants"
        style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
      >
        {lines.map((line, index) => (
          <HighlightLine
            key={index}
            line={line}
            progress={progress}
            color={color}
          />
        ))}
      </View>
      <Text
        ref={label}
        accessible
        accessibilityLabel={text}
        onTextLayout={(event) =>
          updateLines(
            event.nativeEvent.lines.map(({ x, y, width, height }) => ({
              x,
              y,
              width,
              height,
            })),
          )
        }
        style={[
          {
            fontFamily: theme.fonts.regular,
            fontSize: 16,
            lineHeight: 26,
            color: theme.colors.foreground,
          },
          style,
        ]}
      >
        {text}
      </Text>
    </View>
  );
}

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.

measureLines.ts

import type { Text } from 'react-native';
export type TextLine = { x: number; y: number; width: number; height: number };
/** Native line rectangles arrive through onTextLayout. */
export function observeTextLines(
  _node: Text | null,
  _onLines: (lines: TextLine[]) => void,
): () => void {
  return () => {};
}

measureLines.web.ts

import type { Text } from 'react-native';
export type TextLine = { x: number; y: number; width: number; height: number };
/** Range rectangles preserve the actual wrapping, font metrics, and text alignment. */
export function observeTextLines(
  node: Text | null,
  onLines: (lines: TextLine[]) => void,
): () => void {
  const element = node as unknown as HTMLElement | null;
  if (!element) return () => {};
  let active = true;
  const measure = () => {
    if (!active) return;
    const origin = element.getBoundingClientRect();
    const range = document.createRange();
    range.selectNodeContents(element);
    const lines: TextLine[] = [];
    for (const rect of Array.from(range.getClientRects())) {
      if (!rect.width || !rect.height) continue;
      const line = {
        x: rect.left - origin.left,
        y: rect.top - origin.top,
        width: rect.width,
        height: rect.height,
      };
      if (
        !lines.some(
          (previous) =>
            Math.abs(previous.y - line.y) < 0.5 &&
            Math.abs(previous.x - line.x) < 0.5 &&
            Math.abs(previous.width - line.width) < 0.5,
        )
      )
        lines.push(line);
    }
    onLines(lines);
  };
  const observer = new ResizeObserver(measure);
  observer.observe(element);
  measure();
  void document.fonts.ready.then(measure);
  return () => {
    active = false;
    observer.disconnect();
  };
}

nativeanimation.manifest.json

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