Spinner | NativeBase

3.4.x

Search

⌘

K

Introduction

Getting Started

Setup NativeBase Provider

Resources

Core Concepts

Features

Color mode (Dark Mode)

NativeBase Factory

SafeAreaView Props

Theme

Customizing Theme

Customizing Fonts

Customizing Components

Making components dark mode compatible

Layout

VStack / Column

Forms

Data Display

Feedback

Typography

Typography

Disclosure

Media and Icons

Transition

PresenceTransition

Others

ReactNative Components

KeyboardAvoidingView

Hooks

useBreakpointValue

useColorModeValue

useContrastText

useAccessibleColors

Examples

Community Integration

React Hook Forms

Recipes

Designs

Drawer Navigation

Forms

Form with Validation

Login/Signup Forms

Layout

Migration

Components Migration

More

IMPORTANT MESSAGE — If you are starting a new project with NativeBase, we recommend using gluestack-ui instead.

Explore gluestack-ui

Spinner

Examples

Basic


Playground
const Example = () => {
  return <HStack space={2}>
      <Heading color="primary.300">Spinner</Heading>
      <Spinner accessibilityLabel="Loading posts" />
    </HStack>;
};const Example = () => {
  return <HStack space={2}>
      <Heading color="primary.300">Spinner</Heading>
      <Spinner accessibilityLabel="Loading posts" />
    </HStack>;
};

Colors


Playground
const Example = () => {
  return <HStack space={2}>
      <Spinner color="danger.400" />
      <Spinner color="blue.500" />
      <Spinner color={useColorModeValue("gray.900", "gray.100")} />
      <Spinner color="warning.500" />
    </HStack>;
};const Example = () => {
  return <HStack space={2}>
      <Spinner color="danger.400" />
      <Spinner color="blue.500" />
      <Spinner color={useColorModeValue("gray.900", "gray.100")} />
      <Spinner color="warning.500" />
    </HStack>;
};

Sizes


Playground
const Example = () => {
  return <HStack space={3}>
      <Spinner size="sm" />
      <Spinner size="lg" />
    </HStack>;
};const Example = () => {
  return <HStack space={3}>
      <Spinner size="sm" />
      <Spinner size="lg" />
    </HStack>;
};

Props

Spinner implements

,

,

style

Style to be passed in ActivityIndicator

Type: any

size

Size of Spinner

Type: number | "small" | "sm" | "lg" | "large"

accessibilityLabel

Accessibility label. This will be announced by screen reader when a user hovers or touches the spinner.

Type: string

Spinner composes

ActivityIndicator

so all ActivityIndicator Props can be passed to Spinner.

Quick Nav

MadeWithNativeBase