Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Show a Spinner while Submitting a Form in React Native with ActivityIndicator

    Chris AchardChris Achard
    react-nativeReact Native
    javascriptJavaScript
    androidAndroid
    iosiOS

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.

    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.

    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.