Cannot slide image inside Flatlist

[sumudu-dewasurendra]

When using react-native-reanimated-zoom component inside Flatlist it cannot slide.

Platform - Android Code example -

<FlatList
          data={media}
          extraData={media}
          horizontal={true}
          renderItem={({ item, index }) => {
            <Zoom>
              <Image {...imageProps} source={{ uri: item.imageUri }}/>
            </Zoom>
          }}
          keyExtractor={(item, index) => `${index}`}
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
          initialScrollIndex={focusIndex}
          onScrollToIndexFailed={() => {
          }}
          pagingEnabled={true}
          onViewableItemsChanged={onViewRef.current}
          viewabilityConfig={viewConfigRef.current}
          scrollEnabled={!isUsingMedia}
          getItemLayout={flatlistLayout}
        />

[intergalacticspacehighway]

I think the pan responder is taking over the FlatList swipes. I'll try something. In the meanwhile, can you try the below gist and let me know if it works as expected?

https://gist.github.com/intergalacticspacehighway/864d8d510c324a720ead72efac5f0551

[putuoka]

I think the pan responder is taking over the FlatList swipes. I'll try something. In the meanwhile, can you try the below gist and let me know if it works as expected?

https://gist.github.com/intergalacticspacehighway/864d8d510c324a720ead72efac5f0551

can u please help me to make that work in my react native javascript types? i'm not using typescript btw

[intergalacticspacehighway]

@putuoka can you try this? https://gist.github.com/intergalacticspacehighway/bf00f613ffc61b1e4da504d55ef8e4d2

[putuoka]

@putuoka can you try this? https://gist.github.com/intergalacticspacehighway/bf00f613ffc61b1e4da504d55ef8e4d2

thanks that was fast. it's working. no error but the behaviour is change. better the original one. the pinch always bounce back to normal because u add reset code

        translationX.value = withTiming(0);
        translationY.value = withTiming(0);
        scale.value = withTiming(1);
        originX.value = 0;
        originY.value = 0;
        isPinching.value = false;
        prevScale.value = 0;
        prevTranslationX.value = 0;
        prevTranslationY.value = 0;
        panTranslateX.value = 0;
        panTranslateY.value = 0;

also i tried new prop onPinchStart but my console log always run even i'm not using or start pinch

<GestureHandlerRootView>
      <PinchToZoom onPinchStart={console.log('test')}>
       <RenderComponent item={item} />
        </PinchToZoom>
</GestureHandlerRootView>

edit: oops sorry for the last one my code is wrong. this is working good

<GestureHandlerRootView>
        <PinchToZoom
          onPinchStart={() => {
            console.log('test');
          }}>
          <RenderComponent item={item} />
        </PinchToZoom>
</GestureHandlerRootView>

[intergalacticspacehighway]

Fixed here https://github.com/intergalacticspacehighway/react-native-reanimated-zoom/pull/7. Can you try 0.1.4 and let me know how it works?

[intergalacticspacehighway]

added an API in 0.2.0 that handles a few more cases!

[intergalacticspacehighway]

Closing as it's solved in 0.2.0. Let me know if you still face any issues.