React Native Material - How to display loading when button is pressed-CodePudding

I am using React Native Material and i would like to use "loading" when a button is clicked. When the button is not clicked, it should only display the button. Is it also possible when loading is displayed, it will disappear after 5 seconds or when i navigate to a different page?

I have tried to use an if statement when onPress is clicked to display loading but this displays an error.

https://www.react-native-material.com/docs/components/button

Code:

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

CodePudding user response：

Create a state variable for loading and set it false. So that whenever navigating to the component from another page, that will disable the loading.set loading true on button click and add a timeout for disabling it.

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

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

CodePudding user response：

You need to create a loading state and change that state according to button press ex:

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