How to Use ActivityIndicator in React Native: Simple Guide

In React Native, use the ActivityIndicator component to show a loading spinner. Import it from react-native, then place <ActivityIndicator /> in your JSX where you want the spinner to appear. You can customize its size and color with props like size and color.

Syntax

The ActivityIndicator component shows a spinning loader. It accepts these main props:

• size: Controls the spinner size. Use small or large (default is small).
• color: Sets the spinner color (default is gray).
• animating: Boolean to start or stop the spinner (default is true).

javascript

import { ActivityIndicator } from 'react-native';

<ActivityIndicator size="large" color="#0000ff" animating={true} />

Output

A large blue spinning loader appears on the screen.

Example

This example shows a centered blue spinner on a white background. It demonstrates how to import and use ActivityIndicator with custom size and color.

javascript

import React from 'react';
import { View, ActivityIndicator, StyleSheet } from 'react-native';

export default function LoadingSpinner() {
  return (
    <View style={styles.container}>
      <ActivityIndicator size="large" color="#1E90FF" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  }
});

Output

A full screen white background with a large blue spinner centered vertically and horizontally.

Common Pitfalls

Common mistakes when using ActivityIndicator include:

• Not importing it from react-native.
• Forgetting to wrap it in a container with styles to center it.
• Setting animating to false unintentionally, which hides the spinner.
• Using invalid values for size or color props.

Always test your spinner visibility and placement.

javascript

/* Wrong: No container styles, spinner may not be visible or centered */
<ActivityIndicator size="large" color="red" />

/* Right: Wrap in styled View to center */
import { View } from 'react-native';

<View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
  <ActivityIndicator size="large" color="red" />
</View>

Output

Wrong: Spinner may appear in top-left corner or not visible clearly.
Right: Spinner centered on screen in red color.

Quick Reference

Prop	Type	Description	Default
size	string	Spinner size: 'small' or 'large'	'small'
color	string	Spinner color in hex or color name	gray
animating	boolean	Show or hide spinner	true
hidesWhenStopped	boolean	Hide spinner when animating is false	true

Key Takeaways

Import ActivityIndicator from react-native to use the loading spinner.

Use size and color props to customize the spinner appearance.

Wrap ActivityIndicator in a styled container to center it on screen.

Set animating to true to show the spinner and false to hide it.

Test your spinner placement and visibility on different devices.