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

If in your project you can use third party components, I recommend the use of react-native-loading-spinner-overlay

Solved easily our problems, beacause this component use a similar way to show or hide the Activity with the property visible.

Answer 2

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 3

The transition of animating from false to true is too slow on Android. But you can force a re-render using the key prop:

<ActivityIndicator
  key={`${props.animating}`}
  animating={props.animating}
/>

When props.animating changes from false to true, they key also changes. This forces a re-render, meaning that a new component is rendered with animating = true, which will instantly start your spinner.

Answer 4

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