ActivityIndicator Component
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
Code Description
-
Lines 11-12:
isLoading
: Manages the loading state, initialized asfalse
.additionalData
: Holds additional data fetched, initialized as null. -
Lines 14-21: Simulates data fetching by setting
isLoading
totrue
and then, after a delay of 3 seconds, setsisLoading
tofalse
and updatesadditionalData
. - Lines 26-28: Triggers data fetching when pressed.
-
Lines 29-35: Conditional Rendering
({isLoading ? ... : ...})
Renders anActivityIndicator
while loading (isLoading
istrue
).
Renders additional data (additionalData
) when loading is complete (isLoading
isfalse
) andadditionalData
is available.
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
Tudo estava claro?
Conteúdo do Curso
Foundations of React Native
Foundations of React Native
ActivityIndicator Component
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
Code Description
-
Lines 11-12:
isLoading
: Manages the loading state, initialized asfalse
.additionalData
: Holds additional data fetched, initialized as null. -
Lines 14-21: Simulates data fetching by setting
isLoading
totrue
and then, after a delay of 3 seconds, setsisLoading
tofalse
and updatesadditionalData
. - Lines 26-28: Triggers data fetching when pressed.
-
Lines 29-35: Conditional Rendering
({isLoading ? ... : ...})
Renders anActivityIndicator
while loading (isLoading
istrue
).
Renders additional data (additionalData
) when loading is complete (isLoading
isfalse
) andadditionalData
is available.
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
Tudo estava claro?