ReactNative ActivityIndicator not showing when animating property initiate false

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

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.

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.