pavelbabenko / react-native-awesome-gallery

Performant, native-like, and well-customizable gallery for React Native.
MIT License
419 stars 50 forks source link

Wrong focal values on zoom on both platforms #72

Closed efstathiosntonas closed 2 months ago

efstathiosntonas commented 2 months ago

Hi,

While double tapping to zoom or pinch to zoom, on release the focal is being reset at the top part of the image. This happens on both Android and iOS using a 1920x1080 image.

react-native@0.73.7 on Paper, gesture handler@2.16.0 reanimated@3.8.1 awesome-gallery@0.3.9

The only solution I could find is to set the height on useVector:

    const originalLayout = useVector(width, height);
    const layout = useVector(width, height);

When height is set to 0, 1st tap on scarecrow, 2nd tap on pipboy, 3rd tap on chair resets the focal between scarecrow and pipboy:

https://github.com/pavelbabenko/react-native-awesome-gallery/assets/717975/aa138a70-eba1-4779-b8cb-0aab24df4b63

When height is set from props everything is fine:

https://github.com/pavelbabenko/react-native-awesome-gallery/assets/717975/c8fec9ef-ebb1-4e00-89e6-535e6a546fdc

renderItem, I already know the image dimensions from image object:

const renderItem = ({
  item,
  setImageDimensions
}: RenderItemInfo<{
  blurhash?: string;
  height: number;
  thumbnailSource: string;
  url: string;
  width: number;
}>) => {
  return (
    <CachedImage
      blurhash={item.blurhash}
      images={item.url}
      onLoad={() => {
        setImageDimensions({ width: item.width, height: item.height });
      }}
      resizeMode="contain"
      style={StyleSheet.absoluteFillObject}
    />
  );
};
efstathiosntonas commented 2 months ago

It seems that I should pass the actual image source instead the image dimensions from server object:

   onLoad={(e) => {
        const { width, height } = e.source;
        setImageDimensions({ width, height });
      }}

@pavelbabenko If you believe there's no bug in here please feel free to close this isssue.

edit: it seems that there was no onLoad prop on my CachedImage component thus it was never called.

@pavelbabenko question is, what shall we pass here? the event dimensions or dimensions from server?

pavelbabenko commented 2 months ago

@efstathiosntonas It's better to pass event dimensions