Show a Spinner while Submitting a Form in React Native with ActivityIndicator
Once the user submits the form, we’ll take all the information in the text inputs and the camera image, and upload it to our HTTP server. While the data is uploading, we’ll show the native spinner, and disable the submit button so the user cannot click submit multiple times.
Instructor: [00:00] On the HeaderView screen, set an onPress on the submit button and make the submit review function, which will automatically submit review to our demo server with fetch.
[00:16] After the server response, we'll just dismiss the model by calling goBack on navigation. This works just fine, but if we look at our demo server is a set timeout for two seconds when a review is posted to simulate a long response time on request.
[00:32] In header-view.js, import ActivityIndicator from React native which we can use to show a spinner while the user is waiting for the response to return. We'll add a bit of state to track whether or not the form is submitting, and we can get the ActivityIndicator with that submitting state.
[00:51] The ActivityIndicator can be small or large and we can specify the color as a prop. We could also add style like a normal view. We'll put some padding around it as well. Then, we just have to set the submitting state to true before we do a post.
[01:11] We're dismissing the entire module after the fetch is over here. We would have to set submitting to false, but we could do here if we wanted to. If we had a catch on this fetch and that's the place to turn off the submitting flag as well.
[01:28] Now when we reload and go to submit our review, we get a spinner for a couple of second before the module is dismissed. The last piece to note is that showing an ActivityIndicator doesn't actually do anything to prevent multiple submissions of the same form.
[01:46] We'll also want to make sure to actually disable the submit button when the form is submitting. Otherwise, we could submit the form multiple times.