ReactNative ActivityIndicator not showing when animating property initiate false

Question

I\'m playing with react native and got a strange behaviour.

When I try to show a ActitvityIndicator for Android setting its animating property

Answer 1

i got this problem all by a mistake. i did not put ActivityIndeicator in the center of a view. so it positioned on top of a view, which is covered by a natigation bar. code below is correct. hope this can help u.

<View style={{alignItems: 'center', justifyContent: 'center', flex: 1, backgroundColor: 'white'}}>
  <ActivityIndicator
    animating={true}
    style={
      {
        alignItems: 'center',
        justifyContent: 'center',
        opacity: this.state.loading ? 1 : 0
      }}
    size="large"
  />
</View>

Answer 2

A quick fix Use conditional rendering.. Keep animating : {true} and just Visible and invisible view.

Checkout :

https://kylewbanks.com/blog/how-to-conditionally-render-a-component-in-react-native

Answer 3

The only problem I had with this, was that in Android it wasn't visible because of the background I had on my screen. I fixed by only changing the color prop to something I knew should stand out in the background:

<ActivityIndicator color={theme.secondary.color} />

Answer 4

This appears to be a bug in React Native. The code with initial state being showProgress: false works on iOS but not on Android.

I've opened an issue on github if you want to follow the progression: https://github.com/facebook/react-native/issues/9023

Option 1

A workaround I've used is to use the showProgress variable to render a completely different view with the ActivityIndicator:

render() {
    if (this.state.showProgress) {
        return this.renderLoadingView();
    } else {
        return this.renderMainView();
    }
}

Option 2

You can also set the opacity of the ActivityIndicator according to the state:

render() {
    return (
        <View>

            <TouchableHighlight onPress={this.progressOff.bind(this)}>
                <Text>progressOff</Text>
            </TouchableHighlight>

            <TouchableHighlight onPress={this.progressOn.bind(this)}>
                <Text>progressOn</Text>
            </TouchableHighlight>

            <ActivityIndicator style={{opacity: this.state.showProgress ? 1.0 : 0.0}} animating={true} size="large"/>
        </View>
    );
}

However the spinner animation doesn't always start at the same position when using this method.

Answer 5

This is a bug of React-Native for component Activity Indicator. I am not sure that fb has already solved it but you can try this

 constructor(props) {
        super(props);
        this.state = {
            opacity: 0
        };
    }

to show it use this.setState({opacity:1}) and to hide again this.setState({opacity:0}) in your called functions

and in the render where you are using activity indicator

 <ActivityIndicator
    animating={true}
    color="#ffffff"
    style={{height: 80, marginTop: 10, opacity: this.state.opacity }}
    size="large"/>

Answer 6

Another way I found effective to work around that problem without much code is:

{ this.state.showProgress &&
  <ActivityIndicator animating={true} size="large"/>
}