React-native-image-crop-picker: Image picker works for the first time only on iOS

[prtkkmrsngh]

Version

• react-native-image-crop-picker v0.18.1
• react-native v0.48.4

Platform

• iOS

Expected behaviour

Image picker should work consistantly

Actual behaviour

Image picker works for the first time only and they it crashes immediately after opening.
Both debug/release and on simulator/device it is crashing.

[ivpusic]

please provide additional info, like debug logs. I cannot reproduce such behaviour on my projects.

[prtkkmrsngh]

@ivpusic Really Sorry, nothing prints in debug log. No error raised, just picker gets closed and screen freezes.
iOS v11
Device iPhone 6

[prtkkmrsngh]

Followed readme as it is.

[ivpusic]

did you add https://github.com/ivpusic/react-native-image-crop-picker#step-1 Info.plist?

[prtkkmrsngh]

@ivpusic I figured it out, actually I was closing custom modal in my app first then opening ImagePicker as a result it closes ImagePicker immediately due to view hindrance(hard to detect because working fine in android). Thanks for your awesome plugin :+1:

[williams-voon]

Hi,

I run into the same problem. Now I use react-native-image-picker to select photo first, and then crop the photo. Here is my code.

     ImagePicker.showImagePicker(photoOptions,(response) =>{
        if (response.didCancel){
            return
        }else{
          RNFS.exists(outputPicPath).then((exists)=>{
            if(exists){
              return ;
            }else{
              return RNFS.mkdir(outputPicPath);
            }
          }).then(()=>{


            ImagePickerCrop.openCropper({
              path: response.uri,
              width: 300,
              height: 400
            }).then(image => {
              RNFS.unlink(response.uri)
               .then(() => {
                 console.log('FILE DELETED',response.uri);
               })
               .catch((err) => {
                 console.log(err.message);
               });
              this.handleCompressedFile(image.path)
            });

          })

        }
    })

Anyway, I hope the bug will be fixed.

[superandrew213]

@prtkkmrsngh how did you fix your issue?

[prtkkmrsngh]

@superandrew213 I was closing modal first then opening ImagePicker like this:
this.setState({ isOpen: false }, () => { ImagePicker.openPicker({ width: 300, height: 400, cropping: true }).then(image => { // do something with image }); })
Now I'm doing like this:
ImagePicker.openPicker({ width: 300, height: 400, cropping: true }).then(image => { // do something with image this.setState({ isOpen: false }); });

[349989153]

Ran into the same problem and thanks for the info @prtkkmrsngh

[williams-voon]

@ivpusic Hi, I run into the same error on iOS platform, here is the log, could you please solve the problem?

I pick a image first, it works. But if I try again, the app hang.

2017-11-21 21:25:59.795749+0800 fzbdemo6[6604:1799649] Warning: Attempt to present <QBImagePickerController: 0x110569d30> on <RCTModalHostViewController: 0x10285bc10> whose view is not in the window hierarchy!

[williams-voon]

@ivpusic Hi,

I have solved the problem. It seem something wrong with action sheet component.

I added setTimeout in callback of action sheet.

Here goes the new code.

  handleActionSheetPress(i){
    setTimeout(()=>{
      let {maxWidth,maxHeight,cropping} = this.props
      let parms={
        width: maxWidth,
        height: maxHeight,
        cropping: cropping
      }
      if(i==1){
        ImagePickerCrop.openCamera(parms).then(image => {
          this.onImageCreated(image.path)
        });
      }else if(i==2){
        ImagePickerCrop.openPicker(parms).then(image => {
          this.onImageCreated(image.path)
        });
      }
    },1)
  }

The previous code is

  handleActionSheetPress(i){
      let {maxWidth,maxHeight,cropping} = this.props
      let parms={
        width: maxWidth,
        height: maxHeight,
        cropping: cropping
      }
      if(i==1){
        ImagePickerCrop.openCamera(parms).then(image => {
          this.onImageCreated(image.path)
        });
      }else if(i==2){
        ImagePickerCrop.openPicker(parms).then(image => {
          this.onImageCreated(image.path)
        });
      }
  }

[gyyxiaogao]

@prtkkmrsngh I have the same problem, I don't have any effect, what is isOpen?

[prtkkmrsngh]

@gyyxiaogao isOpen is a state used to close the modal; it is used to call ImagePicker.

[gyyxiaogao]

@prtkkmrsngh Oh, I see and solve,thanks.

[warfrogsdf]

this problem is you use a other package（like react-native-actionsheet），the model conflict to camera

[wkmcyz]

this problem is you use a other package（like react-native-actionsheet），the model conflict to camera

react-native on iOS has always such problem, when you use Modal and have problems when Modal showing or disappearing, it is very likely because of this problem.
I got so many lessons. :(