[ActivityIndicator][Android] Indicator stays hidden if initialized as animating={false}

[kulmajaba]

Originally discovered on http://stackoverflow.com/questions/38579665/reactnative-activityindicator-not-showing-when-animating-property-initiate-false

If ActivityIndicator is initialized with animating={false}, the Indicator will stay hidden even when changing animating to true. When initialized as animating the changes behave as expected.

Tested on Android emulator and Device, running Android 6.0 and 6.0.1. Also tested on iOS device which works as expected. Testing done with Windows 8.1.

'use strict'

import React, { Component } from 'react';
import {
    AppRegistry,
    Text,
    View,
    TouchableHighlight,
    ActivityIndicator
} from 'react-native';

class SampleApp extends Component {
    constructor() {
        super();

    this.state = {
            show: false
        };
    }

    render() {
        return (
            <View>
                <TouchableHighlight onPress={ () => this.setState({show: false}) } >
                    <Text>HIDE</Text>
                </TouchableHighlight>

                <TouchableHighlight onPress={ () => {this.setState({show: true}) } >
                    <Text>SHOW</Text>
                </TouchableHighlight>

                <ActivityIndicator animating={this.state.show} size="large"/>
            </View>
        );
    }
}

AppRegistry.registerComponent('SampleApp', () => SampleApp);

[alannesta]

@kulmajaba Which react-native version are you using ?
I got the same issue on Android with react-native 0.28. Seems to be a bug with the animating property. Currently using the walkaround of either rendering the ActivityIndicator or completely hide it based on the state

[kulmajaba]

@alannesta Using React Native 0.30. I've used the same workaround, rendering a separate loading view when needed.

[antoinerousseau]

I have the opposite bug: it sometimes freezes instead of hiding

[esutton]

Same issue on React Native 0.32 on Android 6.0.1

ActivityIndicator did not work so I went back to AndroidProgressBar which had yellow box warning under 0.32 for manually calling a React.PropTypes validation function.

ActivityIndicator work-around was to use null when animating should be false

                  let spinner = (this.state.animate) ? (
                    <ActivityIndicator
                    animating={true}
                    size="small"
                    />
                  ) : (
                      null
                  );

[raphkr]

The simplest I did was

<ActivityIndicator
   animating={true}
   style = {{ opacity : this.state.animate ? 1 : 0 }}
/>

[Brian-Kaplan]

@raphkr i don't like that at all... Then it's always animating... not the best

[sryze]

I'm seeing this bug on Android too (Android 7.1 emulator). The opacity: 0 solution from this post worked for me:

http://stackoverflow.com/questions/38579665/reactnative-activityindicator-not-showing-when-animating-property-initiate-false

I think this issue needs to be reopened.

[mirzavu]

This one is simple and background is not clickable when loading. Manage the loading icon using this.state.loading

{ this.state.loading &&
     <View style={styles.loading}>
          <ActivityIndicator
                 animating = {true}
                 color = '#bc2b78'
                 size = "large"/>
     </View>
}

and in styles

loading: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F5FCFF88'
  }

[Dror-Bar]

Can confirm this is still happening in Android RN: 0.51.0.
I'm using a conditional JSX expression as a workaround but strange this hasn't been fixed yet.
Why was this closed at all if it's still an issue that needs to be addressed?

[charpeni]

Let's reopen it then.

[fcpauldiaz]

@changulpaye

<ActivityIndicator
   animating={true}
   style = {{ opacity : this.state.animate ? 1 : 0 }}
/>

[ocarreterom]

This is still happening in 0.54.4.

[alexsmartens]

It's definitely a problem, however solution proposed by @esutton worked out for me

[TingAli]

This is still an issue to this day :(

[Bradzer]

Is there any way to work around that bug ?

[ocarreterom]

@Bradzer #9023 (comment)

[ernanirst]

Still running into this on react-native 0.58.3

[lucasmotta]

Just ran with this issue on react-native 0.59.0 too. My solution was to pass a key prop to the ActivityIndicator to trigger a re-render:

return <ActivityIndicator animating={loading} key={loading ? 'loading' : 'not-loading'} />

[nhunzaker]

I took a layout snapshot of the example provided above, and it looks like the container for the progress indicator is displaying, but the actual indicator itself has width/height of 0:

For some reason the indicator's width/height isn't getting updated.

[nhunzaker]

I think I might have a fix for this here: #25354

Seems too trivial. Curious what others have to say.

[grantespo]

I have the latest version of RN, still getting this issue.

[borislemke]

Still getting this issue with RN 0.61.4