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

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

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

Answer 3

I tried a different approach which I think that it is a more "react way" to solve problems. So, the problems with the opacity solution is that If you just set it to 0, it still will be a animation, so it is not the best solution thinking in your app performance.

I created a separated component that I called <Loading/>, here is the code:

import { ActivityIndicator } from "react-native"
import React from "react"
import PropTypes from "prop-types"

const Loading = (props) =>
    props.animating
        ? <ActivityIndicator style={props.style} 
               importantForAccessibility='auto' size={props.size} 
                     color={props.size} /> : null

Loading.propTypes = {
    animating: PropTypes.bool.isRequired,
    style: PropTypes.oneOfType([PropTypes.style, PropTypes.object]),
}

export default Loading

Usage:

<Loading animating={true} importantForAccessibility='auto' size="large" color="#A02BFF" style={styles.loading} />

That way it will avoid to create a animation when it is not a necessity, you will create separated component that can be removed easily at the point that the ActivityIndicator issue becomes solved in the future by replacing it to the original ActivityIndicator native component.

Answer 4

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 5

In my case, for react native version 0.59.10 , the size property type is different for Android and iOS, so for that I had to make a Platform check as following and it worked.

<ActivityIndicator 
                size={Platform.OS === "ios" ? 0 : "large"} //This platform check worked.
                color={props.color} 
                animating={props.animating}
                style={props.style}
                />

Answer 6

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.