Bug: gallery does not work if using containerDimensions prop value changes

[Shaninnik]

We are working on responsive app that supports different layouts for mobiles and tablets and portrait/landscape orientations. On iPads we present gallery in a native navigation modal, which is not a full screen size, so we have to use onLayout callback of gallery container and containerDimensions property:

containerDimensions={{ width: layout.width, height: layout.height }}

This results in incorrect behaviour when containerDimensions changes, for example when changing orientation. I looked around in source code and was able to fix it by simply adding dimensions.width to useEffect dependencies:

useEffect(() => {
    translateX.value = index * -(dimensions.width + emptySpaceWidth);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [windowDimensions, dimensions.width]);

  useEffect(() => {
    if (index >= data.length) {
      const newIndex = data.length - 1;
      setIndex(newIndex);
      currentIndex.value = newIndex;
      translateX.value = newIndex * -(dimensions.width + emptySpaceWidth);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data?.length, dimensions.width]);

So it looks like it is just missing dependencies, but I was wondering why it specifically has eslint-disable-next-line react-hooks/exhaustive-deps rule which would have helped to avoid the issue in the first place.

[pavelbabenko]

Released in v0.3.6