Android: Determinate circles disappear after screen display turned off until next update

[abrahambotros]

On Android, when the screen display is turned off, any determinate circles disappear until they are next updated. For determinate circles that are static and never updated, this means they permanently disappear after the screen display is toggled.

See the gif below of the Example app for a visual, with the update timeouts slowed down a bit. Note that the circles disappear until the next timeout update; at the end, after the periodic updates are complete, the circles are permanently gone.

Tested on Android 7.1.1 Nexus 5X simulator, and also seen in external use on Samsung Galaxy S7 and Samsung Galaxy S7 Edge devices running Android 7+.

Any ideas on potential fixes? A hacky solution for now for external apps might be to listen for React Native AppState updates and force re-rendering of these circles when the app becomes foreground/screen is turned back on, but obviously this is sub-optimal.

[TsuryKnox]

Having this on my Nexus 6p

[TsuryKnox]

Anyone managed to get around this issue?

[Gringox]

@abrahambotros did you manage to get a workaround?

[Gringox]

I try to look at the library code to see what was happening but find it too difficult to read since I am not a experience react native developer.

But I manage to get a workaround at this by binding the value of progress to a local state property and then listening to AppState to change it, but this was not enough for it to re-render, the state had to be different (weird) and I also had to added a this.forceUpdate. As @abrahambotros said "obviously this is sub-optimal", gonna leave like this for the time being and wait until a fix comes out.

Here is the code:

...
state = {
    percentage: 4 / 12
  };

  componentDidMount() {
    if (Platform.OS === 'android') {
      AppState.addEventListener('change', this.handleAppStateChange);
    }
  }

  componentWillUnmount() {
    if (Platform.OS === 'android') {
      AppState.removeEventListener('change', this.handleAppStateChange);
    }
  }

  handleAppStateChange = appState => {
    if (appState === 'background') {
      this.setState({ percentage: 5 / 1000 });
      this.forceUpdate();
    } else if (appState === 'active') {
      this.setState({ percentage: 4 / 12 });
      this.forceUpdate();
    }
  };

  getCircle() {
    return (
      <Circle
        size={125}
        color={'black'}
        unfilledColor={'#9E9E9E'}
        borderColor={'rgba(0,0,0,0)'}
        thickness={3}
        progress={this.state.percentage}
        showsText
        formatText={() => '4 / 12'}
      />
    );
  }

  render() {
    return (
      <View>
        {this.getCircle()}
      </View>
    );
...

[abrahambotros]

@TsuryKnox and @Gringox, nope, no fix here yet. Still waiting for a native fix or hint on where to look from someone more familiar with the underlying code.

@Gringox thanks for posting your code. To get around that, maybe you could either unmount/nullify the Circle when the appState goes to background, or maybe just change the color from transparent when background to the actual color when active?

[npinochet]

It has something to do with the animation, I set the animated prop to false and it got fixed.

[adam-o-neill]

Setting animated prop to false didn't work for me :/ Did anyone find any solutions other than handling the app state change?

[yaoguangdong]

this code fix it（base on @Gringox ‘s comment）：

handleAppStateChange = appState => { if (appState === 'active') { this.setState({ progress:this.state.progress + 0.0001 }); } };

[fendorio]

+1 Seeing this also

[mo-patel]

None of the above recommendations worked for me. Upon further research, this seems to be an issue with the React Native ART library as you can see here https://github.com/facebook/react-native/issues/17565

I ended up fixing this by manually applying the changes from this commit https://github.com/lekamj/react-native-circular-progress/commit/60fc3bcba8f07fffa866f730dddedd5f2da554d8 to the Circle.js file of this library. However, this workaround is not nice at all and I would recommend waiting for the RN team to come out with a more efficient fix