Not showing on IOS 13.3

[kriefsacha]

Hi, the image cropper is not showing for me on IOS 13.3. Works on android.

The error messages i have :

CONSOLE LOG file:///node_modules/@nativescript/core/utils/native-helper.js:51:0: utils.ios.isLandscape() is deprecated; use application.orientation instead CONSOLE LOG file:///node_modules/@nativescript/core/ui/frame/frame-common.js:580:0: topmost() is deprecated. Use Frame.topmost() instead. CONSOLE LOG file:///node_modules/@nativescript/core/image-source/image-source.js:331:0: fromNativeSource() is deprecated. Use ImageSource constructor instead. CONSOLE LOG file:///node_modules/@nativescript/core/image-source/image-source.js:170:0: fromAsset() is deprecated. Use ImageSource.fromAsset() instead. CONSOLE LOG file:///node_modules/@nativescript/core/utils/native-helper.js:51:0: utils.ios.isLandscape() is deprecated; use application.orientation instead

package.json :

{
  "nativescript": {
    "id": "org.nativescript.VisualyScan",
    "tns-android": {
      "version": "6.3.1"
    },
    "tns-ios": {
      "version": "6.2.0"
    }
  },
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/http": "8.0.0-beta.10",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@nstudio/nativescript-loading-indicator": "^1.0.0",
    "nativescript-angular": "^8.20.4",
    "nativescript-background-http": "^3.4.0",
    "nativescript-camera": "^4.4.0",
    "nativescript-imagecropper": "^3.0.0",
    "nativescript-nfc": "4.0.1",
    "nativescript-permissions": "^1.3.8",
    "nativescript-plugin-firebase": "9.0.2",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.10",
    "rxjs": "^6.4.0",
    "tns-core-modules": "^6.3.2",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~8.2.0",
    "@nativescript/schematics": "~0.5.0",
    "@ngtools/webpack": "~8.2.0",
    "nativescript-dev-webpack": "^1.4.1",
    "tns-platform-declarations": "6.0.1",
    "typescript": "~3.5.3"
  },
  "readme": "NativeScript Application"
}

Code involded:

 photoTap() {
    this.loader.show();
    this.changePictureTap = true;
    if (isAndroid) {
      this.askAndroidCameraPermission().then(
        () => {
          this.takePicture();
        }).catch(err => {
          this.loader.hide();
          console.log('err ' + err);
          let options = {
            title: this.translateService.instant('error'),
            message: this.translateService.instant('permissionRejected'),
            okButtonText: this.translateService.instant('ok')
          };

          alert(options);
        });
    }
    else if (isIOS) {
      this.takePicture();
    }
  }

  askAndroidCameraPermission(): Promise<any> {
    return new Promise((resolve, reject) => {
      permissions.requestPermission(android.Manifest.permission.CAMERA, "I need this permission to take picture").then(
        () => { resolve(); }).catch(err => { reject(err) });
    })
  }

  takePicture() {
    this.loader.hide();
    camera.takePicture({ saveToGallery: false })
      .then((imageAsset: ImageAsset) => {
        this.changePictureTap = false;
        let source = new ImageSource();
        source.fromAsset(imageAsset)
          .then((source: ImageSource) => {
            setTimeout(async () => {
              const folderPath: string = knownFolders.documents().path;
              const fileName: string = "test.png";
              const filePath: string = path.join(folderPath, fileName);

              this.cropImage(source, filePath);
            }, isAndroid ? 0 : 1000);
          });
      }).catch((error) => {
        console.log("Error: " + error);

        if (error.toString() !== "Error: cancelled") {
          let options = {
            title: this.translateService.instant('error'),
            message: this.translateService.instant('error-description'),
            okButtonText: this.translateService.instant('ok')
          };

          alert(options);
        }
      });
  }

  cropImage(source: ImageSource, filePath: string) {
    var imageCropper = new ImageCropper();
    imageCropper.show(source, { width: 200, height: 200 }).then((args) => {
      console.log("crop show");
      if (args.image !== null) {
        var saved = args.image.saveToFile(filePath, "png");

        if (saved) {
          this.pictureService.uploadPicture(filePath, this.profil.id).subscribe(() => {
            this.cameraImage = args.image;
          },
            err => {
              console.log("Error: " + err);
              let options = {
                title: this.translateService.instant('error'),
                message: this.translateService.instant('error-description'),
                okButtonText: this.translateService.instant('ok')
              };

              alert(options);
            });
        }
        else {
          console.log("Error on save");
          let options = {
            title: this.translateService.instant('error'),
            message: this.translateService.instant('error-description'),
            okButtonText: this.translateService.instant('ok')
          };

          alert(options);
        }
      }
      else {
        console.log("Error on crop");
        let options = {
          title: this.translateService.instant('error'),
          message: this.translateService.instant('error-description'),
          okButtonText: this.translateService.instant('ok')
        };

        alert(options);
      }
    })
      .catch(function (e) {
        let options = {
          title: this.translateService.instant('error'),
          message: this.translateService.instant('error-description'),
          okButtonText: this.translateService.instant('ok')
        };

        alert(options);
        console.dir(e);
      });
  }

Thank you guys !

[shiv19]

@kriefsacha thanks for reporting about the deprecated APIs. Look at the timeout I'm using here, https://github.com/bthurlow/nativescript-imagecropper/blob/6a25cc459a099a9c89e7ff98fc6fbc17b48a7a40/service-example/image-upload-service.js#L205

Make sure you're using that timeout around your call to the plugin on iOS. It should work after that ^_^

[shiv19]

I'll release an update to stop using the deprecated APIs soon, and report here :)

[kriefsacha]

@shiv19 i used the timeout as you can see on the code i sent. So i need to wait ??

[shiv19]

No, the timeout you need is outside the call to cropper. Please see the example in the link I've shared.

[kriefsacha]

@shiv19 i'm sorry maybe i dont understand but that's what i did the call of the cropper is in the timeout

let source = new ImageSource();
        source.fromAsset(imageAsset)
          .then((source: ImageSource) => {
            setTimeout(async () => {
              const folderPath: string = knownFolders.documents().path;
              const fileName: string = "test.png";
              const filePath: string = path.join(folderPath, fileName);

              this.cropImage(source, filePath);
            }, isAndroid ? 0 : 1000);
          });
      })

[kriefsacha]

@shiv19 I looked 100 times at the code you sent, the call to the cropper is inside the timeout as i did. So i already did it. I will for now put that this feature is not available on IOS but if you can please take care of it as soon as you can

[shiv19]

@kriefsacha the image uploading service example that I've shared in this repo is the exact same that I'm using in a production app. It has been working fine on iOS,

Is it specifically not working only on iOS 13.3 for you?

[kriefsacha]

@shiv19 i don't have a phone with iOS which is under 13.3 so i can't try but i was about to try in couple of hours another time on android.

[shiv19]

You could try it on a simulator as well, I'm away from computers till monday, but after that I'll fix the deprecated API issues

[kriefsacha]

How can i try on simulator ? There is no camera on simulators.

[shiv19]

You could use camera on images from photo library, the service example shows how to choose image from gallery

[kriefsacha]

I don't know when i will be able to do all these changes and test it. I think you'll fix it before i will be able to

[shiv19]

Okay, I'll get to it soon. Also test it on ios 13.3

You can try installing an app called Grainfather from app store, Do the registration process and try picking profile picture and using the cropper. If that works on your phone then this plugin does work on 13.3, else it's broken. That app is using latest nativescript version and ios runtime.

[kriefsacha]

Okay that's really weird. If you speak about the app Grainfather community it's actually working ..

As you saw on the code i call the crop on the setTimeout so i don't see what's the difference ..

[shiv19]

Weird, on Monday I'll update the service example that I've shared so that it is more generic and you can plug and play that module. (you can do that even now, if you can remove the dependency of user-service, nativescript-localise and shared/helper, from that file, the rest of the deps should be easy to supply) Once you add this module to your project you just update the API paths for uploading, and just import the image Uploading service and call relevant methods with their parameters and you'll be good to go. I've reused that service in several projects, and it has saved me a lot of time, that's why I decided to share it.

[kriefsacha]

@shiv19 I really don't understand, i took your service and begin to change to what i need and it seems to work.. But i don't really understand what is the difference with what i did ..

Anyway i'll close it for now, if there is any news i'll keep you in touch here. Keep me in touch also for the deprecated APIs. Thank you very much for your help man !