Cropper not starting

[SL-A-SH]

I am using

"react": "16.8.3", "react-native": "0.59.10", "react-native-perspective-image-cropper": "^0.4.3", "react-native-svg": "^9.0.0"

Platform: Android

While navigating to Cropper Component I am getting this error:

Invariant Violation: Invariant Violation: [2883,"RCTImageView",21,{"overflow":"hidden","width":360,"position":"absolute","height":"<>","resizeMode":"contain","shouldNotifyLoadEvents":false,"src":null,"defaultSrc":null,"loadingIndicatorSrc":null}] is not usable as a native method argument

[Zayyar-DSS]

Hey Bro, How did you solve this error? If you don't mind, kindly share your solution. Many thanks.

[SL-A-SH]

I was setting my initialImage inside this.state after componentDidMount so I change my render method

From:

return (
          <CustomCrop
            updateImage={this.updateImage}
            rectangleCoordinates={this.state.rectangleCoordinates}
            initialImage={this.state.initialImage}
            height={this.state.height}
            width={this.state.width}
            ref={ref => (this.customCrop = ref)}
            overlayColor="rgba(18,190,210, 0.7)"
            overlayStrokeColor="rgba(20,190,210, 1)"
            handlerColor="rgba(20,150,160, 1)"
            enablePanStrict={false}
          />
          <TouchableOpacity onPress={this.crop}>
            <Text>CROP IMAGE</Text>
          </TouchableOpacity>
      );

To:

if (this.state.initialImage) {
      return (
          <CustomCrop
            updateImage={this.updateImage}
            rectangleCoordinates={this.state.rectangleCoordinates}
            initialImage={this.state.initialImage}
            height={this.state.height}
            width={this.state.width}
            ref={ref => (this.customCrop = ref)}
            overlayColor="rgba(18,190,210, 0.7)"
            overlayStrokeColor="rgba(20,190,210, 1)"
            handlerColor="rgba(20,150,160, 1)"
            enablePanStrict={false}
          />
          <TouchableOpacity onPress={this.crop}>
            <Text>CROP IMAGE</Text>
          </TouchableOpacity>
      );
    } 

Notice the if condition.

And the error was gone.

[Zayyar-DSS]

@SL-A-SH Thanks Bro. I can finally start the cropper.

[MITDD6338]

@SL-A-SH @Zayyar-DSS In Ios cropper is Not working

[tarunpatel004]

@SL-A-SH and @Zayyar-DSS

After applying solution I am still getting the same error. I'm using react native document scanner from where I am getting an image and then I pass that Image's uri in to this updateImage={this.updateImage}. But still I am getting invariant violation. I have tried to add base 64 as well but still error is the same.

Can you guys please help! Thanks in Advance.

I was setting my initialImage inside this.state after componentDidMount so I change my render method

From:

return (
          <CustomCrop
            updateImage={this.updateImage}
            rectangleCoordinates={this.state.rectangleCoordinates}
            initialImage={this.state.initialImage}
            height={this.state.height}
            width={this.state.width}
            ref={ref => (this.customCrop = ref)}
            overlayColor="rgba(18,190,210, 0.7)"
            overlayStrokeColor="rgba(20,190,210, 1)"
            handlerColor="rgba(20,150,160, 1)"
            enablePanStrict={false}
          />
          <TouchableOpacity onPress={this.crop}>
            <Text>CROP IMAGE</Text>
          </TouchableOpacity>
      );

To:

if (this.state.initialImage) {
      return (
          <CustomCrop
            updateImage={this.updateImage}
            rectangleCoordinates={this.state.rectangleCoordinates}
            initialImage={this.state.initialImage}
            height={this.state.height}
            width={this.state.width}
            ref={ref => (this.customCrop = ref)}
            overlayColor="rgba(18,190,210, 0.7)"
            overlayStrokeColor="rgba(20,190,210, 1)"
            handlerColor="rgba(20,150,160, 1)"
            enablePanStrict={false}
          />
          <TouchableOpacity onPress={this.crop}>
            <Text>CROP IMAGE</Text>
          </TouchableOpacity>
      );
    } 

Notice the if condition.

And the error was gone.

[SL-A-SH]

@tarunpatel004 No You need to use the property initialImage for setting the image you get from document scanner. The property updateImage is for setting the image after cropping and will be done internally by this library.