fix: Multi touch flickering issue (#392)

## Description

This PR fixes multi touch flickering issue caused by the `handleDragEnd`
being called on the cancelled gesture. The second touch gesture was
properly ignored and failed but it called `handleDragEnd` as this method
is always called in the `onFinalize` callback, which invalidated not
only the second gesture that we wanted to ignore, but also the first one
that was correct and should be still handled.

The behavior on Android is unfortunately not perfect, because when we
start touching a second item, the gesture on the first one gets
invalidated as the `onTouchesUp` callback is not properly called on the
gesture instance. This is a `react-native-gesture-handler` issue that I
reported here:

software-mansion/react-native-gesture-handler#3543

Author: MatiPl01

packages/react-native-sortables/src/constants/platform.ts

@@ -2,5 +2,6 @@ import { version as reactVersion } from 'react';
 import { Platform } from 'react-native';
 
 export const IS_WEB = Platform.OS === 'web';
+export const IS_ANDROID = Platform.OS === 'android';
 
 export const IS_REACT_19 = reactVersion.startsWith('19.');

packages/react-native-sortables/src/providers/shared/DragProvider.ts

@@ -456,47 +456,54 @@ const { DragProvider, useDragContext } = createProvider('Drag')<
   const handleDragEnd = useCallback(
     (key: string, activationAnimationProgress: SharedValue<number>) => {
       'worklet';
+      if (activeItemKey.value && activeItemKey.value !== key) {
+        return;
+      }
+
+      clearAnimatedTimeout(activationTimeoutId.value);
       touchStartTouch.value = null;
       currentTouch.value = null;
-      dragStartItemTouchOffset.value = null;
-      dragStartTouchPosition.value = null;
-      activeItemPosition.value = null;
-      activeItemDimensions.value = null;
-      touchPosition.value = null;
       activationState.value = DragActivationState.INACTIVE;
-      updateStartScrollOffset?.(null);
+
+      if (activeItemKey.value === null) {
+        return;
+      }
 
       if (activeHandleMeasurements) {
         activeHandleMeasurements.value = null;
       }
 
-      const fromIndex = dragStartIndex.value;
-      const toIndex = keyToIndex.value[key]!;
-
-      if (activeItemKey.value !== null) {
-        prevActiveItemKey.value = activeItemKey.value;
-        activeItemKey.value = null;
-        updateLayer?.(LayerState.INTERMEDIATE);
-        haptics.medium();
-
-        stableOnDragEnd({
-          fromIndex,
-          indexToKey: indexToKey.value,
-          key,
-          keyToIndex: keyToIndex.value,
-          toIndex
-        });
-      }
+      prevActiveItemKey.value = activeItemKey.value;
+      dragStartItemTouchOffset.value = null;
+      dragStartTouchPosition.value = null;
+      activeItemPosition.value = null;
+      activeItemDimensions.value = null;
+      touchPosition.value = null;
+      activeItemKey.value = null;
+      dragStartIndex.value = -1;
 
       const animate = (callback?: (finished: boolean | undefined) => void) =>
         withTiming(0, { duration: dropAnimationDuration.value }, callback);
 
-      dragStartIndex.value = -1;
       activationAnimationProgress.value = animate();
       inactiveAnimationProgress.value = animate();
       activeAnimationProgress.value = animate();
 
-      clearAnimatedTimeout(activationTimeoutId.value);
+      updateStartScrollOffset?.(null);
+      updateLayer?.(LayerState.INTERMEDIATE);
+      haptics.medium();
+
+      const fromIndex = dragStartIndex.value;
+      const toIndex = keyToIndex.value[key]!;
+
+      stableOnDragEnd({
+        fromIndex,
+        indexToKey: indexToKey.value,
+        key,
+        keyToIndex: keyToIndex.value,
+        toIndex
+      });
+
       activationTimeoutId.value = setAnimatedTimeout(() => {
         prevActiveItemKey.value = null;
         activeItemDropped.value = true;