Spinner

Installation

Spinner ships with the library — install it once, then import:

import { Spinner } from "@delacour/react-native-ui/spinner";

Or copy the source into your project, to own and edit it:

bunx delacour@latest add spinner

Usage

import { Spinner } from "@/components/ui/spinner";
import { View } from "react-native";

export default function Example() {
  return (
    <View className="flex-1 items-center justify-center p-4">
      <Spinner />
    </View>
  );
}

Sizes

The icon scale, shared outright — SPINNER_SIZES is ICON_SIZES, xs through 2xl (14/16/18/20/24/32pt) — or an explicit number.

<Spinner size="sm" />
<Spinner size="lg" />
<Spinner size={40} />

Colours

default, success, warning and destructive, plus any token the theme emits (primary-foreground, muted-foreground) or a literal (#EC4899).

<Spinner color="destructive" />
<Spinner color="muted-foreground" />
<Spinner color="#EC4899" />

Inherited size and colour

Both come from the nearest IconDefaultsProvider, falling back to md on foreground. An explicit size or color always wins.

Custom glyphs

Any child is the glyph, wrapped in a Spinner.Content automatically so it still rotates.

<Spinner color="destructive" size="lg" speed={0.4}>
  <Icon icon={IconArrowsRepeatCircle} />
</Spinner>

speed belongs to the root and rides the spinner's context, so every part turns at one rate: 1 is one full turn per 900ms.

API Reference

Spinner

Spinner.Content

The rotating layer itself. Written out by hand only when that layer needs styling — any child of Spinner is wrapped in one automatically.