0
417
VistasReact Native Material - How to display loading when button is pressed
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
/>
2 Respuestas
Responde la pregunta0
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}
/>
0
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}
/>
)