From 67468abd87f79f9398d0cf4ca29b9065f1d6e7d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20=C5=81opaci=C5=84ski?= Date: Tue, 13 Jan 2026 18:54:36 +0100 Subject: [PATCH 1/2] Add item zIndex preserving based on the order of items --- .../providers/shared/hooks/useItemZIndex.ts | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/react-native-sortables/src/providers/shared/hooks/useItemZIndex.ts b/packages/react-native-sortables/src/providers/shared/hooks/useItemZIndex.ts index 13294183..1e9d1016 100644 --- a/packages/react-native-sortables/src/providers/shared/hooks/useItemZIndex.ts +++ b/packages/react-native-sortables/src/providers/shared/hooks/useItemZIndex.ts @@ -7,18 +7,26 @@ export default function useItemZIndex( key: string, activationAnimationProgress: SharedValue ): SharedValue { - const { activeItemKey, prevActiveItemKey } = useCommonValuesContext(); + const { activeItemKey, indexToKey, keyToIndex, prevActiveItemKey } = + useCommonValuesContext(); return useDerivedValue(() => { + const itemCount = indexToKey.value.length; + if (activeItemKey.value === key) { - return 3; - } - if (prevActiveItemKey.value === key) { - return 2; + return 2 * itemCount; } + + const orderZIndex = keyToIndex.value[key] ?? 0; + if (activationAnimationProgress.value > 0) { - return 1; + if (prevActiveItemKey.value === key) { + return 2 * itemCount - 1; + } + + return itemCount + orderZIndex; } - return 0; + + return orderZIndex; }); } From 7fb5fd18d84c4d5c3c648968313cc8a426cbbb07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20=C5=81opaci=C5=84ski?= Date: Tue, 13 Jan 2026 19:12:10 +0100 Subject: [PATCH 2/2] Safer zIndex calculation --- .../src/providers/shared/hooks/useItemZIndex.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-native-sortables/src/providers/shared/hooks/useItemZIndex.ts b/packages/react-native-sortables/src/providers/shared/hooks/useItemZIndex.ts index 1e9d1016..d86e3baa 100644 --- a/packages/react-native-sortables/src/providers/shared/hooks/useItemZIndex.ts +++ b/packages/react-native-sortables/src/providers/shared/hooks/useItemZIndex.ts @@ -14,14 +14,14 @@ export default function useItemZIndex( const itemCount = indexToKey.value.length; if (activeItemKey.value === key) { - return 2 * itemCount; + return 2 * itemCount + 1; } const orderZIndex = keyToIndex.value[key] ?? 0; if (activationAnimationProgress.value > 0) { if (prevActiveItemKey.value === key) { - return 2 * itemCount - 1; + return 2 * itemCount; } return itemCount + orderZIndex;