RectangleCoordinates issue on iOS

[rosentoshev]

Hello,

I have an issue with the rectangleCoordinates on iOS passed down from the detectedRectangle prop. When I take a photo on Android and pass down the coordinates, it works fairly accurately as the rectangle matches the overlay. However, when I take a photo on iOS and pass it down to a component containing the react-native-perspective-image-cropper library, I have established that the detected rectangle comes out in a much smaller scale than it should be. Therefore, it aligns to the topLeft of the screen. For instance a big rectangle returns the following coordinates on iOS. In was wondering if there is an issue with the detectedRectangle coordinates on iOS and what is the best way to resolve this so that it does not come up in such a small scale and high on the y axis and to left on the x axis. Thank you.

detectedRectangle: {
bottomLeft: {y: 140.08108520507812, x: 387.81292724609375}
bottomRight: {y: 652.234375, x: 415.16131591796875}
dimensions: {width: 564, height: 1000}
topLeft: {y: 130.90045166015625, x: 30.103368759155273}
topRight: {y: 651.939453125, x: 19.704313278198242}
}

[rosentoshev]

croppedImage on Android (fairly accurate according to the rectangle overlay):

detectedRectangle on Android (fairly accurate as a scale and position):

croppedImage on iOS (accurate according to the rectangle overlay):

detectedRectangle on iOS (small as in the detectedRectangle object above and to the top left corner of the screen:

[humphreyja]

@rosenexpend first of, great work getting a perspective cropper package to work with this 🎉!! This has been a highly requested addition or recommendation for this package (and one that has caused a bit of issues for me trying to get it to work as well). So looking at this, my first thought is to multiply the coordinates by 500. I have no clue why but the other react native detection packages all scale the coordinates by 500, and the perspective cropper package is just an extraction of the same cropping function from those packages. (The original code was actually written as a gist example that someone copied into a react native package and called it "production ready" without understanding why.) So in my package I remove all the random scaling. I don't really know why it works in android and not iOS, but that is what I suspect.

Let me know if that works and if you get a fully working version of this and I'll start recommending it to people looking for this feature!

[trivmnguyen]

Dear @humphreyja can you let me know more detail how to covert or fix the rectangleCoordinates in iOS. We experienced the problem as screenshot below

Thank you very much in advance !

Best Regards, Tri

[humphreyja]

@trivmnguyen Ok so looking at this I am suspecting it is a screen size issue. I've seen in the past some issues when using the camera preview in full screen vs having a navigation bar and shrinking the camera preview. Basically the coordinates come back a little bit skewed. So just looking at this, I think that the perspective editor is using coordinates from the relative shape of the iPhone's full screen, where as the camera preview's image ratio is more square due to the bottom navigation.

It's pretty awful that this kind of issue exists but for the life of me I could never figure out what that was happening (I'm not a native developer by trade). My advice would be to remove the bottom nav and see if the coordinates match up. My approach is usually absolutely positioning navigation components on top of a full screen camera preview.

Let me know if that works for you

[fukemy]

plz update lib to using *** VNDocumentCameraViewController*** for better