Guías Técnicas

Uso de ActivityIndicator para mostrar carga en React Native

  ¿Qué es ActivityIndicator en React Native?

El componente ActivityIndicator muestra un ícono de carga circular que indica que una operación está en proceso, como cargar datos desde una API o procesar información. Es comúnmente utilizado para mejorar la experiencia de usuario mientras se espera que la aplicación complete tareas asincrónicas.

ActivityIndicator Básico

jsx 
import React, { useState, useEffect } from 'react';
import { ActivityIndicator, View, StyleSheet, Text } from 'react-native';

const LoadingIndicator = () => {
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  // Simula una carga de 3 segundos
  const timeout = setTimeout(() => {
    setIsLoading(false);
  }, 2000);

  return () => clearTimeout(timeout);
}, []);

return (
  <View style={styles.container}>
    {isLoading ? (
      <ActivityIndicator size="large" color="#0000ff" />
    ) : (
      <Text style={styles.text}>¡Contenido cargado!</Text>
    )}
  </View>
);
};

const styles = StyleSheet.create({
container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
},
text: {
  fontSize: 20,
  color: '#333',
},
});

export default LoadingIndicator;
  📝 Nota

  • size="small" o size="large": Controla el tamaño del indicador de carga.
  • color="#0000ff": Define el color del círculo de carga. Puedes usar cualquier color válido.

💡 Personalización del ActivityIndicator

Puedes ajustar el tamaño, color y hasta el estilo del indicador de carga. En este escenario, observas un ejemplo con un indicador más pequeño y color personalizado:

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

const CustomLoadingIndicator = () => {
return (
  <View style={styles.overlay}>
    <View style={styles.loaderContainer}>
      <ActivityIndicator size="large" color="#ff6347" />
      <Text style={styles.loadingText}>Cargando...</Text>
    </View>
  </View>
);
};

const styles = StyleSheet.create({
overlay: {
  flex: 1,
  backgroundColor: 'rgba(0,0,0,0.3)', // fondo semitransparente
  justifyContent: 'center',
  alignItems: 'center',
},
loaderContainer: {
  backgroundColor: '#fff',
  padding: 20,
  borderRadius: 12,
  alignItems: 'center',
  elevation: 5, // sombra en Android
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.25,
  shadowRadius: 3.84,
},
loadingText: {
  marginTop: 10,
  fontSize: 12,
  color: '#333',
},
});

export default CustomLoadingIndicator;

⚙️ Props útiles

PropiedadDescripción
sizeTamaño del indicador: small o large.
colorColor del indicador. Puedes usar cualquier color CSS válido.
animatingBooleano que controla si el indicador está animado o no.
hidesWhenStoppedSi se debe ocultar cuando el indicador deje de estar activo. Por defecto es true.
stylePuedes agregar estilos personalizados al componente.