Зміст курсу
Foundations of React Native
Foundations of React Native
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
Дякуємо за ваш відгук!