Todo List

React Native

A plan whose marks morph as tasks finish.

Install

Source on GitHub

It works in Expo and in bare React Native. New to beUI Native? Set up your app first.

$ bunx beui-native add

Copies the component and the shared files it needs into src/, adds the theme tokens if they're missing, and installs its libraries. Files you've changed are kept.

Keep the folder layout, since the component imports the shared files by relative path.

1Install the libraries

npx expo install react-native-reanimated react-native-svg react-native-worklets
npm install uniwind tailwindcss

2Add the theme tokens

Once per app. Import it from the CSS file Uniwind reads, after Tailwind and Uniwind, and change the values to match your brand.

CSSsrc/styles/theme.css

/* Matches the default beUI palette in ui-components/lib/themes.ts.
   Native surface maps to card; muted maps to muted-foreground. */
@layer theme {
  :root {
    @variant light {
      --color-background: oklch(99% 0 0);
      --color-surface: oklch(97% 0 0);
      --color-foreground: oklch(15% 0 0);
      --color-muted: oklch(50% 0 0);
      --color-border: oklch(15% 0 0 / 0.06);
      --color-border-strong: oklch(15% 0 0 / 0.16);
      --color-primary: #0285f7;
      --color-on-primary: #ffffff;
      --color-destructive: #dc2626;
      --color-success: #059669;
      --color-warning: #d97706;
    }
  }

  :root {
    @variant dark {
      --color-background: #151515;
      --color-surface: #1c1c1c;
      --color-foreground: oklch(96% 0 0);
      --color-muted: oklch(62% 0 0);
      --color-border: rgb(255 255 255 / 0.05);
      --color-border-strong: rgb(255 255 255 / 0.14);
      --color-primary: #0285f7;
      --color-on-primary: #ffffff;
      --color-destructive: #f87171;
      --color-success: #34d399;
      --color-warning: #fbbf24;
    }
  }

  /* Tailwind's default monospace stack isn't a font React Native can load. */
  :root {
    @variant ios {
      --font-mono: Menlo;
    }
  }

  :root {
    @variant android {
      --font-mono: monospace;
    }
  }
}

3Copy the shared files

TSsrc/hooks/use-presence.ts

import { useEffect, useRef, useState } from "react";

export type PresenceItem<T> = {
  key: string;
  value: T;
  /** False for the item present on first render, so it does not animate in. */
  appear: boolean;
  exiting: boolean;
};

/**
 * Keeps replaced items mounted while they animate out, like AnimatePresence.
 * A key that returns while exiting is revived in place.
 */
export function usePresence<T>(
  key: string | null,
  value: T,
  exitDuration: (value: T) => number,
) {
  const [items, setItems] = useState<PresenceItem<T>[]>(() =>
    key === null ? [] : [{ key, value, appear: false, exiting: false }],
  );
  const [currentKey, setCurrentKey] = useState(key);
  const exitDurationRef = useRef(exitDuration);
  exitDurationRef.current = exitDuration;

  // Adjust during render so the new item and the exits start in the same frame.
  if (key !== currentKey) {
    setCurrentKey(key);
    setItems((previous) => {
      const next = previous.map((item) =>
        item.key === key
          ? { ...item, value, exiting: false }
          : { ...item, exiting: true },
      );
      if (key !== null && !previous.some((item) => item.key === key)) {
        next.push({ key, value, appear: true, exiting: false });
      }
      return next;
    });
  }

  const exitingKeys = items
    .filter((item) => item.exiting)
    .map((item) => item.key)
    .join("\n");

  useEffect(() => {
    if (!exitingKeys) return;
    const timers = items
      .filter((item) => item.exiting)
      .map((item) =>
        setTimeout(() => {
          setItems((previous) =>
            previous.filter(
              (candidate) => !(candidate.key === item.key && candidate.exiting),
            ),
          );
        }, exitDurationRef.current(item.value)),
      );
    return () => {
      for (const timer of timers) clearTimeout(timer);
    };
    // Restart removal timers only when the set of exiting items changes.
  }, [exitingKeys]);

  return items;
}

TSsrc/hooks/use-reduced-motion.ts

import { useEffect, useState } from "react";
import { AccessibilityInfo } from "react-native";
import { useReducedMotion } from "react-native-reanimated";

/** Reanimated supplies a synchronous initial value; native events keep it current. */
export function useReducedMotionPreference() {
  const initialValue = useReducedMotion();
  const [reducedMotion, setReducedMotion] = useState(initialValue);

  useEffect(() => {
    let active = true;
    let receivedEvent = false;
    const subscription = AccessibilityInfo.addEventListener(
      "reduceMotionChanged",
      (value) => {
        receivedEvent = true;
        setReducedMotion(value);
      },
    );
    void AccessibilityInfo.isReduceMotionEnabled().then((value) => {
      if (active && !receivedEvent) setReducedMotion(value);
    });
    return () => {
      active = false;
      subscription.remove();
    };
  }, []);

  return reducedMotion;
}

TSXsrc/primitives/agent-icons.tsx

import type { ReactNode } from "react";
import type { ColorValue } from "react-native";
import Svg, { Circle, Path, Rect } from "react-native-svg";

type GlyphProps = { size?: number; color?: ColorValue; strokeWidth?: number };

function Glyph({
  size = 16,
  color = "currentColor",
  strokeWidth = 2,
  children,
}: GlyphProps & { children: ReactNode }) {
  return (
    <Svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth={strokeWidth}
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {children}
    </Svg>
  );
}

// Simple 24-unit stroke glyphs shared by the agent components.

export function ChevronDownGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M6 9l6 6 6-6" />
    </Glyph>
  );
}

export function ArrowUpGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M12 19V5M5.5 11.5L12 5l6.5 6.5" />
    </Glyph>
  );
}

export function PlusGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M12 5v14M5 12h14" />
    </Glyph>
  );
}

export function StopGlyph({ size = 12, color }: GlyphProps) {
  return (
    <Svg width={size} height={size} viewBox="0 0 12 12">
      <Rect x={1} y={1} width={10} height={10} rx={2.5} fill={color} />
    </Svg>
  );
}

export function CheckGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M5 12.5l4.5 4.5L19 7" />
    </Glyph>
  );
}

export function CopyGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Rect x={8.5} y={8.5} width={12} height={12} rx={2.5} />
      <Path d="M15.5 5.5v-.5A2 2 0 0 0 13.5 3h-8.5A2 2 0 0 0 3 5v8.5a2 2 0 0 0 2 2h.5" />
    </Glyph>
  );
}

export function RetryGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M3.5 12a8.5 8.5 0 1 0 2.6-6.1L3.5 8.5" />
      <Path d="M3.5 3.5v5h5" />
    </Glyph>
  );
}

export function ThumbGlyph({
  down = false,
  ...props
}: GlyphProps & { down?: boolean }) {
  return (
    <Glyph {...props}>
      <Path
        d="M7.5 10.5v10M7.5 10.5L11 3.5a2.5 2.5 0 0 1 2.5 2.5v3.5h5a2 2 0 0 1 2 2.3l-1.2 7A2 2 0 0 1 17.3 20.5H4.5a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1z"
        transform={down ? "rotate(180 12 12)" : undefined}
      />
    </Glyph>
  );
}

export function SearchGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={11} cy={11} r={6.5} />
      <Path d="M16 16l4 4" />
    </Glyph>
  );
}

export function GlobeGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M3.5 12h17M12 3.5c2.4 2.5 3.5 5.3 3.5 8.5s-1.1 6-3.5 8.5c-2.4-2.5-3.5-5.3-3.5-8.5s1.1-6 3.5-8.5z" />
    </Glyph>
  );
}

export function FileGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M14 3.5H7.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8z" />
      <Path d="M14 3.5V8h4.5M9 13h6M9 16.5h4" />
    </Glyph>
  );
}

export function PencilGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M4 20h4L19 9a2.1 2.1 0 0 0-4-4L4 16z" />
      <Path d="M13.5 6.5l4 4M14 20h6" />
    </Glyph>
  );
}

export function TerminalGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Rect x={3.5} y={4.5} width={17} height={15} rx={2.5} />
      <Path d="M7.5 10l2.5 2-2.5 2M12.5 15h4" />
    </Glyph>
  );
}

export function WrenchGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M14.5 6.5a4 4 0 0 0 5 5l-8.8 8.8a2.1 2.1 0 0 1-3-3l8.8-8.8a4 4 0 0 1-2-2z" />
    </Glyph>
  );
}

export function SparkleGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M12 4l1.8 4.6L18.5 10.5l-4.7 1.9L12 17l-1.8-4.6-4.7-1.9 4.7-1.9z" />
      <Path d="M18.5 16.5v3M17 18h3" />
    </Glyph>
  );
}

export function MessageGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M20 14.5a2 2 0 0 1-2 2H8.5L4 20V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z" />
    </Glyph>
  );
}

export function ImageGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Rect x={3.5} y={4.5} width={17} height={15} rx={2.5} />
      <Circle cx={9} cy={10} r={1.5} />
      <Path d="M20.5 15.5l-4.5-4.5-9 8.5" />
    </Glyph>
  );
}

export function ShieldGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M12 3.5l7 2.5v5.5c0 4.4-3 7.7-7 9-4-1.3-7-4.6-7-9V6z" />
      <Path d="M9 12l2 2 4-4" />
    </Glyph>
  );
}

export function AlertGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M12 8v4.5M12 16h.01" />
    </Glyph>
  );
}

export function CrossGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M6.5 6.5l11 11M17.5 6.5l-11 11" />
    </Glyph>
  );
}

export function HelpGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M9.6 9.5a2.5 2.5 0 0 1 4.8 1c0 1.7-2.4 2.2-2.4 3.5M12 16.8h.01" />
    </Glyph>
  );
}

export function ArrowGlyph({
  back = false,
  ...props
}: GlyphProps & { back?: boolean }) {
  return (
    <Glyph {...props}>
      <Path
        d="M5 12h14M13 6l6 6-6 6"
        transform={back ? "rotate(180 12 12)" : undefined}
      />
    </Glyph>
  );
}

export function BracesGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M8.5 4H8a2 2 0 0 0-2 2v3.5A2.5 2.5 0 0 1 3.5 12 2.5 2.5 0 0 1 6 14.5V18a2 2 0 0 0 2 2h.5M15.5 4h.5a2 2 0 0 1 2 2v3.5a2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0-2.5 2.5V18a2 2 0 0 1-2 2h-.5" />
    </Glyph>
  );
}

export function BanGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M6 6l12 12" />
    </Glyph>
  );
}

export function CircleCheckGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M8.5 12.2l2.4 2.4 4.6-4.8" />
    </Glyph>
  );
}

export function CircleCrossGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M9.5 9.5l5 5M14.5 9.5l-5 5" />
    </Glyph>
  );
}

export function ListGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M4 6.5l1.5 1.5L8 5.5M4 13l1.5 1.5L8 12M11.5 7h8.5M11.5 13.5h8.5M11.5 19h8.5M4.5 19h2" />
    </Glyph>
  );
}

/** An open ring, spun by SpinGlyph. */
export function RingGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M20.5 12a8.5 8.5 0 1 1-6-8.1" />
    </Glyph>
  );
}

export function ReplyGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M9.5 7L4.5 12l5 5M4.5 12h10a5 5 0 0 1 5 5v1" />
    </Glyph>
  );
}

export function WrapGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M4 6.5h16M4 12h12.5a3.25 3.25 0 0 1 0 6.5H12M4 18.5h4.5M14 16.5l-2 2 2 2" />
    </Glyph>
  );
}

export function BookGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M12 6.5c-1.6-1.3-4-2-7.5-2v13c3.5 0 5.9.7 7.5 2 1.6-1.3 4-2 7.5-2v-13c-3.5 0-5.9.7-7.5 2zM12 6.5v13" />
    </Glyph>
  );
}

export function ExternalGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M14 4.5h5.5V10M19.5 4.5L11 13M17 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h4" />
    </Glyph>
  );
}

export function DoubleCheckGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M2.5 12.5l4.5 4.5 9-9.5M12 16.5l.5.5 9-9.5" />
    </Glyph>
  );
}

export function ClockGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M12 7.5V12l3 2" />
    </Glyph>
  );
}

export function MicGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Rect x={9} y={3.5} width={6} height={11} rx={3} />
      <Path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5v3" />
    </Glyph>
  );
}

TSXsrc/primitives/disclosure.tsx

import { type ReactNode, useEffect, useRef } from "react";
import { StyleSheet, View, type ViewStyle } from "react-native";
import Animated, {
  measure,
  useAnimatedRef,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";
import { scheduleOnUI } from "react-native-worklets";
import { EASE_OUT } from "../styles/motion";

const OPEN = { duration: 220, easing: EASE_OUT };
const CLOSE = { duration: 140, easing: EASE_OUT };
const DROP = 4;
// The height while settled open: unconstrained, so growing content just flows.
const NATURAL = -1;

export type DisclosureProps = {
  open: boolean;
  /** Snaps open and closed, keeping only the fade. */
  reduce: boolean;
  /** Caps the open height; content clips beyond it. */
  maxHeight?: number;
  style?: ViewStyle;
  children: ReactNode;
};

/**
 * Collapsible content shared by the agent components: the height eases
 * between closed and the content's size while the content fades and drops 4
 * points into place. Settled open, the height is left alone, so content that
 * grows (streamed rows, new sources) is never clipped. Closed content is
 * hidden from screen readers and touches.
 */
export function Disclosure({
  open,
  reduce,
  maxHeight,
  style,
  children,
}: DisclosureProps) {
  // The content's height, kept current by layout events; measuring on demand
  // can read 0 for content inside a scroll view.
  const contentHeight = useSharedValue(0);
  const clipRef = useAnimatedRef<Animated.View>();
  const height = useSharedValue(open ? NATURAL : 0);
  const shown = useSharedValue(open ? 1 : 0);
  const mounted = useRef(false);

  useEffect(() => {
    // The first render is already in place.
    if (!mounted.current) {
      mounted.current = true;
      return;
    }
    const cap = maxHeight ?? Number.POSITIVE_INFINITY;
    scheduleOnUI(() => {
      "worklet";
      // Real sizes, read on the UI thread at the moment of the change.
      const full = Math.min(contentHeight.value, cap);
      if (open) {
        const from = height.value === NATURAL ? full : height.value;
        if (reduce) {
          height.value = NATURAL;
        } else {
          height.value = from;
          height.value = withTiming(full, OPEN, (done) => {
            if (done) height.value = NATURAL;
          });
        }
      } else {
        const clip = measure(clipRef);
        const from =
          height.value === NATURAL ? (clip?.height ?? full) : height.value;
        height.value = from;
        height.value = reduce ? 0 : withTiming(0, CLOSE);
      }
    });
    shown.value = withTiming(
      open ? 1 : 0,
      reduce ? { duration: 0 } : open ? OPEN : CLOSE,
    );
  }, [clipRef, contentHeight, height, maxHeight, open, reduce, shown]);

  const clipStyle = useAnimatedStyle(() =>
    // Settled open, the clip follows the content's measured height.
    height.value === NATURAL
      ? {
          height: Math.min(
            contentHeight.value,
            maxHeight ?? Number.POSITIVE_INFINITY,
          ),
        }
      : { height: height.value },
  );
  const contentStyle = useAnimatedStyle(
    () => ({
      opacity: shown.value,
      transform: [{ translateY: reduce ? 0 : (1 - shown.value) * -DROP }],
    }),
    [reduce],
  );

  return (
    <Animated.View
      ref={clipRef}
      pointerEvents={open ? "auto" : "none"}
      accessibilityElementsHidden={!open}
      importantForAccessibility={open ? "auto" : "no-hide-descendants"}
      style={[styles.clip, clipStyle, style]}
    >
      {/* Absolutely placed, so the content keeps its natural height while the
          clip around it is short, and can be measured at any time. */}
      <Animated.View style={[styles.content, contentStyle]}>
        <View
          style={styles.measure}
          onLayout={({ nativeEvent }) => {
            contentHeight.value = nativeEvent.layout.height;
          }}
        >
          {children}
        </View>
      </Animated.View>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  clip: { overflow: "hidden" },
  content: { position: "absolute", left: 0, right: 0, top: 0 },
  measure: { flexShrink: 0 },
});

TSXsrc/primitives/rise-in.tsx

import { type ReactNode, useEffect } from "react";
import type { ViewProps } from "react-native";
import Animated, {
  LinearTransition,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
  withTiming,
} from "react-native-reanimated";
import { EASE_OUT, SPRING_LAYOUT } from "../styles/motion";

const FADE = { duration: 180, easing: EASE_OUT };
const RISE = 6;
const EXIT_DURATION = 140;

/** Leaving rows reverse their entrance: fade and lift 3 points away. */
function riseOut() {
  "worklet";
  return {
    initialValues: { opacity: 1, transform: [{ translateY: 0 }] },
    animations: {
      opacity: withTiming(0, { duration: EXIT_DURATION, easing: EASE_OUT }),
      transform: [
        {
          translateY: withTiming(-3, {
            duration: EXIT_DURATION,
            easing: EASE_OUT,
          }),
        },
      ],
    },
  };
}

const GLIDE = LinearTransition.springify()
  .stiffness(SPRING_LAYOUT.stiffness)
  .damping(SPRING_LAYOUT.damping)
  .mass(SPRING_LAYOUT.mass);

/**
 * A row that fades and rises 6 points into place when it mounts, and lifts
 * away as it leaves, while its neighbours glide to make room. Shared by the agent activity lists.
 */
export function RiseIn({
  reduce,
  appear = true,
  children,
  style,
  ...props
}: ViewProps & { reduce: boolean; appear?: boolean; children: ReactNode }) {
  const animate = appear && !reduce;
  const opacity = useSharedValue(animate ? 0 : 1);
  const lift = useSharedValue(animate ? RISE : 0);

  // Plays once, on mount.
  useEffect(() => {
    if (!animate) return;
    opacity.value = withTiming(1, FADE);
    lift.value = withSpring(0, SPRING_LAYOUT);
  }, []);

  const rise = useAnimatedStyle(() => ({
    opacity: opacity.value,
    transform: [{ translateY: lift.value }],
  }));

  return (
    <Animated.View
      layout={reduce ? undefined : GLIDE}
      exiting={reduce ? undefined : riseOut}
      style={[rise, style]}
      {...props}
    >
      {children}
    </Animated.View>
  );
}

TSXsrc/primitives/roll-text.tsx

import { useEffect, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
  withTiming,
} from "react-native-reanimated";
import { usePresence } from "../hooks/use-presence";
import { EASE_OUT, SPRING_SWAP } from "../styles/motion";

const EXIT = { duration: 140, easing: EASE_OUT };
const TRAVEL = 0.9;

/** Progress runs 0 (below) → 1 (resting) → 2 (rolled away above). */
function Layer({
  text,
  appear,
  exiting,
  reduce,
  height,
  className,
  lines,
}: {
  text: string;
  appear: boolean;
  exiting: boolean;
  reduce: boolean;
  height: number;
  className: string;
  lines?: number;
}) {
  const progress = useSharedValue(appear && !reduce ? 0 : 1);

  useEffect(() => {
    if (reduce) {
      progress.value = exiting ? 2 : 1;
      return;
    }
    progress.value = exiting ? withTiming(2, EXIT) : withSpring(1, SPRING_SWAP);
  }, [exiting, progress, reduce]);

  const style = useAnimatedStyle(() => {
    const p = progress.value;
    return {
      opacity: Math.max(0, Math.min(1, p <= 1 ? p : 2 - p)),
      transform: [{ translateY: (1 - p) * height * TRAVEL }],
    };
  }, [height]);

  return (
    <Animated.View style={[styles.layer, style]}>
      <Text numberOfLines={lines} className={className}>
        {text}
      </Text>
    </Animated.View>
  );
}

export type RollTextProps = {
  /** Changing the value rolls the new text in; defaults to the text itself. */
  value?: string;
  text: string;
  className: string;
  reduce: boolean;
  /** Lines before truncating. Defaults to 1; pass 0 to wrap freely. */
  numberOfLines?: number;
};

/**
 * Text that rolls up when it changes: the new line rises in from below as the
 * old one rolls up and away. Clipped to its own lines, so only the text moves.
 */
export function RollText({
  value,
  text,
  className,
  reduce,
  numberOfLines = 1,
}: RollTextProps) {
  const lines = numberOfLines === 0 ? undefined : numberOfLines;
  const [height, setHeight] = useState(16);
  const items = usePresence(value ?? text, text, () =>
    reduce ? 0 : EXIT.duration + 40,
  );

  return (
    <View style={styles.slot}>
      {/* Sizes the slot to the current text. */}
      <Text
        numberOfLines={lines}
        className={className}
        style={styles.sizer}
        onLayout={({ nativeEvent }) => setHeight(nativeEvent.layout.height)}
      >
        {text}
      </Text>
      {items.map((item) => (
        <Layer
          key={item.key}
          text={item.value}
          appear={item.appear}
          exiting={item.exiting}
          reduce={reduce}
          height={height}
          className={className}
          lines={lines}
        />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  slot: { overflow: "hidden", flexShrink: 1, minWidth: 0 },
  sizer: { opacity: 0 },
  layer: { position: "absolute", left: 0, right: 0, top: 0 },
});

TSsrc/styles/motion.ts

import { Easing, ReduceMotion } from "react-native-reanimated";

// Mirrors beUI's lib/ease.ts so native motion matches the web library.

export const EASE_OUT = Easing.bezier(0.16, 1, 0.3, 1);
export const EASE_IN_OUT = Easing.bezier(0.77, 0, 0.175, 1);

/** Press feedback on buttons and other tappable surfaces. */
export const SPRING_PRESS = {
  stiffness: 500,
  damping: 30,
  mass: 0.6,
  reduceMotion: ReduceMotion.System,
} as const;

/** Content swaps: label and icon slots trading places inside a control. */
export const SPRING_SWAP = {
  stiffness: 460,
  damping: 30,
  mass: 0.55,
  reduceMotion: ReduceMotion.System,
} as const;

/** Shared-layout glides: pills, indicators and panels moving between positions. */
export const SPRING_LAYOUT = {
  stiffness: 360,
  damping: 32,
  mass: 0.6,
  reduceMotion: ReduceMotion.System,
} as const;

/** Dragged handles and fills; critically damped so values never rebound off an end. */
export const SPRING_GLIDE = {
  stiffness: 700,
  damping: 50,
  mass: 0.5,
  reduceMotion: ReduceMotion.System,
} as const;

export const motion = {
  press: SPRING_PRESS,
  swap: SPRING_SWAP,
  layout: SPRING_LAYOUT,
  glide: SPRING_GLIDE,
  exit: { duration: 160, easing: EASE_OUT, reduceMotion: ReduceMotion.System },
  fade: { duration: 150, reduceMotion: ReduceMotion.System },
} as const;

4Copy the component

TSsrc/components/todo-list/index.ts

export type { TodoItem, TodoItemStatus, TodoListProps } from "./todo-list";
export { TodoList } from "./todo-list";

TSXsrc/components/todo-list/todo-list.tsx

import { type ReactNode, useEffect, useRef, useState } from "react";
import {
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
  type ViewProps,
} from "react-native";
import Animated, {
  cancelAnimation,
  Easing,
  ReduceMotion,
  useAnimatedProps,
  useAnimatedStyle,
  useSharedValue,
  withDelay,
  withRepeat,
  withSpring,
  withTiming,
} from "react-native-reanimated";
import Svg, { Circle, Path } from "react-native-svg";
import { useResolveClassNames } from "uniwind";
import { usePresence } from "../../hooks/use-presence";
import { useReducedMotionPreference } from "../../hooks/use-reduced-motion";
import { ChevronDownGlyph, ListGlyph } from "../../primitives/agent-icons";
import { Disclosure } from "../../primitives/disclosure";
import { RiseIn } from "../../primitives/rise-in";
import { RollText } from "../../primitives/roll-text";
import { EASE_OUT, SPRING_LAYOUT, SPRING_SWAP } from "../../styles/motion";

export type TodoItemStatus =
  | "pending"
  | "in-progress"
  | "completed"
  | "cancelled";

export type TodoItem = {
  id: string;
  title: string;
  /** Defaults to "pending". */
  status?: TodoItemStatus;
  /** 0–100 while in progress. Omit it for an indeterminate spinner. */
  progress?: number;
  detail?: ReactNode;
};

const AnimatedCircle = Animated.createAnimatedComponent(Circle);
const AnimatedPath = Animated.createAnimatedComponent(Path);

const RING = 2 * Math.PI * 9;
const CHECK = "M7.5 12.25 10.5 15.25 16.75 8.75";
const CHECK_LENGTH = Math.hypot(3, 3) + Math.hypot(6.25, 6.5);
const CROSS = "M8.5 8.5 15.5 15.5M15.5 8.5 8.5 15.5";
const CROSS_LENGTH = Math.hypot(7, 7) * 2;
const DRAW_CHECK = { duration: 240, easing: EASE_OUT };
const DRAW_CROSS = { duration: 200, easing: EASE_OUT };
const FILL = { duration: 180, easing: EASE_OUT };
const INDETERMINATE = 0.68;

const STATUS_LABEL: Record<TodoItemStatus, string> = {
  pending: "Pending",
  "in-progress": "In progress",
  completed: "Completed",
  cancelled: "Cancelled",
};
const TITLE_CLASS: Record<TodoItemStatus, string> = {
  pending: "text-muted/70",
  "in-progress": "text-foreground",
  completed: "text-muted/60",
  cancelled: "text-muted/60",
};

/**
 * A ring that morphs with the status: dashed while pending, a progress arc
 * while in progress (spinning when the progress is unknown), a drawn check
 * when completed and a cross when cancelled.
 */
function StatusMark({
  status,
  progress,
  reduce,
}: {
  status: TodoItemStatus;
  progress?: number;
  reduce: boolean;
}) {
  const { color: muted } = useResolveClassNames("text-muted");
  const { color: foreground } = useResolveClassNames("text-foreground");
  const { color: destructive } = useResolveClassNames("text-destructive");
  const color =
    status === "in-progress"
      ? foreground
      : status === "cancelled"
        ? destructive
        : muted;
  const active = status === "in-progress";
  const indeterminate = active && progress === undefined;
  const target =
    progress === undefined
      ? INDETERMINATE
      : Math.min(100, Math.max(0, progress)) / 100;

  const arc = useSharedValue(active ? target : 0);
  const fill = useSharedValue(status === "completed" ? 0.06 : 0);
  const check = useSharedValue(status === "completed" ? 1 : 0);
  const cross = useSharedValue(status === "cancelled" ? 1 : 0);
  const spin = useSharedValue(0);

  useEffect(() => {
    const instant = (value: number) => value;
    arc.value = reduce
      ? instant(active ? target : 0)
      : withSpring(active ? target : 0, SPRING_LAYOUT);
    fill.value = reduce
      ? instant(status === "completed" ? 0.06 : 0)
      : withTiming(status === "completed" ? 0.06 : 0, FILL);
    check.value = reduce
      ? instant(status === "completed" ? 1 : 0)
      : withTiming(status === "completed" ? 1 : 0, DRAW_CHECK);
    cross.value = reduce
      ? instant(status === "cancelled" ? 1 : 0)
      : withTiming(status === "cancelled" ? 1 : 0, DRAW_CROSS);
  }, [active, arc, check, cross, fill, reduce, status, target]);

  useEffect(() => {
    if (!indeterminate || reduce) {
      cancelAnimation(spin);
      spin.value = 0;
      return;
    }
    spin.value = withRepeat(
      withTiming(1, {
        duration: 1100,
        easing: Easing.linear,
        reduceMotion: ReduceMotion.Never,
      }),
      -1,
      false,
    );
    return () => cancelAnimation(spin);
  }, [indeterminate, reduce, spin]);

  const baseProps = useAnimatedProps(() => ({ fillOpacity: fill.value }));
  const arcProps = useAnimatedProps(() => ({
    strokeDashoffset: RING * (1 - arc.value),
    strokeOpacity: arc.value > 0.001 ? 1 : 0,
  }));
  const checkProps = useAnimatedProps(() => ({
    strokeDashoffset: CHECK_LENGTH * (1 - check.value),
    strokeOpacity: check.value > 0.001 ? 1 : 0,
  }));
  const crossProps = useAnimatedProps(() => ({
    strokeDashoffset: CROSS_LENGTH * (1 - cross.value),
    strokeOpacity: cross.value > 0.001 ? 1 : 0,
  }));
  const spinStyle = useAnimatedStyle(() => ({
    transform: [{ rotate: `${-90 + spin.value * 360}deg` }],
  }));

  return (
    <View style={styles.mark}>
      <Svg
        width={20}
        height={20}
        viewBox="0 0 24 24"
        style={StyleSheet.absoluteFill}
      >
        {/* Keyed by dash, because react-native-svg keeps a dash pattern
            after strokeDasharray goes back to undefined. */}
        <AnimatedCircle
          key={status === "pending" ? "dashed" : "solid"}
          cx={12}
          cy={12}
          r={9}
          fill={color}
          stroke={color}
          strokeWidth={1.5}
          strokeDasharray={status === "pending" ? "2 3" : undefined}
          strokeOpacity={active ? 0.2 : 1}
          animatedProps={baseProps}
        />
        <AnimatedPath
          d={CHECK}
          fill="none"
          stroke={color}
          strokeWidth={2}
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeDasharray={`${CHECK_LENGTH} ${CHECK_LENGTH}`}
          animatedProps={checkProps}
        />
        <AnimatedPath
          d={CROSS}
          fill="none"
          stroke={color}
          strokeWidth={2}
          strokeLinecap="round"
          strokeDasharray={`${CROSS_LENGTH} ${CROSS_LENGTH}`}
          animatedProps={crossProps}
        />
      </Svg>
      <Animated.View style={[StyleSheet.absoluteFill, spinStyle]}>
        <Svg width={20} height={20} viewBox="0 0 24 24">
          <AnimatedCircle
            cx={12}
            cy={12}
            r={9}
            fill="none"
            stroke={color}
            strokeWidth={2}
            strokeLinecap="round"
            strokeDasharray={`${RING} ${RING}`}
            animatedProps={arcProps}
          />
        </Svg>
      </Animated.View>
    </View>
  );
}

/** A line drawn through a finished task's title, left to right. */
function Strike({
  on,
  reduce,
  color,
}: {
  on: boolean;
  reduce: boolean;
  color: unknown;
}) {
  const drawn = useSharedValue(on ? 1 : 0);
  useEffect(() => {
    drawn.value = reduce
      ? on
        ? 1
        : 0
      : withDelay(
          on ? 60 : 0,
          withTiming(on ? 1 : 0, { duration: 280, easing: EASE_OUT }),
        );
  }, [drawn, on, reduce]);
  const style = useAnimatedStyle(() => ({
    opacity: drawn.value,
    transform: [{ scaleX: drawn.value }],
  }));
  return (
    <Animated.View
      pointerEvents="none"
      style={[styles.strike, { backgroundColor: color as string }, style]}
    />
  );
}

function HeaderIcon({ done, reduce }: { done: boolean; reduce: boolean }) {
  const { color: muted } = useResolveClassNames("text-muted");
  const { color: success } = useResolveClassNames("text-success");
  const items = usePresence(done ? "done" : "list", done, () =>
    reduce ? 0 : 260,
  );
  return (
    <View style={styles.headerIcon}>
      {items.map((item) => (
        <HeaderIconLayer
          key={item.key}
          appear={item.appear}
          exiting={item.exiting}
          reduce={reduce}
        >
          {item.value ? (
            <DoneBadge color={success} reduce={reduce} />
          ) : (
            <ListGlyph size={16} color={muted} />
          )}
        </HeaderIconLayer>
      ))}
    </View>
  );
}

function HeaderIconLayer({
  appear,
  exiting,
  reduce,
  children,
}: {
  appear: boolean;
  exiting: boolean;
  reduce: boolean;
  children: ReactNode;
}) {
  const shown = useSharedValue(appear && !reduce ? 0 : 1);
  useEffect(() => {
    shown.value = reduce
      ? exiting
        ? 0
        : 1
      : withSpring(exiting ? 0 : 1, SPRING_SWAP);
  }, [exiting, reduce, shown]);
  const style = useAnimatedStyle(() => ({
    opacity: shown.value,
    transform: [{ scale: 0.72 + shown.value * 0.28 }],
  }));
  return (
    <Animated.View style={[styles.layer, style]}>{children}</Animated.View>
  );
}

function DoneBadge({ color, reduce }: { color: unknown; reduce: boolean }) {
  const drawn = useSharedValue(reduce ? 1 : 0);
  // Draws once, as the list completes.
  useEffect(() => {
    if (!reduce) drawn.value = withTiming(1, DRAW_CHECK);
  }, []);
  const props = useAnimatedProps(() => ({
    strokeDashoffset: CHECK_LENGTH * (1 - drawn.value),
  }));
  return (
    <Svg width={22} height={22} viewBox="0 0 24 24">
      <Circle cx={12} cy={12} r={9} fill={color as string} />
      <AnimatedPath
        d={CHECK}
        fill="none"
        stroke="#fff"
        strokeWidth={2.25}
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeDasharray={`${CHECK_LENGTH} ${CHECK_LENGTH}`}
        animatedProps={props}
      />
    </Svg>
  );
}

function TodoRow({ item, reduce }: { item: TodoItem; reduce: boolean }) {
  const status = item.status ?? "pending";
  const { color: strike } = useResolveClassNames(TITLE_CLASS[status]);
  return (
    <View
      accessible
      accessibilityLabel={`${STATUS_LABEL[status]}: ${item.title}`}
      style={styles.row}
      className="rounded-xl px-1.5 py-1"
    >
      <StatusMark status={status} progress={item.progress} reduce={reduce} />
      <View style={styles.title}>
        <View style={styles.titleInner}>
          <Text
            numberOfLines={1}
            className={`text-sm leading-5 ${TITLE_CLASS[status]}`}
          >
            {item.title}
          </Text>
          <Strike on={status === "completed"} reduce={reduce} color={strike} />
        </View>
      </View>
      {item.detail !== undefined ? (
        typeof item.detail === "string" ? (
          <Text className="text-sm text-muted/60" style={styles.tabular}>
            {item.detail}
          </Text>
        ) : (
          item.detail
        )
      ) : null}
    </View>
  );
}

export type TodoListProps = Omit<ViewProps, "children"> & {
  items: TodoItem[];
  /** Defaults to "To-dos". */
  title?: string;
  open?: boolean;
  /** Defaults to true. */
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  /** Folds the list away once every task is completed. Defaults to true. */
  collapseOnComplete?: boolean;
  /** Tallest the list grows before it scrolls. Defaults to 248. */
  maxHeight?: number;
  className?: string;
  /** Morphs marks and folds without motion, independently of the system preference. */
  disableAnimation?: boolean;
};

/**
 * An agent's plan as a checklist. Each mark morphs with its task's status,
 * finished titles are struck through, the count rolls as tasks complete, and
 * the whole list folds away when it's done.
 */
export function TodoList({
  items,
  title = "To-dos",
  open: controlledOpen,
  defaultOpen = true,
  onOpenChange,
  collapseOnComplete = true,
  maxHeight = 248,
  className = "",
  disableAnimation = false,
  ...props
}: TodoListProps) {
  const reducedMotion = useReducedMotionPreference();
  const reduce = reducedMotion || disableAnimation;
  const [internalOpen, setInternalOpen] = useState(defaultOpen);
  const open = controlledOpen ?? internalOpen;
  const completed = items.filter((item) => item.status === "completed").length;
  const allComplete = items.length > 0 && completed === items.length;
  const previous = useRef(allComplete);
  const scrollRef = useRef<ScrollView>(null);
  const turn = useSharedValue(open ? 1 : 0);
  const { color: muted } = useResolveClassNames("text-muted");

  const setOpen = (next: boolean) => {
    if (controlledOpen === undefined) setInternalOpen(next);
    onOpenChange?.(next);
  };

  useEffect(() => {
    const was = previous.current;
    previous.current = allComplete;
    if (was && !allComplete) setOpen(true);
    else if (!was && allComplete && collapseOnComplete) setOpen(false);
  });

  useEffect(() => {
    turn.value = reduce
      ? open
        ? 1
        : 0
      : withSpring(open ? 1 : 0, SPRING_SWAP);
  }, [open, reduce, turn]);
  const chevronStyle = useAnimatedStyle(() => ({
    transform: [{ rotate: `${turn.value * 180}deg` }],
  }));

  return (
    <View
      accessibilityLabel="Agent task list"
      className={`w-full overflow-hidden rounded-2xl border border-border ${className}`}
      {...props}
    >
      <Pressable
        accessibilityRole="button"
        accessibilityState={{ expanded: open }}
        accessibilityLabel={`${title}, ${completed} of ${items.length} tasks completed`}
        onPress={() => setOpen(!open)}
        style={styles.header}
        className="px-3.5"
      >
        <HeaderIcon done={allComplete} reduce={reduce} />
        <Text
          numberOfLines={1}
          className="flex-1 text-sm font-medium text-foreground"
        >
          {title}
        </Text>
        <View style={styles.count}>
          <RollText
            text={String(completed)}
            className={`text-xs font-medium ${allComplete ? "text-success" : "text-muted"}`}
            reduce={reduce}
          />
          <Text
            className={`text-xs font-medium ${allComplete ? "text-success" : "text-muted"}`}
            style={styles.tabular}
          >
            /{items.length}
          </Text>
        </View>
        <Animated.View style={chevronStyle}>
          <ChevronDownGlyph size={14} color={muted} />
        </Animated.View>
      </Pressable>
      <Disclosure open={open} reduce={reduce}>
        <ScrollView
          ref={scrollRef}
          style={[styles.fixed, { maxHeight }]}
          showsVerticalScrollIndicator={false}
          nestedScrollEnabled
          contentContainerClassName="px-2 pb-2"
          onContentSizeChange={() =>
            scrollRef.current?.scrollToEnd({ animated: !reduce })
          }
        >
          <View accessibilityLiveRegion="polite">
            {items.length === 0 ? (
              <Text className="px-1.5 py-2 text-sm text-muted">
                No tasks yet
              </Text>
            ) : (
              items.map((item) => (
                <RiseIn key={item.id} reduce={reduce}>
                  <TodoRow item={item} reduce={reduce} />
                </RiseIn>
              ))
            )}
          </View>
        </ScrollView>
      </Disclosure>
    </View>
  );
}

const styles = StyleSheet.create({
  // Scroll views shrink to fit the space above them; inside a closing
  // disclosure that would collapse the content to nothing.
  fixed: { flexGrow: 0, flexShrink: 0 },
  header: { flexDirection: "row", alignItems: "center", gap: 10, height: 44 },
  headerIcon: {
    width: 24,
    height: 24,
    alignItems: "center",
    justifyContent: "center",
  },
  layer: { position: "absolute" },
  count: { flexDirection: "row", alignItems: "center" },
  row: { flexDirection: "row", alignItems: "center", gap: 10, minHeight: 36 },
  mark: { width: 20, height: 20, marginHorizontal: 2 },
  title: { flex: 1, minWidth: 0 },
  titleInner: {
    alignSelf: "flex-start",
    maxWidth: "100%",
    justifyContent: "center",
  },
  strike: {
    position: "absolute",
    left: 0,
    right: 0,
    top: "50%",
    height: StyleSheet.hairlineWidth * 2,
    transformOrigin: ["0%", "50%", 0],
  },
  tabular: { fontVariant: ["tabular-nums"] },
});

Documentation

Native port of beUI Todo List: an agent's plan as a checklist that updates as the agent works.

import { TodoList } from "./src";

<TodoList
  title="Implementation plan"
  items={[
    { id: "1", title: "Inspect the data flow", status: "completed" },
    { id: "2", title: "Update the schema", status: "in-progress", progress: 50, detail: "50%" },
    { id: "3", title: "Add coverage", status: "pending" },
  ]}
/>

Behavior

Each task's mark morphs with its status: a dashed ring while pending, an arc filling to progress while in-progress (a spinning arc when there's no progress), a drawn check when completed and a cross when cancelled.
Completed titles are struck through left to right.
The header count rolls as tasks complete. When every task is done, the list icon turns into a green check and the list folds away; it reopens if a task becomes unfinished again. Turn that off with collapseOnComplete={false}, or control it with open.
New tasks rise in, and the list scrolls to them once it's taller than maxHeight (248 points).

Accessibility

Each task reads as its status and title, such as "In progress: Update the schema".
The header reads as the title and "2 of 4 tasks completed", and reports whether the list is expanded.
Reduced motion, or disableAnimation, swaps marks and strikes without drawing and holds the spinner still.

Copy this directory, hooks/use-presence.ts, hooks/use-reduced-motion.ts, primitives/agent-icons.tsx, primitives/disclosure.tsx, primitives/rise-in.tsx, primitives/roll-text.tsx, styles/motion.ts, and the semantic tokens in styles/theme.css. It uses react-native-svg for its marks.

Also on the web. The React version of Todo List, built with Motion and Tailwind CSS.

Todo List

Preview

Install

1Install the libraries

2Add the theme tokens

3Copy the shared files

4Copy the component

Documentation

Behavior

Accessibility

Related components

Code Block

File Diff

Tool Result