⚠️ This lesson is retired and might contain outdated information.

Use React Native's Error Handle and ActivityIndicatiorIOS

InstructorTyler McGinnis

Share this video with your friends

Send Tweet

Published 9 years ago

Updated 2 years ago

With React Native you use ActivityIndicatorIOS to show or hide a spinner. In this lesson we combine ActivityIndicatorIOS with our HTTP requests in order to give the user feedback about data loading.

View code on GitHub

[00:00] You'll notice if I search for username, the data's loading when I click Search, but we don't get that loading in the Github bar. Even though we have that isLoading property on the state object, we're not really using it yet. Another thing, the main component is missing. If I search for a username that's not found, it doesn't give me any feedback. Let's go ahead and add those things.

[00:23] First, we're going to create a variable up here called showErr. What this is going to be is it's going to be a text element which will show if there's an error and not show if there's not an error. We're going to say, this.state.error, if that's a thing, then showErr is going to be this text component with the actual name of the error there. If it's not a thing, then just render this empty view.

[00:59] Down here, what we can do is we can throw showErr in there. Now, if there's an error, this will show with the error message. If there's not, then nothing will show. Also, what we want to do is, earlier we added our ActivityIndicatorIOS, we actually want to use that.

[01:20] What's going to happen is you'll notice that we're keeping track of this isLoading state the whole time. We want to say if isLoading is true, go ahead and show this spinner. If it's not, then don't show it.

[01:36] Down here, we're going to type ActivityIndicatorIOS. We're going to give it a few properties. This animating is a Boolean so this is going to be the true or false and this is what will tackle that if it shows. Color, let's just set it to a nice 111. Size, let's have it be large. Then, we'll end that off.

[02:03] Now, what should happen is we click on this button. It runs handleSubmit. That goes and runs this function. It sets the state loading is true. Then, loading is going to be true until we get a response back from our fetch call or our fetch invocation which will then set isLoading to false, either if there's an error or if the data is correct. Let's see if this works now.

[02:34] Let's go ahead and search for username. What we expect to see is when I hit Search, we should see a spinning indicator right here. There it is. Now, if I search for a username that doesn't exist, we should see "user not found." There we go.

~ 8 years ago

Hey, I found some strange with my ActivityIndicatorIOS component.

      <ActivityIndicatorIOS
          animating={this.state.isLoading}
          color="#111"
          size="large">
        </ActivityIndicatorIOS>

The first time the Main page opens, the indicator shows even the animating property is false. And when you search something and back to the main page, the indicator begins to disappear. It's so wired. I use the react-native 0.27.2.

James Boyd

~ 8 years ago

I have the same issue.

Hey, I found some strange with my ActivityIndicatorIOS component.
      <ActivityIndicatorIOS
          animating={this.state.isLoading}
          color="#111"
          size="large">
        </ActivityIndicatorIOS>
The first time the Main page opens, the indicator shows even the animating property is false. And when you search something and back to the main page, the indicator begins to disappear. It's so wired. I use the react-native 0.27.2.

geoff

~ 8 years ago

Looks like a known issue in 0.27: https://github.com/facebook/react-native/issues/7987

I "fixed" it setting a variable style based on the isLoading state, right before calling the render method:

var indicatorVisibility = (
      this.state.isLoading ? styles.visible : styles.hidden
    )

<TouchableHighlight 
            style={[styles.button, !this.state.isLoading && styles.visible, this.state.isLoading && styles.hidden]}
            onPress={this.handleSubmit.bind(this)}
            underlayColor="white">
            <Text>Submit</Text>
</TouchableHighlight>```

hidden: { opacity: 0 }, visible: { opacity: 1 }