Load/unload Animated.Image based on shared value

[maxaggedon]

I wrote a component which allows the user to pan and zoom across a large image grid.

Transforms run smoothly but I had to introduce some kind of virtualization in order to make it work with potentially 1000+ images. So I can easily access the viewport coordinates (and therefore which images are visible) in worklets, but I need to put it in a state so that I can mount/unmount them to free memory and reduce layout computations.

So I have something like this :

  const [tileViewport, setTileViewport] = [...]
  const tileViewportA = useDerivedValue(() => {...})
  useAnimatedReaction(
    () => {
      return tileViewportA.value;
    },
    (result, previous) => {
      if (
        !previous ||
        result[0][0] !== previous[0][0] ||
        result[0][1] !== previous[0][1] ||
        result[1][0] !== previous[1][0] ||
        result[1][1] !== previous[1][1]
      ) {
        runOnJS(setTileViewport)(result);
      }
    },
  );

In order to reduce JS calls to a minimum, I only update viewport TILE coordinates. It only fires when an image enters or leaves the screen, but it is clearly not perfect... hence the question !

Is it possible to make images outside the viewport costless in terms of performance without unmounting them from the react tree ?

(@wcandillon maybe I should have phrased it can it be done ? 😉)