# expo-agent-spinners: Fifty-Four Terminal Spinners for React Native and Expo

> expo-agent-spinners is a React Native library of 54 terminal-style loading indicators built with only the Text component and setInterval, requiring no native modules. It targets Expo and bare React Native projects that want a developer-aesthetic spinner for AI agent streams, CLI-style interfaces, or lightweight loading states.

**Eronred/expo-agent-spinners** — 54 terminal-style agent-like spinners for React Native & Expo. Lightweight, zero native dependencies — just Text. No heavy UI threads

- Repository: https://github.com/Eronred/expo-agent-spinners
- Website: https://reactnativecomponents.com/
- Stars: 314 · Forks: 19
- Language: TypeScript
- License: not declared
- Published: 2026-09-10 · Updated: 2026-09-10 · Language: en
- Canonical page: https://hysenlabs.com/projects/eronred-expo-agent-spinners

## What expo-agent-spinners is for

Most React Native loading indicators rely on animated SVG, Lottie files, or native activity indicators. expo-agent-spinners takes a different approach: every spinner is a React Native Text component cycling through Unicode characters on a setInterval timer. The result is zero native dependencies, no heavy assets, and a visual style that echoes terminal progress indicators.

The README describes four intended use cases. The first is AI agent streams, where the spinner indicates that an LLM response is in progress. The second is CLI-style interfaces that give an application a developer or terminal aesthetic. The third is lightweight loading states where avoiding SVG or Lottie files is a priority. The fourth is monospace layouts paired with code editors or terminal screens.

The library ships 54 spinners across Braille, ASCII, arrow, and emoji categories. It requires Expo 54 or a compatible bare React Native setup, based on the dependency in package.json.

## Four categories covering 54 spinners

The Braille category is the largest, with 32 spinners named dots, dots2 through dots14, sand, bounce, dots_circle, wave, scan, rain, pulse, snake, sparkle, cascade, columns, orbit, breathe, waverows, checkerboard, helix, fillsweep, and diagswipe. Braille patterns produce a classic terminal feel and cycle through dot configurations that map naturally to progress or activity.

The ASCII category has 15 spinners including dqpb, rolling_line, simple_dots, simple_dots_scrolling, arc, balloon, circle_halves, circle_quarters, point, square_corners, toggle, triangle, grow_horizontal, grow_vertical, and noise. These use only printable ASCII characters and are the safest choice for environments where Unicode rendering is uncertain.

The arrow category adds two spinners: arrow and double_arrow. The emoji category provides six: hearts, clock, earth, moon, speaker, and weather. All four categories use the same three-prop interface: size (font size, default 24), color (default #fff), and style (ViewStyle for the outer container).

## Importing a spinner and sizing the container

The README does not describe an npm installation step. Instead, it instructs users to copy the spinner component file they need from the src/components/spinners/ directory into their project. Import the component from the copied path:

```tsx
import { DotsSpinner } from "./src/components/spinners/dots";

export default function Loading() {
  return <DotsSpinner size={24} color="#fff" style={{ width: 40, height: 40 }} />;
}
```

Container sizing matters. Unicode characters render at pixel widths that depend on font and platform. The README warns that without a fixed-size container, layout overflow or shifting can occur. The recommended approach is a fixed View:

```tsx
<View style={{ width: 40, height: 40, alignItems: "center", justifyContent: "center" }}>
  <DotsSpinner size={24} color="#fff" />
</View>
```

The README provides sizing guidance by character count. Single-character spinners such as dots, moon, and arc work well in a 40-wide container. Two-character spinners like dots12, wave, and scan need 64 wide. Three-to-four character spinners like point and columns need 80 to 96 wide.

The library is listed as private in package.json, meaning it is not published to npm. Copying individual files is the intended distribution method.

## Font rendering and the copy-paste distribution model as real constraints

The fundamental constraint of a text-only spinner library is Unicode rendering. Whether a Braille pattern or an emoji displays correctly depends on the font the device uses and the platform's text rendering engine. The README acknowledges layout issues but does not document tested platform combinations or known rendering failures. For a production application targeting a wide range of Android devices, the ASCII category is the safer choice since it avoids multi-byte Unicode.

The copy-paste distribution model also has a practical downside. There is no single npm package to install and update. Each spinner you use is a copied file in your repository, and updates to the upstream library require manual re-copy. A project that uses many spinners across its codebase accumulates significant manual maintenance overhead.

Additionally, there is no semantic versioning visible through npm. The package.json marks the library as version 1.0.0 but also private, so there is no release history on npm to consult when the upstream changes.

## How expo-agent-spinners differs from react-native-loading-spinner-overlay

react-native-loading-spinner-overlay is a widely used React Native library that wraps the platform's native ActivityIndicator inside a Modal overlay. It follows the native platform aesthetic by default and installs as a standard npm package.

expo-agent-spinners differs in two ways. First, it uses Unicode text characters instead of native animated components, which removes native module dependencies entirely. Second, it does not provide an overlay or modal wrapper; each spinner is a standalone Text component that the developer positions manually.

For a project that needs a spinner matching the platform's native style and wants an install-and-go experience, react-native-loading-spinner-overlay is the more conventional path. expo-agent-spinners is the better fit when the design intentionally breaks from the native look in favor of a terminal or developer aesthetic, particularly for AI-facing applications where that character fits the product.

## Project layout and running the demo app

The repository follows a standard Expo project structure. The top-level entries include App.tsx, which is the demo application entry point that displays all 54 spinners, index.ts as the package entry point, src/ for the spinner components, assets/ for image resources, and the standard Expo configuration files app.json and tsconfig.json.

The README instructs developers to clone the repository and run the Expo demo to see all 54 spinners live. This is also the contribution workflow: open a pull request with the demo app as the test vehicle. Because there is no separate test suite, the Expo demo serves as the visual confirmation that a new spinner animates correctly before it is merged.

The package.json lists four run scripts. The start script launches the Expo dev server. The android and ios scripts start the app on those specific platforms. The web script starts the browser build. These all use expo start with the appropriate platform flag.

The package.json also shows the dependency versions at time of the last push on 2026-04-18: expo 54.0.33, React 19.1.0, and react-native 0.81.5. The devDependencies include TypeScript 5.9.2 and the React type definitions. The package is listed as private, meaning it is not intended for npm publication; its contents are meant to be copied into other projects rather than installed as a dependency.

The README credits vyfor/rattles as the inspiration for the project. The library is licensed under the MIT license according to the README.

## Conclusion

expo-agent-spinners suits React Native and Expo projects where a developer-aesthetic or AI-agent-style loading indicator fits the design. The copy-paste installation model works best when you need only a few spinners; a full import adds every spinner file to the bundle regardless of what you use. Check your font rendering on target devices before shipping: the Braille spinners in particular depend on Unicode character support that varies by platform and font.

## FAQ

### How do I add expo-agent-spinners to a React Native project?

The README instructs users to copy the spinner file they need from the src/components/spinners/ directory into their project rather than installing from npm. The library is marked private in package.json and is not published to any package registry.

### What spinner categories does expo-agent-spinners include?

The library includes four categories: Braille (32 spinners), ASCII (15 spinners), arrow (2 spinners), and emoji (6 spinners), totaling 54 components. All share the same three-prop interface: size, color, and style.

### Does expo-agent-spinners work without Expo in a bare React Native project?

The README describes the library as being for React Native and Expo. The package.json lists expo and react-native as dependencies, and the Expo demo app is the documented way to preview all spinners live. The README does not document bare React Native setup separately.

## Sources

- [Eronred/expo-agent-spinners on GitHub](https://github.com/Eronred/expo-agent-spinners)
- [Issues](https://github.com/Eronred/expo-agent-spinners/issues)
- [Project website](https://reactnativecomponents.com/)
- [README](https://github.com/Eronred/expo-agent-spinners/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/eronred-expo-agent-spinners