The right image collapsing while zooming inside a FlatList

[rahmanharoon]

I have a FlatList which is scrolling horizontal and I need to zoom and move and slide the images inside of that.

So I used a PanGestureHandler and wrapped PinchGestureHandler inside of that.My problem is the right side image is collapsing to left Image while zooming.Any suggestion will be useful

Here is my code:

<PanGestureHandler
                onGestureEvent={handlePan}
                onHandlerStateChange={(e) => {
                  if (e.nativeEvent.oldState === State.ACTIVE) {
                    translateY.extractOffset();
                    translateX.extractOffset();
                  }
                  console.log('EVENT', e.nativeEvent);
                }}
              >
                <Animated.View collapsable={false} {...handler.panHandlers}>
                  <PinchGestureHandler onGestureEvent={handleZoom} >
                    <Animated.Image 
                    source={{uri: item.url}}
                      resizeMode="contain"
                      style={
                        disablefullScreen
                          ? {
                              width: width,
                              height: width / 1.3,
                              alignSelf: 'center',
                              justifyContent: 'center',
                              top: width / 1.7,
                              transform: [
                                {rotate: angle},
                                {scale},
                                {translateX},
                                {translateY},
                              ],
                            }
                          : [StyleSheet.absoluteFillObject]
                      }
                    />
                  </PinchGestureHandler>
                </Animated.View>
              </PanGestureHandler>

Pan events:

const scale = new Animated.Value(1);
  const translateX = new Animated.Value(0);
  const translateY = new Animated.Value(0);
  const handleZoom = Animated.event(
    [
      {
        nativeEvent: {scale},
      },
    ],
    {
      useNativeDriver: true,
    },
  );
  const handlePan = Animated.event(
    [{nativeEvent: {translationX: translateX, translationY: translateY}}],
    {listener: (e) => console.log(e.nativeEvent), useNativeDriver: true},
  );

  const handler = PanResponder.create({
    onMoveShouldSetPanResponder:(event, gestureState) => true,
    onMoveShouldSetPanResponderCapture: () => true,
    },

    onPanResponderRelease: (event, gestureState) => {},
  });

Current OP:

Screen.Recording.2021-06-23.at.1.09.34.PM.mp4