Going to foreground from the background

[ramilcatalandomingo]

I am using Ionic 5 with Capacitor and the component works well when my app starts but when I put it to the background and then the foreground, the progress bar is stuck and no longer moves. Even if I set the properties lazy: false or animation: false.

[bootsoon]

What does "stuck" mean? Circle did not change when progress changed? @ramilcatalandomingo

[ramilcatalandomingo]

Here is the video link just in case you did not receive it.

https://drive.google.com/file/d/1VJRsgf6W_Gvymnv84QQcXcVuA2e--IjT/view?usp=sharing

Thank you!

[bootsoon]

Try this.circleProgress.render() when your app recovers from the background.

[ramilcatalandomingo]

Here is my declaration @ViewChild(CircleProgressComponent) circleProgress: CircleProgressComponent;

Here is my ngOnInit()

` async ngOnInit() { await LocalNotifications.requestPermission();

App.addListener('appStateChange', (state) => {
  if (!state.isActive) {
    // The app has become inactive. We should check if we have some work left to do, and, if so,
    // execute a background task that will allow us to finish that work before the OS
    // suspends or terminates our app:

    let taskId = BackgroundTask.beforeExit(async () => {
      // In this function We might finish an upload, let a network request
      // finish, persist some data, or perform some other task

      this.setTimeLeft().then(() => { this.stopTimer(); });

      // Must call in order to end our task otherwise
      // we risk our app being terminated, and possibly
      // being labeled as impacting battery life

      BackgroundTask.finish({
        taskId
      });
    });
  } else {
    this.getTimeLeft().then(() => { this.startTimer(true); });
  }
})

} `

Here is my startTimer()

startTimer(resume) { this.circleProgress.render(); }

But it does not work still.

[bootsoon]

<circle-progress *ngIf="isActive" ...></circle-progress>

Try setting isActive when recovering from the background.

[ramilcatalandomingo]

It did not work. Here is my code block.

<circle-progress #circleProgress *ngIf="isActive" [percent]="percent" [maxPercent]="100" [radius]="radius" [showTitle]="false" [showSubtitle]="true" [subtitle]="remainingTime" [subtitleFontSize]="40" [showUnits]="false" [outerStrokeWidth]="16" [outerStrokeColor]="'#f763c6'" [showZeroOuterStroke]="false" [backgroundStroke]="'#f081cb'" [backgroundStrokeWidth]="3" [outerStrokeGradient]="true" [lazy]="false" [outerStrokeGradientStopColor]="'#9c0269'" [showInnerStroke]="false"></circle-progress>

@ViewChild(CircleProgressComponent) circleProgress: CircleProgressComponent;

startTimer(resume) { this.isActive = true; this.circleProgress.render(); }