Not working on a modal view

[jannomeister]

I'm using nativescript-angular and when I use the image cropper inside a modal view its not working at all. But when I call it on a page it works as expected. I don't know if im doing it right. But i really need this feature on my app :(

[shiv19]

@jannomeister can you share the snippet of how you are trying to call this plugin from your modal page please?

[jannomeister]

this is how I call the camera and the cropper

import { CameraOptions, takePicture, requestPermissions, isAvailable } from "nativescript-camera";
import { ImageCropper } from "nativescript-imagecropper";
import { ImageAsset } from "tns-core-modules/image-asset";
import { fromAsset, fromBase64, ImageSource } from "tns-core-modules/image-source";

private _imageCropper: ImageCropper;

openCamera() {
    const opts: CameraOptions = {
        width: 320,
        height: 240,
        keepAspectRatio: true,
        saveToGallery: false
    };

    takePicture(opts).then((imageAsset: ImageAsset) => {
        fromAsset(imageAsset).then((source: ImageSource) => {
            this.showCropper(source);
        });
    }, (err) => {
        console.log("Ooops! Sorry", err);
    });
}

showCropper(source: ImageSource): void {
    this._imageCropper = new ImageCropper();
    this._imageCropper.show(source, { width: 200, height: 200 })
    .then((res) => {
        if (res.image !== null) {
            console.log(res.image);
        }
    }).catch((err) => {
        console.log("Ooops! Sorry", "Unable to get the image");
    });
}

[jannomeister]

@shiv19 I don't know if I made a mistake

[shiv19]

@jannomeister Can you test if the changes in #44 fixes this?

[jannomeister]

@shiv19 Oh it's still not yet merge. But I think that is the solution for this issue.

[shiv19]

No, you could make those changes in node_modules/nativescript-imagecropper/nativescript-imagecropper.ios.js and let me know if it works

[jannomeister]

@shiv19 I did try but it doesn't fixed the problem. Any idea how to fix this issue? :( I really love this plugin and it really has a big impact in my project i'm working on right now.

[shiv19]

Can you try var page = frame.topmost().currentPage.ios.controller

[jannomeister]

@shiv19 it's causing an error saying...

{
  "line": 121801,
  "column": 28,
  "sourceURL": "file://app/vendor.js"
}

[shiv19]

Ok i'll try something tonight

[jannomeister]

@shiv19 thank you so much!

[jannomeister]

@shiv19 is there any update of this issue? :(

[glober-trotter]

also experiencing this one. I can't proceed with my project im working on.

[glober-trotter]

@shiv19 here is a sample app. I badly need this feature for my app to work. :(

imageCropperIssue.zip

[shiv19]

Thanks for the sample app. That helps

[glober-trotter]

@shiv19 sure, no problem. because I badly needed imagecropper on my project im working on right now. :( I can't find any workaround on this one.

[mailiam]

@glober-trotter after quick investigation below is the root of the problem

1. takePicture() resolves image and then dismisses itself
2. imageCropper.show() start of from NaviagionController and look through not yet dismissed UIImagePickerController(simulator) with patch from PR #44
3. UIImagePickerController modal dismisses itself and cropper all together

(I was using nativescript-imagepicker while working #44)

Here is what I would do either

1. fix nativescript-camera to resolve after dismiss
2. some how wait for nativescript-camera to dismiss then open nativescript-imagecropper

I’m currently experimenting if I can find elegant solution.

[glober-trotter]

@mailiam thank you so much for this one. i'll wait for the result for your experiment.

[mailiam]

I came up with workaround(c9094ff) to check if vc is being dismissed,

Not quite sure if this will work on other cases..

@glober-trotter @jannomeister could you please try if this resolves your issue?

js equivalent follows:

// imagecropper.ios.js:106
        var vc = frame.topmost().ios.controller;
        var page = null;

        while (
          vc.presentedViewController &&
          vc.presentedViewController.viewLoaded
        ) {
          vc = vc.presentedViewController;
          if (!vc.beingDismissed) page = vc;
        }

        if (page === null) throw "No page available for modal";

[glober-trotter]

@mailiam thank you so much! it worked!

[glober-trotter]

hoping @shiv19 checks and approve those changes. Thank you so much guys!

[shiv19]

@mailiam excellent! Can you please make a PR for this :)

[jannomeister]

@mailiam Thank you so much! @shiv19 i'll just wait for it to be included on the next release of this plugin :) thanks guys

[shiv19]

@jannomeister this was released as [email protected]

[panagulis72]

I still have this issue!

[shiv19]

@panagulis72 Can you provide more details on this to @mailiam, because he worked on this.

[panagulis72]

I tried to install it again, and the error is changed! This is my code:

var ImageCropper = require("nativescript-imagecropper").ImageCropper; .....

ngOnInit(): void { this.imageCropper = new ImageCropper(); }

....

chooseImageFromCamera() { camera.requestPermissions() .then(() => { camera.takePicture() .then((imageAsset) => { var image = new imageModule.Image(); image.src = imageAsset; if (image.src) { this.imageCropper.show(image.src).then((args) => { console.dir(args); if (args.image !== null) { this.imageUrl = args.image; } }) .catch(function (e) { console.dir(e); }); } }).catch((err) => { console.log("Error -> " + err.message); }); }, () => { }); }

but I get this error:

JS: ERROR Error: android.view.WindowManager$BadTokenException: Unable to add window -- token null is not valid; is your activity running? JS: android.view.ViewRootImpl.setView(ViewRootImpl.java:788) JS: android.view.WindowManagerGlobal.addView(WindowManagerGlobal.java:373) JS: android.view.WindowManagerImpl.addView(WindowManagerImpl.java:114) JS: android.widget.PopupWindow.invokePopup(PopupWindow.java:1416) JS: android.widget.PopupWindow.showAtLocation(PopupWindow.java:1187) JS: android.widget.PopupWindow.showAtLocation(PopupWindow.java:1150) JS: com.tns.Runtime.callJSMethodNative(Native Method) JS: com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1203) JS: com.tns.Runtime.callJSMethodImpl(Runtime.java:1083) JS: com.tns.Runtime.callJSMethod(Runtime.java:1070) JS: com.tns.Runtime.callJSMethod(Runtime.java:1050) JS: com.tns.Runtime.callJSMethod(Runtime.java:1042) JS: com.tns.gen.java.lang.Runnable.run(Runnable.java:17) JS: android.os.Handler.handleCallback(Handler.java:761) JS: android.os.Handler.dispatchMes... JS: ==== object dump start ==== JS: response: "Error" JS: image: "null" JS: ==== object dump end ====

[kdagnan]

I haven't had a chance to revert back to 1.0.5 and see if that fixes it, but I am now getting "No page available for modal" error in my catch on .show(). I haven't tested my cropping functionality in a while but it was working last I remember, I don't believe I have touched any related components either. Will update when I get a chance to revert. I am running the most recent version of everything (tns core, web pack, platform modules, etc).

[kdagnan]

I haven't had a chance to revert back to 1.0.5 and see if that fixes it, but I am now getting "No page available for modal" error in my catch on .show(). I haven't tested my cropping functionality in a while but it was working last I remember, I don't believe I have touched any related components either. Will update when I get a chance to revert. I am running the most recent version of everything (tns core, web pack, platform modules, etc).

Can confirm that reverting to 1.0.5 fixed this issue.

[shiv19]

@mailiam I can confirm that @kdagnan is right. 1.0.6 seems to break existing functionality I had to revert to 1.0.5 in my own app as well can you check this?