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

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 (
        

            
                progressOff
            

            
                progressOn
            

            
        
    );
}

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