React Native ActivityIndicator examples

Updated: January 26, 2022 By: A Goodman Post a comment

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:

PropTypeDefault ValueDescription
animatingbooltrueshow the indicator or not
colorcolorAndroid: null
iOS: ‘#999999’
set the foreground color of the spinner
sizeenum(‘small’, ‘large’)
number (Android only)
‘small’how big the indicator is
hidesWhenStopped
(iOS only)
booltruehide the indicator when it stops

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:

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

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles