react native-tutorial

React Native ActivityIndicator

The component for displaying loading action is called React Native ActivityIndicator. It is the same as the Progress Bar and circular loader. It is employed to display the status of a protracted task so that the user may comprehend what is happening.

Properties

  • animating : show the indicator or not
  • color : set the foreground color of the spinner
  • size : ‘small’   how big the indicator is
  • hidesWhenStopped(iOS only) : hide the indicator when it stops

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.

Code

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:

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *