Spinner

A loading spinner component with size variants, built on React Native's ActivityIndicator.

import { Spinner } from "@/components/ui/spinner";

export function MyScreen() {
  return <Spinner />;
}

Installation

npx @aniui/cli add spinner

Usage

app/index.tsx

import { Spinner } from "@/components/ui/spinner";

export function MyScreen() {
  return <Spinner />;
}

Sizes

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />

Props

PropTypeDefault

size

"sm" | "md" | "lg"

"md"

color

string

"hsl(240, 5.9%, 10%)"

className

string

—

Also accepts all View props from React Native.

Source

components/ui/spinner.tsx

import React from "react";
import { ActivityIndicator, View } from "react-native";
import { cn } from "@/lib/utils";

const sizeMap = { sm: "small", md: "small", lg: "large" } as const;
export interface SpinnerProps extends React.ComponentPropsWithoutRef<typeof View> {
  className?: string;
  size?: "sm" | "md" | "lg";
  color?: string;
}
export function Spinner({ size = "md", color, className, ...props }: SpinnerProps) {
  return (
    <View className={cn("items-center justify-center", className)} {...props}>
      <ActivityIndicator
        size={sizeMap[size]}
        color={color ?? "hsl(240, 5.9%, 10%)"}
        accessibilityRole="progressbar"
      />
    </View>
  );
}