React Native ActivityIndicator examples

This article is about the ActivityIndicator component in React Native.

Overview

ActivityIndicator is a built-in component in React Native that presents a circular progress indicator, which can spin to indicate that the app is busy doing something (making HTTP requests, processing files, etc).

Props:

Examples

The First Example

This example simply displays a loading indicator:

The code:

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

const App = () => {
  return (
    <View style={styles.screen}>
      {Platform.OS === "ios" ? (
        <ActivityIndicator size="large" color="purple" />
      ) : (
        <ActivityIndicator size={200} color="green" />
      )}
    </View>
  );
};

// just some styles for our app
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default App;

The Second Example

In this example, we’ll create a simple React Native app that has 2 buttons: Show and Hide.

• When you touch the Show one, our circle loading indicator will show up.
• The indicator will leave the screen when the Hide button is touched.

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

const App = () => {
  const [isShown, setIsShown] = useState(false);
  return (
    <View style={styles.screen}>
      <ActivityIndicator animating={isShown} size="large" color="#3b63b3" />
      <View style={styles.buttonWrapper}>
        {/* This button is touchable only when the indicator is hidden */}
        <Button title="Show" disabled={isShown} onPress={() => setIsShown(true)} />

        {/* This button is touchable only when the indicator is shown */}
        <Button title="Hide" disabled={!isShown} onPress={() => setIsShown(false)} />
      </View>
    </View>
  );
};

// just some styles for our app
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  buttonWrapper: {
    flexDirection: 'row'
  }
});

export default App;

When you run your app, it should look like this:

Conclusion

We’ve walked through a few examples of implementing the ActivityIndicator component. If you’d like to explore more new and exciting stuff about modern React Native, take a look at the following articles:

• How to Get the Window Width & Height in React Native
• How to Get Platform Information in React Native
• React Native: Make a Button with a Loading Indicator inside
• Using AsyncStorage in React Native: CRUD Example
• How to Implement a Picker in React Native

You can also check our React topic page and React Native topic page for the latest tutorials and examples.