ActivityIndicator is a built-in React Native component used to display a loading spinner. It visually indicates that an operation such as data fetching or processing is in progress.
The ActivityIndicator component is imported from react-native and supports multiple props.
animating → Shows or hides the loader (boolean)size → small or largecolor → Spinner color
// Import ActivityIndicator and core components
import React from "react";
import { View, ActivityIndicator, StyleSheet } from "react-native";
const App = () => {
return (
<View style={styles.container}>
<ActivityIndicator size="large" color="#2563eb" />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
}
});
export default App;
A spinning loader appears at the center of the screen, indicating that the app is performing a background task. The spinner continues until the component is removed or animating is set to false.
In real applications, ActivityIndicator is often toggled using state. The simulator below mimics a React Native app fetching data. Click "Load Data" to see the ActivityIndicator in action.
(In React Native code, this corresponds to setting animating={true})
// ActivityIndicator controlled using state
import React, { useEffect, useState } from "react";
import { View, ActivityIndicator, Text } from "react-native";
const App = () => {
const [loading, setLoading] = useState(false);
const [data, setData] = useState(null);
const loadData = () => {
setLoading(true); // Show Spinner
// Simulate API delay
setTimeout(() => {
setLoading(false); // Hide Spinner
setData("✅ Data Loaded Successfully!");
}, 2000);
};
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
{loading ? (
<ActivityIndicator size="large" color="#2563eb" />
) : (
<Text>{data || "Press button to load"}</Text>
)}
</View>
);
};
export default App;