fix: Allow disabling default layer provider

[MatiPl01]

Description

This PR should fix the context menu issue reported in #417. The issue seems to be caused by the zIndex change of the sortable component when the item gets activated, which cancels the long press gesture from the context menu. I haven't found any better solution than this, which lets the user disable the zIndex change and just added a new prop to disable it.

Setting bringToFrontWhenActive to false, unfortunately results in rendering sortable items below its siblings rendered below (after it), which can be seen in the following 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>
    ),
    []
  );

  return (
    <ScrollScreen contentContainerStyle={styles.container} includeNavBarHeight>
      <Sortable.Grid
        bringToFrontWhenActive={false}
        columnGap={10}
        columns={3}
        data={DATA}
        renderItem={renderItem}
        rowGap={10}
      />
      <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
  }
});

bringToFrontWhenActive={true}	bringToFrontWhenActive={false}
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-07-12.at.18.53.12.mp4	Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-07-12.at.18.52.48.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
react-native-sortables-docs	⬜️ Ignored (Inspect)			Jul 12, 2025 5:03pm

[MatiPl01]

🎉 This issue has been resolved in version 1.8.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀