Use React Native's Error Handle and ActivityIndicatiorIOS

Tyler McGinnis
InstructorTyler McGinnis

Share this video with your friends

Send Tweet

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.

~ 5 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
James Boyd
~ 5 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
geoff
~ 5 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 }

Daniel
Daniel
~ 4 years ago

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

Baptiste Waels
Baptiste Waels
~ 4 years ago

Solved my problem, thanks

Canh
Canh
~ 4 years ago

Thanks!

Laurie
Laurie
~ 4 years ago

Thanks for pointing this out Daniel :D

SEQTA
SEQTA
~ 4 years ago

Thanks!

Jonathan
Jonathan
~ 3 years ago

Hey Tyler nice spaghetti code. Is react for Christ sake how about using self closing tags?!