Creating Customized Activity Indicators in React Native

Using the Inbuilt ActivityIndicator Component

The ActivityIndicator component is a built-in React Native component that displays a circular loading indicator. We can customize it by changing its size, color, and animation.

import React from 'eact';
import { ActivityIndicator } from 'eact-native';

const App = () => {
  return (
    <ActivityIndicator>
  );
};

We can customize the ActivityIndicator by adding props such as size, color, and animating.

Customizing the ActivityIndicator

To create a customized activity indicator, we can use the style prop to change its appearance.

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

const App = () => {
  return (
    <View style={styles.container}>
      <ActivityIndicator size="large" color="#0000ff" animating={true} />
    </View>
  );
};

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

Using Community Libraries

There are several community libraries available that provide customized activity indicators. Two popular libraries are react-native-progress and react-native-loading-spinner-overlay.

React Native Progress

react-native-progress provides a customizable progress indicator that can be used as an activity indicator.

import React from 'eact';
import { ProgressBar } from 'eact-native-progress';

const App = () => {
  return (
    <ProgressBar progress={0.5} width={200} />
  );
};

React Native Loading Spinner Overlay

react-native-loading-spinner-overlay provides a customizable loading spinner overlay that can be used as an activity indicator.

import React from 'eact';
import { LoadingSpinnerOverlay } from 'eact-native-loading-spinner-overlay';

const App = () => {
  return (
    <LoadingSpinnerOverlay visible={true} textContent={'Loading...'} />
  );
};

Using the Animated API

We can also create customized activity indicators using the Animated API. This allows us to create more complex and interactive animations.

import React from 'eact';
import { Animated, View, StyleSheet } from 'eact-native';

const App = () => {
  const animation = new Animated.Value(0);

  Animated.loop(
    Animated.timing(animation, {
      toValue: 1,
      duration: 1000,
    }),
  ).start();

  return (
    <View style={styles.container}>
      <Animated.View
        style={{
          transform: [{ scale: animation }],
        }}
      >
        <ActivityIndicator size="large" color="#0000ff" animating={true} />
      </Animated.View>
    </View>
  );
};

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

We can customize the animation by changing the toValue, duration, and other properties of the Animated.timing function.