fix: Add item zIndex preserving based on the order of items

[MatiPl01]

Description

In the previous implementation, the zIndex was only changed for the active/previously active item. This was fine for most cases apart from these in which the items were implemented in such a way that they were overlapping each other. In this case, after changing the order of items, they were no longer overlapping properly (see recording in the section below).

This PR sets zIndex based on the relative order of items so that the overlapping is preserved after the items are reordered.

Changes showcase

You can see that in the Before recording the previously active item stays above remaining ones (look at the red squares)

Before	After
Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-01-13.at.19.03.39.mp4	Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-01-13.at.19.03.06.mp4

Example source code

import { useCallback } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import type { SortableGridRenderItem } from 'react-native-sortables';
import Sortable from 'react-native-sortables';

import { ScrollScreen } from '@/components';
import { colors, radius, sizes, spacing, text } from '@/theme';

const DATA = Array.from({ length: 5 }, (_, index) => `Item ${index + 1}`);

export default function PlaygroundExample() {
  const renderItem = useCallback<SortableGridRenderItem<string>>(
    ({ item }) => (
      <View style={styles.card}>
        <Text style={styles.text}>{item}</Text>
        <View
          style={{
            backgroundColor: 'red',
            height: 40,
            position: 'absolute',
            right: -20,
            top: -20,
            width: 40
          }}
        />
      </View>
    ),
    []
  );

  return (
    <ScrollScreen contentContainerStyle={styles.container} includeNavBarHeight>
      <Sortable.Grid
        columnGap={10}
        columns={3}
        data={DATA}
        renderItem={renderItem}
        rowGap={10}
      />
    </ScrollScreen>
  );
}

const styles = StyleSheet.create({
  card: {
    alignItems: 'center',
    backgroundColor: '#36877F',
    borderRadius: radius.md,
    height: sizes.xl,
    justifyContent: 'center'
  },
  container: {
    padding: spacing.md
  },
  text: {
    ...text.label2,
    color: colors.white
  }
});

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
react-native-sortables-docs	Ignored	Preview	Jan 13, 2026 6:12pm

[Copilot]

Pull request overview

This PR fixes a z-index issue for sortable items by implementing order-based z-index calculation. Previously, z-index was only adjusted for active and previously active items, which caused incorrect overlapping when items had overlapping visual elements (like the red squares in the example). The new implementation assigns z-index values based on item positions to preserve proper visual layering after reordering.

Changes:

• Modified z-index calculation to consider item order from indexToKey and keyToIndex context values
• Added different z-index tiers for active items, animating items, and static items based on their positions
• Preserved higher z-index for active and previously active items during drag animations

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.