PDF Doesn't show after phone hits lock screen

[Jxckaroo]

This PDF viewer works fantastically, the only issue i seem to have is, once the PDF is loaded and i'm viewing it, if the phone goes to the lock screen and i unlock it again, the viewer just appears white and no PDF is visible.

Any ideas on a possible solution?

[limkek]

I have same issue with Nativescript Angular. Running demo which uses plain typescript nativescript does not has this problem.

[marcelofb]

any solution for this?

[interrobrian]

Found a pretty simple hack to work around this. All you need to do is make the PDF re-render on app resume. Miraculously, this solution doesn't even flicker. Only caveat is the scroll position will reset. Here's how to do it in NativeScript Angular - hopefully this is easy to translate to other flavors:

TypeScript:

import * as tnsApp from "tns-core-modules/application"
import { isAndroid } from "tns-core-modules/platform"
...
export class PdfViewComponent implements OnDestroy {
  // Setup callback function through property in order to bind and have a reference for unsubscribing
  private resumeEventHandler = this.refreshPdf.bind(this)
  private showPdf = true
  ...
  constructor(private ngZone: NgZone) {
    if (isAndroid) { // I only encountered this bug on Android
      tnsApp.on(tnsApp.resumeEvent, this.resumeEventHandler)
    }
  }
  public ngOnDestroy() {
    if (isAndroid) { 
      tnsApp.off(tnsApp.resumeEvent, this.resumeEventHandler)
    }
  }
  private refreshPdf() {
    this.ngZone.run(() => {
      this.showPdf = false
      setTimeout(() => this.showPdf = true)
    })
  }
  ...
}

XML:

...
<PDFView
  *ngIf="showPdf"
  [src]="..."
></PDFView>

[cheerssoftware]

@interrobrian Thanks! Works like a charm.

[fvtrx]

@interrobrian Is it okay for you to make the same one using Vue framework? It would be such a help if you able to assist me with it.

[cheerssoftware]

@interrobrian Is it okay for you to make the same one using Vue framework? It would be such a help if you able to assist me with it.

I could help you with this:

import * as application from "tns-core-modules/application";
...
export default {
  ...
  data() {
    return {
      filePath: 'YOUR_FILE_PATH',
      showPdf: false,
    };
  },
  ...
  created() {
    ...
    application.on(application.resumeEvent, () => {
      this.showPdf = false;
      setTimeout(() => (this.showPdf = true));
    });
  },
  ...
}

Template:

<template>
  <PDFView :src="filePath" v-if="showPdf" />
</template>

[fvtrx]

@cheerssoftware hey thanks for that! Really appreciate your assistance!