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. Aquí te mostramos 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

Propiedad	Descripción
`size`	Tamaño del indicador: `small` o `large`.
`color`	Color del indicador. Puedes usar cualquier color CSS válido.
`animating`	Booleano que controla si el indicador está animado o no.
`hidesWhenStopped`	Si se debe ocultar cuando el indicador deje de estar activo. Por defecto es `true`.
`style`	Puedes agregar estilos personalizados al componente.