React Native Material - Implementing a loading indicator upon button press

Question

React Native Material - Implementing a loading indicator upon button press

With React Native Material, I am trying to implement a loading feature when a button is clicked. The goal is to show the "loading" message only when the button is active, and hide it otherwise. Additionally, I would like for the loading message to disappear either after 5 seconds or when navigating to a different page.

My attempt at using an if statement within the onPress function to display the loading message resulted in an error.

https://i.stack.imgur.com/j8Nyo.png

Code:

<Button
title="Submit Answers"
onPress={CalculateTotal}
loading
/>

javascript typescript react-native material-ui

Answer 1

Answer №1

To ensure a smooth transition when navigating to this component from another page, create a state variable called 'loading' and initialize it as false. Whenever the button is clicked, set loading to true and implement a timeout function to automatically disable it after a certain period of time.

 const [loading, setLoading] = useState(false);
  
   const handleButtonClick = () => {
      setLoading(true);
      setTimeout(() => {
        setLoading(false);
      }, 5000)
    }

  <Button
   title="Submit Answers"
   onPress={handleButtonClick}
   loading={loading}
 />

Answer 2

To ensure a smooth transition when navigating to this component from another page, create a state variable called 'loading' and initialize it as false. Whenever the button is clicked, set loading to true and implement a timeout function to automatically disable it after a certain period of time.

 const [loading, setLoading] = useState(false);
  
   const handleButtonClick = () => {
      setLoading(true);
      setTimeout(() => {
        setLoading(false);
      }, 5000)
    }

  <Button
   title="Submit Answers"
   onPress={handleButtonClick}
   loading={loading}
 />

Answer 3

Answer №2

In order to update the loading state based on a button press, you will first need to establish a loading state and then modify it accordingly. Here is an example:

const [isLoading, setIsLoading] = useState(true);
return (
<Button
   onPress={() => setIsLoading(!isLoading)}
   title="Submit Answers"
   onPress={CalculateTotal}
   isLoading={isLoading}
 />
)

Answer 4

In order to update the loading state based on a button press, you will first need to establish a loading state and then modify it accordingly. Here is an example:

const [isLoading, setIsLoading] = useState(true);
return (
<Button
   onPress={() => setIsLoading(!isLoading)}
   title="Submit Answers"
   onPress={CalculateTotal}
   isLoading={isLoading}
 />
)

React Native Material - Implementing a loading indicator upon button press

Answer №1

Answer №2

Similar questions

Express & React: Be cautious of client checksum and style while server-side rendering

Leverage vuejs' this.$refs to work with multiple elements at once

Inefficiency in POST method prevents data transmission to MongoDB

Having difficulty uploading files using FormData in JavaScript, as $_FILES is returning empty

The TS-Mocha and Chai duo have encountered a hitch: a peculiar error message, TS2695, informing them that the left side of the

Issue with AJAX Complete event not functioning

Excessive delay in executing Javascript loops

Steps for sending a request to the root resource

My middleware produces different results when used by Postman compared to when used by a Browser

Error caused by properties of a variable derived from an interface in the compiler

Disabling an anchor using the 'disabled' property is proving to be a challenge for me

A common occurrence is for jQuery/Javascript Ajax POST to generate 6 identical posts when used within a .each loop, happening approximately 20

Building SVG components in React with TypeScript and styling them using SCSS

Updating the image sources of a group of image tags with a predetermined list

Utilizing ngModel within a nested ngFor loop in Angular to capture changing values dynamically

Why do we need to use [`expression`] notation?

Can ng-content be utilized within the app-root component?

Webpage video stalling due to buffering

Issues arise with AJAX post

Parent Route Abstractions in Vue-Router