Managing Loading States with ActivityIndicator
Theory
The ActivityIndicator
component in is used to indicate that a task is ongoing, providing visual feedback to the user. It typically appears as a spinning wheel or other animated indicator to convey that the application is busy performing an operation.
Why Do We Need It?
Indicates that the application is working on a task, preventing the user from assuming the application has frozen.
How to Work with ActivityIndicator
- The
ActivityIndicator
is straightforward to use and does not require state management; - We can control its visibility by conditionally rendering it based on the status of a task.
Example
Explanation
- Initially, the component renders a welcome message using the
Text
component and a button using theTouchableOpacity
component; - When the button is pressed, the
fetchData
function is called, which setsisLoading
totrue
to display theActivityIndicator
; - After a 3-second delay (simulating data fetching), the
fetchData
function setsisLoading
back tofalse
and updates theadditionalData
state with some text; - The
ActivityIndicator
is displayed whileisLoading
istrue
, and onceisLoading
becomesfalse
, theadditionalData
is shown using theText
component.
Result
In Practice
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Awesome!
Completion rate improved to 3.45
Managing Loading States with ActivityIndicator
Swipe to show menu
Theory
The ActivityIndicator
component in is used to indicate that a task is ongoing, providing visual feedback to the user. It typically appears as a spinning wheel or other animated indicator to convey that the application is busy performing an operation.
Why Do We Need It?
Indicates that the application is working on a task, preventing the user from assuming the application has frozen.
How to Work with ActivityIndicator
- The
ActivityIndicator
is straightforward to use and does not require state management; - We can control its visibility by conditionally rendering it based on the status of a task.
Example
Explanation
- Initially, the component renders a welcome message using the
Text
component and a button using theTouchableOpacity
component; - When the button is pressed, the
fetchData
function is called, which setsisLoading
totrue
to display theActivityIndicator
; - After a 3-second delay (simulating data fetching), the
fetchData
function setsisLoading
back tofalse
and updates theadditionalData
state with some text; - The
ActivityIndicator
is displayed whileisLoading
istrue
, and onceisLoading
becomesfalse
, theadditionalData
is shown using theText
component.
Result
In Practice
Thanks for your feedback!