Use React Native's Error Handle and ActivityIndicatiorIOS

Share this video with your friends

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.

~ 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 }