REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Core Primitives

Spinner

An animated loading indicator to communicate that an operation is in progress.

Example

Preview

Code

Props

Spinner Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the spinner container.

size

'sm' | 'md' | 'lg'

'md'

Controls the diameter of the spinner.

color

string

—

Overrides the spinner color.

Usage Guidelines

When to use

Use Spinner when content is loading or an async action is being processed.

Best practices

•

Show a spinner only for operations that take more than 300ms.

•

Pair with descriptive text to explain what is loading.

•

Use the appropriate size relative to the container.

Accessibility

Spinner includes a built-in accessibility label of "Loading". Customize with accessibilityLabel for specific contexts.

Related Components

Button

A compound interactive button component with text, icon, and spinner sub-components, supporting multiple actions, variants, and sizes.

Progress

A compound progress bar component that visually indicates the completion percentage of an operation.

Image

A styled image component with built-in size presets and border-radius options, requiring an accessible alt label.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License