The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Use React Native's Error Handle and ActivityIndicatiorIOS

Use React Native's Error Handle and ActivityIndicatiorIOS

2:51
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.
Watch this lesson now
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
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?