[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.

[Glazzes]

@mexysfr I know it's kinda late, but reading Gesture Handler documentation I think I already have a solution for these use cases in the form of a property which will make it to the next release.

[mexysfr]

Hi @Glazzes Thanks for you answer and no worry, I was off for a while.
Please let me know if you need help to code or test something on this promising new feature.

[Glazzes]

Hello @mexysfr, Currently this new property only works for ScrollView and it does work surprisingly well, as for Flatlist it has proven to be out of reach for the moment, I made a question on Gesture Handler discussions about this but I still got not replies up to day.

Talking of testing, Expo 52 came full of problems for this library, I've been trying to fix them, if you test SnapbackZoom and ResumableZoom on your devices and let me know if they work as expected that would great, to test this new changes you need to install the dev branch, like this:

yarn add https://github.com/Glazzes/react-native-zoom-toolkit#dev
npm install "https://github.com/Glazzes/react-native-zoom-toolkit#dev" --save