Not working on a modal view about nativescript-imagecropper

[shiv19]

Ok i'll try something tonight

[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.

[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";

[shiv19]

@jannomeister
this was released as [email protected]

[mailiam]

Ok.. a bit overdue..

@panagulis72

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)
above log says its an android issue yet I only changed iOS part. I'm not currently in setup for android development @shiv19 do you have any idea?

@kdagnan and @shiv19
I can confirm that PR #44 should make passthrough condition to revert back to previous implementation when there are "No page available for modal". The new PR to address this is upcoming.

@mspusta78
Could you attach reproducible code to test it out? It seems to be something that is not related to modal.

[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

[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

[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.

[davecoffin]

Yay thanks @shiv19 Ellie and Noah are jealous btw that Halloween starts for you before them. 🎃

[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"
}

[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 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.

[glober-trotter]

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

[glober-trotter]

@mailiam thank you so much! it worked!

[glober-trotter]

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

[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).

[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?

[mailiam]

Ouch I will check it out ASAP!
Sorry for the trouble :(

[codytooker]

Same thing here.

[mspusta78]

Is there an update on this?

I tried to use this plugin using {N} JS and the following message
No page available for modal

shows up for non-modal pages as well

[kdagnan]

@mspusta78 If you are using a modal, use 1.0.6. If you are calling it from a regular page, use 1.0.5. No one has had a chance to fix it yet, I might try and fork it if I get some time this week unless the author plans on doing it soon.

[mspusta78]

@kdagnan Thank you for your prompt response. I tested version 1.05 and this version doesn't work either.

I get:
Added closed viewfinder reason PresentedViewController: (PerformingReview, PresentedViewController)

I am using Vanilla JS for {N} 6

[davecoffin]

@shiv19 have any thoughts on this?

https://share.getcloudapp.com/eDugWnOY

Basically I'm opening the imagepicker from a modal, then the cropper after that. Everything looks fine in the modal but when you close the modal the main app is all effed up.

[shiv19]

@davecoffin I would suggest wrapping the part where you handle the response from the cropper in a settimeout so that the back transition animation completes.

[davecoffin]

@shiv19 I tried that but it borks the view as its opening the cropper, you can see it for a split second before the cropper opens: https://share.getcloudapp.com/yAu0GJJ4

[davecoffin]

Just tested and it works if I close the modal, then open the image picker, then open the cropper. But thats not ideal...they may still be editing the data while the photo is uploading.

[shiv19]

@davecoffin this might work for you,
In the plugin's ios code, where we present the view controller, we're setting animated to true.
Try setting that to false in node modules and see if that works 🤔

[davecoffin]

@shiv19 Here's what worked: first i changed the logic on how to determine what the presented view controller is. Then, i had to disable animation on both showing the controller and then also dismissing it here: cropViewController.dismissViewControllerAnimatedCompletion(false, null);

let vc = Frame.topmost().ios.controller;
                const keyWindow = UIApplication.sharedApplication.keyWindow;
                let root = keyWindow.rootViewController;
                let presented = root.presentedViewController;
                let page = null;
                if (presented) {
                    page = presented;
                } else {
                    page = root;
                }

                if (_options.lockSquare) {
                    viewController.aspectRatioPreset = 1;
                    viewController.aspectRatioLockEnabled = true;
                    viewController.aspectRatioPickerButtonHidden = true;
                    viewController.resetAspectRatioEnabled = false;
                }
                page.presentViewControllerAnimatedCompletion(viewController, false, function () {
                    if (_options) {
                        if (_options.width && _options.height) {
                            const gcd = ImageCropper._gcd(_options.width, _options.height);
                            viewController.toolbar.clampButtonHidden = true;
                            viewController.cropView.setAspectRatioAnimated(CGSizeMake(_options.width / gcd, _options.height / gcd), false);
                        }
                    }
                });

I can create a PR for this, but @shiv19 can you see any potential problems with other scenarios here? Or anyone else? Hope youre good @shiv19 , miss you!

[shiv19]

@davecoffin
Yes please do create a PR on this, and let's get this out.
I would also like to know which iOS runtime and @nativescript/core version you are currently using in that project.
So that I can verify the fix on my end and check if there will be any potential problems because of this change.

I'm doing well, hope you are doing well too! Miss you too!

[davecoffin]

#87

[shiv19]

Version [email protected] of this plugin includes the fix by @davecoffin

[shiv19]

Haha, yeah it starts a whole day earlier for me 😁🎃

[shiv19]

@davecoffin
Have published another version 4.0.3
this fixes an issue where NativeClass was not compiled.