Spinner

Spinners are designed to give visual cues to users that an action is being processed or that a change or result is expected. They are useful for improving the user experience by reducing frustration and uncertainty.
Installation
API Reference
Spec Doc
This is an illustration of Spinner component.
size
<Spinner size="small" />

Installation

Step 1: Install the following dependencies:

npm i @gluestack-ui/spinner

Step 2: Copy and paste the following code into your project.

import { ActivityIndicator } from "react-native"
import { styled } from "@gluestack-style/react"
import { createSpinner } from "@gluestack-ui/spinner"
const StyledRoot = styled(
ActivityIndicator,
{
props: {
color: "$primary500",
},
},
{
resolveProps: ["color"],
},
{
propertyTokenMap: {
size: "size",
},
}
)
export const Spinner = createSpinner({ Root: StyledRoot })

Step 3: Update the import paths to match your project setup.

API Reference

To use this component in your project, include the following import statement in your file.
import { Spinner } from "@/components/ui/Spinner"
export default () => <Spinner />

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

Spinner

Contains all Spinner related layout style props and actions. It inherits all the properties of React Native's ActivityIndicator component.

Accessibility

We have outlined the various features that ensure the Fab component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.

Keyboard

  • Tab: Moves focus to the next focusable element.

Screen Reader

  • VoiceOver: When the Spinner is focused, the screen reader will announce the loading indicator.
Edit this page on GitHub