[iOS] images show blurred

[Burgov]

All images show blurred in iOS, exactly as described here: nek023/QBImagePicker#86 (except I'm not doing multiselect, not sure if it's relevant). Since this lib is using that library, I suspect it's the same issue, but I don't understand the described workaround over there.

All iOS phones are affected (didn't try Android).
NS 4.0.2
plugin latest version.

How can I resolve this problem?

[Burgov]

Possibly also related: nek023/QBImagePicker#115

[lini]

Hi,
Can you give me some more information about this issue so I can try to reproduce it with the image picker plugin? I tried using an iOS 11 device (real and simulator) with the demo app from this repository and all images looked sharp as thumbnails during the selection. If you can isolate the issue in a sample project, please send a link. Also, specify the iOS version/device model where you observe the blurred thumbnails.

[Burgov]

Hi @lini, thanks for looking into this.

This issue appears to be hitting all iPhone devices. Tested with a range between 6 and 8 (didn't try X)

I'll try to see if i can isolate the issue or otherwise try and organize access to our repo so you can run that (will be next week)

[anki247]

Packege.json
"@angular/core": "~5.2.0",
"nativescript-imagepicker": "^6.0.2",

Usage:

loadPhoto(callback: (selection: ImageAsset[]) => void) {
    this.context = imagepicker.create({
      mode: 'single', // use "multiple" for multiple selection
      mediaType: imagepicker.ImagePickerMediaType.Image
    });

    this.context
      .authorize()
      .then(() => this.context.present())
      .then(callback)
      .catch((ex) => {
        ...
      });
  }

Blurred

What I also noticed is, that if I would reuse the this.context without creation on the second time, then the images are sharp, but then you can not navigate back to root album

[anki247]

Finally I was able to locate the problem, but I still have no idea how to solve it.
The above described blurred effect appears if you using the RadSideDrawer plugin 😕
"nativescript-ui-sidedrawer": "^4.1.1",
I really can not explain why. I created a demo repo here to illustrate.
In app/app.component.ts you can switch between the two template version, the one without the side-drawer works as expected. (Images are sharp)
Is there any workaround for that? I really need to solve this issue as soon as possible.
tnx in advance
@lini Do you need more information?

[anki247]

At least for me I found the solution/mistake I made.
You can check it out here

[JakubPawlak]

I have the same problem in iOS. In my case, I've found that the problem is related to TabView and multiple page router outlets (I'm using Angular) in the root app component. Here is the minimal project on git I made to reproduce the issue.
https://github.com/JakubPawlak/nativescript-blurry-imagepicker.git
If there is no page router outlet (just comment it in app.component.html), only TabViews, a viewController of undefined error is thrown, otherwise plugin is started properly but images in the gallery are blurred.

[Burgov]

Thanks for the fix @zbranzov and @JakubPawlak!