@rn-nui/loading-indicator

Native loading indicators for React Native with enhanced functionality and cross-platform support. Read more about the Material 3 Expressive loading indicator.

Installation

npm install @rn-nui/loading-indicator

or

yarn add @rn-nui/loading-indicator

iOS Setup

No additional setup required for iOS. The component uses React Native's ActivityIndicator.

Android Setup

You'll need to override the theme of your app under /android/app/src/main/res/values/styles.xml to inherit from Material3Expressive.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.Material3Expressive.DayNight.NoActionBar">
      <!-- Customize your theme here -->
    </style>
</resources>

Expo Setup

There is no plugin for Expo yet. You'll need to manually edit the native files as described above.

Usage

import { LoadingIndicator } from '@rn-nui/loading-indicator';

// Basic loading indicator
<LoadingIndicator />

// Customized loading indicator
<LoadingIndicator
  size={50}
  color="#007AFF"
  containerSize={80}
  containerColor="#F0F0F0"
/>

API Reference

LoadingIndicator

A loading indicator component that provides uses the new Material 3 Expressive loading indicator view on Android and ActivityIndicator on iOS..

Properties

Prop	Type	Platform	Default	Description
size	number | 'small' | 'large'	Both	38	Size of the loading indicator
color	ColorValue	Both	"#999999"	Color of the loading indicator
containerSize	number	Android	auto	Size of the background circle (Android only)
containerColor	ColorValue | undefined	Android	undefined	Background color of the circle surrounding the indicator. Set to undefined for no container
animating	boolean	Both	true	Whether the loader should be shown
hidesWhenStopped	boolean	iOS	true	Whether the indicator is hidden when animating is false

Size Options

• Number: Custom size in density-independent pixels for Android
• 'small': Small preset size (20dp)
• 'large': Large preset size (36dp)

Screenshots

Android with container	Android without container	iOS