Is there a way to get the X, Y, Width, and Height of the original image from the section in view?

[slewicki]

I have a rather large 2K image that I am loading and panning within my small phone screen and that part works great. What I'd like to do is somehow translate the bounds of the zoomed and panned image back to the original upper-left coordinates. I get that the offsets reference the center of the image and I tried multiple different formulas to take into account the offset and zoom scale, but I haven't been able to match up with the actual points. Any information would be greatly appreciated.

[soevii]

you can get the original size using the image component of react-native package

const getImageSize = React.useCallback((uri: string): Promise<ISize> => {
    const success =
      (resolve: (value: ISize | PromiseLike<ISize>) => void) =>
      (width: number, height: number) => {
        resolve({
          width,
          height,
        });
      };
    const error = (reject: (reason?: any) => void) => (failure: Error) => {
      reject(failure);
    };

    return new Promise<ISize>((resolve, reject) => {
      Image.getSize(uri, success(resolve), error(reject));
    });
  }, []);

then you can get the resized image size of your image using on layout function

 const onLayout = React.useCallback((event: LayoutChangeEvent) => {
    setMaxValues({
      height: event.nativeEvent.layout.height,
      width: event.nativeEvent.layout.width,
    });
  }, []);

and you calculate the scale using that values
const scale = maxValues.width / originalSize.width

to finish multiply that value to your coordinates and width

style={{
                    top: p.coord.y * scale,
                    left: p.coord.x * scale,
                    width: p.coord.w * scale,
                    height: p.coord.h * scale,
                  }}