This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

React Native: Error Handling and ActivityIndicatorIOS

2:51 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Yoni

Any ideas why my ActivityIndicatorIOS spinner doesn't come out centered?

In reply to egghead.io
Avatar
Tyler

Sounds like a CSS issue. If your code is on github send me a link and I'll take a look.

In reply to Yoni
Avatar
Dan

Yoni - I had the same issue but solved it by adding the following rule to the mainContainer CSS:

mainContainer: {
...
alignItems: 'center'
}

In reply to Yoni
Avatar

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.

Avatar
James

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.

In reply to
Avatar
geoff

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
  }
In reply to James
Avatar
Daniel

Since ActivityIndicatorIOS is deprecated in the latest react-native, use ActivityIndicator

Avatar
Baptiste WAELS

Solved my problem, thanks

In reply to Daniel
Avatar
Laurie

Thanks for pointing this out Daniel :D

In reply to Daniel

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.

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.

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.

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?