translateX offset, image disappear on pan

[HugoGresse]

Hi there,

I have the strangest issue to open, first time for me.

On a single iOS device, when opening the gallery, we have a bigger and bigger left margin (or translationY) as we open the gallery to an initialIndex higher and higher:

1. Open the first index in the gallery: work as expected
2. Opening the 10 index: we begin to see a substantial margin on the left

3. Opening index 100, the image displayed is the one before the current image.

   React Native 0.70.6 Awesome gallery 0.3.5 OS: iOS only (no issue on android) Device model: iPhone 8 plus, iOS 16.3.1,

The weirdest thing is that on another identicial phone model, identical app version and clean install, we don't have the issue at all. So I'm fishing here as I didn't see a similar issue on this repo before, without a reproduction, to check wheter if you may have an idea about the issue.

    "react-native-gesture-handler": "2.12.0",
    "react-native-reanimated": "^2.17.0",

Take care,

[HugoGresse]

Quick demo of the issue:

https://github.com/Flair-Dev/react-native-awesome-gallery/assets/662377/44735543-0c20-4f13-b413-60778d87b58b

[HugoGresse]

I've found the first issue (offset on translateX) caused by the containerDimensions.x being rounded (338 instead of 338.825), linked to my code

The second issue is weirder though I'm not sure what's causing this exactly: It seems that the layout.x.value is NaN when panGesture start. which result in getEdgeX returning a NaN and image then disappear. The thing is that the image did appear, so the layout has the correct dimension set.

A quick fix is to check for NaN:

    const getEdgeX = () => {
      'worklet';
      const newWidth = scale.value * layout.x.value;

      const point = (newWidth - width) / 2;

      if (point < 0 || isNaN(newWidth)) {
        return [-0, 0];
      }

      return [-point, point];
    };

@pavelbabenko let me know if you think it is a good idea so I can submit a PR.

[pavelbabenko]

Released in v0.3.6

[HugoGresse]

Thanks for taking care of this. I would have liked to have been included in the mention, as right now, my contribution is disregarded in the final work.