ActivityIndicator
Important: The Vega SDK supports many of the React Native version 0.83 components and APIs. You can use the supported components and APIs in the same manner as an ordinary React Native app. This page lists a specific React Native feature supported by the Vega SDK and contains React Native V0.83 documentation from the reactnative.dev website created by Meta and other contributors and licensed under the Attribution 4.0 International License. For more information about React Native V0.83, see the React Native documentation, version 0.83. For the most current feature information, see the Release Notes.
Displays a circular loading indicator.
Example
import React from 'react';
import {ActivityIndicator, StyleSheet} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
const App = () => (
<SafeAreaProvider>
<SafeAreaView style={[styles.container, styles.horizontal]}>
<ActivityIndicator />
<ActivityIndicator size="large" />
<ActivityIndicator size="small" color="#0000ff" />
<ActivityIndicator size="large" color="#00ff00" />
</SafeAreaView>
</SafeAreaProvider>
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
horizontal: {
flexDirection: 'row',
justifyContent: 'space-around',
padding: 10,
},
});
export default App;
Reference
Props
View Props
Inherits View Props.
animating
Whether to show the indicator (true) or hide it (false).
| Type | Default |
|---|---|
| bool | true |
color
The foreground color of the spinner.
| Type | Default |
|---|---|
| color | null (system accent default color)Android / '#999999' iOS |
hidesWhenStopped iOS
Whether the indicator should hide when not animating.
| Type | Default |
|---|---|
| bool | true |
ref
A ref setter that will be assigned an element node when mounted.
size
Size of the indicator.
| Type | Default |
|---|---|
enum('small', 'large') / number Android |
'small' |
Last updated: Jul 08, 2026
