[Bug]: SnapbackZoom example does not always works with Flashlist and CellRendererComponent

[mexysfr]

Summary

Hello,

My use case is simple: a Flashlist whose items are simply made up of a header, an image and a footer.

The image is wrapped by the SnapbackZoom component.

Taking the example from this repo by using a Flashlist and adapting the example to Flashlist's recommendations concerning the CellRendererComponent, I notice that the “overlay” behavior (when playing with the zIndex) is random.

Ideally, the behavior shown in this repo example - i.e., the zoomed image moves above all the others - should work regardless of the image and its position in the Flashlist.

Environment

• Expo (last version)
• Flashlist (last version)
• React Native Zoom Toolkit (last version)
• Reanimated (last version)
• RNGH (last version)

Bug is present on either iOS and Android

Steps to Reproduce

I have provided a very simple minimal repo to reproduce here: https://github.com/mexysfr/pinch-zoom-cell-renderer Here's also a demonstration video: https://github.com/user-attachments/assets/bd9f586d-56fd-4ab8-9868-f8b7bc3dd3d7

[Glazzes]

@mexysfr Roasted the AI so bad it vanished from existence, I looked at your code and it's definitively inconsistent, I changed the cell renderer to this and at least for me it worked 100% of the time:

import { CellContainer } from "@shopify/flash-list";
import Animated, { useAnimatedStyle } from "react-native-reanimated";

const AnimatedCellContainer = Animated.createAnimatedComponent(CellContainer);
const CellRenderer = (props: any) => {
  const animatedStyle = useAnimatedStyle(() => {
    return {
      zIndex: props.index === props.activeIndex.value ? 100 : 0,
    }
  }, [props.index, props.activeIndex]);

  return (
    <AnimatedCellContainer {...props} style={[{ ...props.style}, animatedStyle]}>
      {props.children}
    </AnimatedCellContainer>
  )
}

export default CellRenderer;

[mexysfr]

@Glazzes ahah yeah, GH takes action as fast as you answer to the issues. Thanks for this 🙏 I'll give a try and post a new comment to confirm the good behavior of your solution.

[mexysfr]

@Glazzes The solution obviously works on both OS, thanks again for the help.

By the way: I notice that the pinch is detected instantly when it's horizontal, but there seems to be a collision with the Flashlist scroll when the pinch is vertical (at least on physical android device).

Any advice on how to make SnapbackZoom's gesture detector take priority, or how to better manage the scoll event (i.e. one finger) in the flashlist when pinching vertically?

Ideally, I think the solution is that when 2 fingers are placed on the screen, list scrolling should be disabled.

I've tried a few configurations, wrapping the Flashlist with a manual type GestureDetector and filtering on the numberOfTouches (2) to disable scrolling, but nothing very conclusive.

Any help would be much appreciated but if you need me to create another issue so you could close this one it will be fine for me, just let me know!

[Glazzes]

@mexysfr I'm kind of clueless about that scroll and gesture handler problem, I've been trying to understand this snippet from the GH repo, it's like a pan gesture that works until reaches a certain position then it fails and let the native scroll proceed, If I'm honest I do not understand it very well yet.