Closed SL-A-SH closed 4 years ago
Hey Bro, How did you solve this error? If you don't mind, kindly share your solution. Many thanks.
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 Thanks Bro. I can finally start the cropper.
@SL-A-SH @Zayyar-DSS In Ios cropper is Not working
@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
aftercomponentDidMount
so I change my render methodFrom:
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.
@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.
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