PDF disappears when app is put in background on Android

[dahjelle]

Which platform(s) does your issue occur on?

• Android, emulator and device, multiple versions

Please, provide the following version numbers that your issue occurs with:

• CLI: 7.0.11
• Cross-platform modules: 7.0.0
• Runtime(s): android 7.0.1
• Plugin(s):

  "dependencies": {
    "@finanzritter/nativescript-pdf-view": "3.0.2",
    "@nativescript/core": "~7.0.0",
    "@nativescript/theme": "~2.3.0"
  },
  "devDependencies": {
    "@nativescript/android": "7.0.1",
    "@nativescript/types": "~7.0.0",
    "@nativescript/webpack": "~3.0.0",
    "typescript": "~3.9.0"
  },

Please, tell us how to recreate the issue in as much detail as possible.

1. Start the attached app. (Oddly, it works fine in the demo app…I'm not sure what the difference is.)
2. View the PDF.
3. Switch to a different application.
4. Switch back.
5. The PDF is no longer displayed on the screen.

Is there any code involved?

main-page.xml

<Page
  xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:pdf="@finanzritter/nativescript-pdf-view"
  loaded="pageLoaded"
>
  <pdf:PDFView src="{{ url }}" />
</Page>

main-page.ts

import {
	EventData,
	knownFolders,
	Page,
	fromObject,
} from "@nativescript/core";

export function pageLoaded(args: EventData): void {
	const url = `file://${
		knownFolders.currentApp().path
	}/assets/IconSystems.pdf`;
	const page = args.object as Page;
	page.bindingContext = fromObject({
		url,
	});
}

pdf-test.zip

Possibly related?

I wonder if this is related to this upstream issue? DImuthuUpe/AndroidPdfViewer#129

[dahjelle]

I could also reproduce the issue in the above sample application with an URL of https://www.princexml.com/samples/flyer/flyer.pdf (as in the demo application), so it isn't just that the PDF is in assets vs a downloaded PDF.

[dahjelle]

As I briefly mentioned above, I can't reproduce the problem in the demo app in this repository — but I don't at all see what the difference could be.

[dahjelle]

For completeness, I should also note that I also experienced the same symptom when using nativescript-share-file after sharing to an email attachment — the PDF disappears. I don't know if these are the same or different issues…

[sc85]

Hey, I did a quick check and you are right. The issue does not appear on the demo but it does appear on the demo-vue.
I agree that it might be related to DImuthuUpe/AndroidPdfViewer#129 or to DImuthuUpe/AndroidPdfViewer#956 . Yesterday night I tried to implement something similar (within the plugin) like done in DImuthuUpe/AndroidPdfViewer#956 but with no success.

[dahjelle]

I've been back looking at this. I see that DImuthuUpe/AndroidPdfViewer#956 claims to fix a similar issue, as you mentioned. How does one implement a fix like this within the plugin?

I'm fairly ignorant here, unfortunately.

I'm trying to extend the native class with something like (rough code ahead):

class MyPDFView extends pdfviewer.PDFView {
    static constructorCalled: boolean = false;
    // constructor
    constructor(a, b) {
        super(a, b);
        MyPDFView.constructorCalled = true;

        // necessary when extending TypeScript constructors
        return global.__native(this);
    }

    public onDetachedFromWindow() {
      console.log('onDetachedFromWindow');
      // this.release();
      super.onDetachedFromWindow();
    }

    public release() {
      console.log('release');
      this.recycle();
    }
}

And then changing pdf-view.android.ts in the plugin to reference the new class:

  public createNativeView() {
    // tslint:disable-next-line:no-unsafe-any
    return new MyPDFView(this._context, void 0);
  }

However, I can still reproduce the problem (in the vue demo) and — more pertinent — I was expecting my console.logs to show up somewhere. But they don't.

Did I extend the class incorrectly? Or, perhaps, I'm mistaken in assuming that one or both of these methods would be called.

Thanks again for your help!

[dahjelle]

There are other forks that fix the issue, but, as far as I can tell, non have been published to be usable via gradle. (Though I could be wrong about that!) elek90/AndroidPdfViewer@56618eb is another example in addition to the PR you found.

[dahjelle]

I figured out several problems with my above implementation — requiring @NativeClass, using this.super, and adjusting the TypeScript declarations — but it still didn't seem to fix the issue.

---

I did find a way to include the patched library (from DImuthuUpe/AndroidPdfViewer#956), using the following include.gradle:

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}
dependencies {
    implementation 'com.github.Ficat:AndroidPdfViewer:ae98706064'
}

But that does not seem to resolve the issue, either. (It's apparently rather finicky, as I thought I had it fixed, but a later build after clearing the gradle cache and ns clean did not.)

---

A side note, I see that react-native-pdf is using a repo from com.github.TalbotGooday instead since the one from barteksc seems to be unmaintained. Unfortunately, it does not seem to have the fix needed for our use-case.

[dahjelle]

@sc85 I think I have a PR that fixes this issue in #10 . (More information in the PR.) Let me know if you have comments, questions, or improvements!

[sc85]

@dahjelle Thanks a lot for this fix! I did some tests and it works just fine.