React-native: [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
                  );

[charpeni]

@facebook-github-bot label Icebox

[charpeni]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/activityindicatorandroid-indicator-stays-hidden-if-initialized-as-animatingfalse

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

[charpeni]

@facebook-github-bot close

[facebook-github-bot]

@charpeni tells me to close this issue. If you think it should still be opened let us know why.

[prithsharma]

Is this fixed? Is there any workaround?
The productpains post doesn't have any updates.

[fcpauldiaz]

I'm still having this error on RN 0.40

[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?

[alexsmartens]

+1 I have the same problem

[charpeni]

Let's reopen it then.

[changulpaye]

Did anyone find the solution? I am also stuck at the same problem.

[fcpauldiaz]

@changulpaye

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

[ocarreterom]

This is still happening in 0.54.4.

[djhr]

same here...

[yagoazedias]

Same here... using version 0.55.2

[alexsmartens]

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

[MardariG]

In 0.55.4 also happening

[TingAli]

This is still an issue to this day :(

[Bradzer]

Is there any way to work around that bug ?

[ocarreterom]

@Bradzer https://github.com/facebook/react-native/issues/9023#issuecomment-281440940

[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: https://github.com/facebook/react-native/pull/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