feat: Base multi zone provider (#409)

## Description

This PR adds a basic implementation of the multi zone provider. It just
adds the base component without any functionality and the outlet
component that detects if the active item is currently hovered over it.

Upcoming PRs will add more functionalities, like dragging items between
different sortable containers, etc.

## Example recording


https://github.com/user-attachments/assets/02fd6bcc-7cc4-4775-b70e-f8f7e0b47892

Author: MatiPl01

example/app/src/examples/SortableGrid/features/MultiZoneExample.tsx

@@ -0,0 +1,45 @@
+import { useCallback } from 'react';
+import type { SortableGridRenderItem } from 'react-native-sortables';
+import Sortable from 'react-native-sortables';
+
+import { GridCard, ScrollScreen, Section } from '@/components';
+import { spacing } from '@/theme';
+import { getItems } from '@/utils';
+
+const DATA = getItems(8);
+const COLUMNS = 4;
+
+export default function MultiZoneExample() {
+  const renderItem = useCallback<SortableGridRenderItem<string>>(
+    ({ item }) => <GridCard>{item}</GridCard>,
+    []
+  );
+
+  return (
+    <ScrollScreen includeNavBarHeight>
+      <Sortable.MultiZoneProvider minActivationDistance={10}>
+        <Section title='Section 1'>
+          <Sortable.Grid
+            columnGap={spacing.xs}
+            columns={COLUMNS}
+            data={DATA}
+            renderItem={renderItem}
+            rowGap={spacing.xs}
+            debug
+          />
+        </Section>
+
+        <Section title='Section 2'>
+          <Sortable.Grid
+            columnGap={spacing.xs}
+            columns={COLUMNS}
+            data={DATA}
+            renderItem={renderItem}
+            rowGap={spacing.xs}
+            debug
+          />
+        </Section>
+      </Sortable.MultiZoneProvider>
+    </ScrollScreen>
+  );
+}

example/app/src/examples/SortableGrid/features/index.ts

@@ -7,5 +7,6 @@ export { default as DragHandleExample } from './DragHandleExample';
 export { default as DropIndicatorExample } from './DropIndicatorExample';
 export { default as FixedItemsExample } from './FixedItemsExample';
 export { default as HorizontalAutoScrollExample } from './HorizontalAutoScrollExample';
+export { default as MultiZoneExample } from './MultiZoneExample';
 export { default as OrderingStrategyExample } from './OrderingStrategyExample';
 export { default as TouchableExample } from './TouchableExample';

example/app/src/examples/navigation/routes.ts

@@ -51,6 +51,10 @@ const routes: Routes = {
             Component: SortableGrid.features.FixedItemsExample,
             name: 'Fixed Items'
           },
+          MultiZone: {
+            Component: SortableGrid.features.MultiZoneExample,
+            name: 'Multi Zone'
+          },
           Callbacks: {
             Component: SortableGrid.features.CallbacksExample,
             name: 'Callbacks'

packages/react-native-sortables/CHANGELOG.md

@@ -1,32 +1,29 @@
 ## [1.7.1](https://github.com/MatiPl01/react-native-sortables/compare/v1.7.0...v1.7.1) (2025-06-16)
 
-
 ### Bug Fixes
 
-* Flex layout issues ([#400](https://github.com/MatiPl01/react-native-sortables/issues/400)) ([891c0b3](https://github.com/MatiPl01/react-native-sortables/commit/891c0b385ed779b7548cdd8da029e09ea8cde61a))
-* Flex layout with custom alignmnets on web ([#401](https://github.com/MatiPl01/react-native-sortables/issues/401)) ([a74cb4b](https://github.com/MatiPl01/react-native-sortables/commit/a74cb4b313bc60125b27d62e39567940dccaf52d))
-* Invalid items animation on screen change ([#396](https://github.com/MatiPl01/react-native-sortables/issues/396)) ([3262064](https://github.com/MatiPl01/react-native-sortables/commit/3262064207d63ca3a251b15df685f6ffe358a4d2))
-* Items not animated before `sortEnabled` is set to `true` ([#398](https://github.com/MatiPl01/react-native-sortables/issues/398)) ([5ff360c](https://github.com/MatiPl01/react-native-sortables/commit/5ff360c765fcbf72feef260eb779e1e1456c0216))
-* Multi touch flickering issue ([#392](https://github.com/MatiPl01/react-native-sortables/issues/392)) ([6427c8d](https://github.com/MatiPl01/react-native-sortables/commit/6427c8dc370f20362facf945fa34af2e5a5c4585))
+- Flex layout issues ([#400](https://github.com/MatiPl01/react-native-sortables/issues/400)) ([891c0b3](https://github.com/MatiPl01/react-native-sortables/commit/891c0b385ed779b7548cdd8da029e09ea8cde61a))
+- Flex layout with custom alignmnets on web ([#401](https://github.com/MatiPl01/react-native-sortables/issues/401)) ([a74cb4b](https://github.com/MatiPl01/react-native-sortables/commit/a74cb4b313bc60125b27d62e39567940dccaf52d))
+- Invalid items animation on screen change ([#396](https://github.com/MatiPl01/react-native-sortables/issues/396)) ([3262064](https://github.com/MatiPl01/react-native-sortables/commit/3262064207d63ca3a251b15df685f6ffe358a4d2))
+- Items not animated before `sortEnabled` is set to `true` ([#398](https://github.com/MatiPl01/react-native-sortables/issues/398)) ([5ff360c](https://github.com/MatiPl01/react-native-sortables/commit/5ff360c765fcbf72feef260eb779e1e1456c0216))
+- Multi touch flickering issue ([#392](https://github.com/MatiPl01/react-native-sortables/issues/392)) ([6427c8d](https://github.com/MatiPl01/react-native-sortables/commit/6427c8dc370f20362facf945fa34af2e5a5c4585))
 
 # [1.7.0](https://github.com/MatiPl01/react-native-sortables/compare/v1.6.0...v1.7.0) (2025-05-26)
 
-
 ### Bug Fixes
 
-* Invalid call to gesture manager when item is no longer available ([#385](https://github.com/MatiPl01/react-native-sortables/issues/385)) ([5e5e1ca](https://github.com/MatiPl01/react-native-sortables/commit/5e5e1ca9cb7e93d3b4707e185c9bb30d0afd6de7))
-* Invalid custom handle measurement ([#384](https://github.com/MatiPl01/react-native-sortables/issues/384)) ([ad03d2b](https://github.com/MatiPl01/react-native-sortables/commit/ad03d2b7e970f57583e15e6cce9b3424b1ec220b)), closes [#377](https://github.com/MatiPl01/react-native-sortables/issues/377)
-* onPress not fired when activation delay is low ([#377](https://github.com/MatiPl01/react-native-sortables/issues/377)) ([07065b5](https://github.com/MatiPl01/react-native-sortables/commit/07065b527f23637dfd3dd96401490dc0b89e4f96)), closes [#375](https://github.com/MatiPl01/react-native-sortables/issues/375)
-* Order change callback invalid keyToIndex and shadow color interpolation ([#380](https://github.com/MatiPl01/react-native-sortables/issues/380)) ([c0b3c03](https://github.com/MatiPl01/react-native-sortables/commit/c0b3c0351f6837f9b9688dfc387247be10b145bc))
-* Stop passing excessive data to the item context ([#383](https://github.com/MatiPl01/react-native-sortables/issues/383)) ([0b466ac](https://github.com/MatiPl01/react-native-sortables/commit/0b466aca7434327e4acd81f941b4f5dd80e1c02d))
-
+- Invalid call to gesture manager when item is no longer available ([#385](https://github.com/MatiPl01/react-native-sortables/issues/385)) ([5e5e1ca](https://github.com/MatiPl01/react-native-sortables/commit/5e5e1ca9cb7e93d3b4707e185c9bb30d0afd6de7))
+- Invalid custom handle measurement ([#384](https://github.com/MatiPl01/react-native-sortables/issues/384)) ([ad03d2b](https://github.com/MatiPl01/react-native-sortables/commit/ad03d2b7e970f57583e15e6cce9b3424b1ec220b)), closes [#377](https://github.com/MatiPl01/react-native-sortables/issues/377)
+- onPress not fired when activation delay is low ([#377](https://github.com/MatiPl01/react-native-sortables/issues/377)) ([07065b5](https://github.com/MatiPl01/react-native-sortables/commit/07065b527f23637dfd3dd96401490dc0b89e4f96)), closes [#375](https://github.com/MatiPl01/react-native-sortables/issues/375)
+- Order change callback invalid keyToIndex and shadow color interpolation ([#380](https://github.com/MatiPl01/react-native-sortables/issues/380)) ([c0b3c03](https://github.com/MatiPl01/react-native-sortables/commit/c0b3c0351f6837f9b9688dfc387247be10b145bc))
+- Stop passing excessive data to the item context ([#383](https://github.com/MatiPl01/react-native-sortables/issues/383)) ([0b466ac](https://github.com/MatiPl01/react-native-sortables/commit/0b466aca7434327e4acd81f941b4f5dd80e1c02d))
 
 ### Features
 
-* Active item dropped callback, more props in drag start callback ([#381](https://github.com/MatiPl01/react-native-sortables/issues/381)) ([ef6e6cd](https://github.com/MatiPl01/react-native-sortables/commit/ef6e6cd84e1df65b7690c57d6fa8af13160b77aa))
-* Add keyToIndex and indexToKey to the item context ([#379](https://github.com/MatiPl01/react-native-sortables/issues/379)) ([9166043](https://github.com/MatiPl01/react-native-sortables/commit/91660436ace23d988c2ab83fb51d8b932cd3bffe))
-* Add more params to the item drop callback ([#382](https://github.com/MatiPl01/react-native-sortables/issues/382)) ([36fe591](https://github.com/MatiPl01/react-native-sortables/commit/36fe59171e9fb58d3a1e6d63f7fd0000ffd4cf38))
-* Add more touch events to the touchable ([#378](https://github.com/MatiPl01/react-native-sortables/issues/378)) ([c60500f](https://github.com/MatiPl01/react-native-sortables/commit/c60500fb0c3be27325c8b91a6f42c9237cf72d6f))
+- Active item dropped callback, more props in drag start callback ([#381](https://github.com/MatiPl01/react-native-sortables/issues/381)) ([ef6e6cd](https://github.com/MatiPl01/react-native-sortables/commit/ef6e6cd84e1df65b7690c57d6fa8af13160b77aa))
+- Add keyToIndex and indexToKey to the item context ([#379](https://github.com/MatiPl01/react-native-sortables/issues/379)) ([9166043](https://github.com/MatiPl01/react-native-sortables/commit/91660436ace23d988c2ab83fb51d8b932cd3bffe))
+- Add more params to the item drop callback ([#382](https://github.com/MatiPl01/react-native-sortables/issues/382)) ([36fe591](https://github.com/MatiPl01/react-native-sortables/commit/36fe59171e9fb58d3a1e6d63f7fd0000ffd4cf38))
+- Add more touch events to the touchable ([#378](https://github.com/MatiPl01/react-native-sortables/issues/378)) ([c60500f](https://github.com/MatiPl01/react-native-sortables/commit/c60500fb0c3be27325c8b91a6f42c9237cf72d6f))
 
 # [1.6.0](https://github.com/MatiPl01/react-native-sortables/compare/v1.5.2...v1.6.0) (2025-04-27)
 

packages/react-native-sortables/src/components/SortableFlex.tsx

@@ -70,8 +70,8 @@ function SortableFlex(props: SortableFlexProps) {
       {...sharedProps}
       controlledContainerDimensions={controlledContainerDimensions}
       debug={debug}
-      initialItemsStyleOverride={styles.styleOverride}
       itemKeys={itemKeys}
+      initialCanMeasureItems
       onDragEnd={onDragEnd}>
       <FlexLayoutProvider {...styleProps} itemsCount={itemKeys.length}>
         <OrderUpdaterComponent
@@ -176,7 +176,8 @@ function SortableFlexInner({
           entering={itemEntering ?? undefined}
           exiting={itemExiting ?? undefined}
           itemKey={key}
-          key={key}>
+          key={key}
+          style={styles.styleOverride}>
           {child}
         </DraggableView>
       ))}

packages/react-native-sortables/src/components/SortableGrid.tsx

@@ -89,9 +89,6 @@ function SortableGrid<I>(props: SortableGridProps<I>) {
       controlledContainerDimensions={controlledContainerDimensions}
       debug={debug}
       itemKeys={itemKeys}
-      initialItemsStyleOverride={
-        isVertical ? undefined : styles.horizontalStyleOverride
-      }
       onDragEnd={onDragEnd}>
       <GridLayoutProvider
         columnGap={columnGapValue}
@@ -165,18 +162,40 @@ function SortableGridInner<I>({
   rowHeight,
   ...containerProps
 }: SortableGridInnerProps<I>) {
+  const { mainGroupSize } = useGridLayoutContext();
+
   const animatedInnerStyle = useAnimatedStyle(() => ({
     flexDirection: isVertical ? 'row' : 'column',
     height: isVertical ? undefined : groups * (rowHeight + rowGap.value),
-    marginHorizontal: -columnGap.value / 2,
-    marginVertical: -rowGap.value / 2
+    ...(mainGroupSize.value
+      ? {
+          columnGap: columnGap.value,
+          marginHorizontal: 0,
+          marginVertical: 0,
+          rowGap: rowGap.value
+        }
+      : {
+          marginHorizontal: -columnGap.value / 2,
+          marginVertical: -rowGap.value / 2
+        })
   }));
 
-  const animatedItemStyle = useAnimatedStyle(() => ({
-    flexBasis: `${100 / groups}%`,
-    paddingHorizontal: columnGap.value / 2,
-    paddingVertical: rowGap.value / 2
-  }));
+  const animatedItemStyle = useAnimatedStyle(() => {
+    if (!mainGroupSize.value) {
+      return {
+        flexBasis: `${100 / groups}%`,
+        paddingHorizontal: columnGap.value / 2,
+        paddingVertical: rowGap.value / 2
+      };
+    }
+
+    return {
+      flexBasis: 'auto',
+      [isVertical ? 'width' : 'height']: mainGroupSize.value,
+      paddingHorizontal: 0,
+      paddingVertical: 0
+    };
+  });
 
   return (
     <SortableContainer
@@ -191,7 +210,10 @@ function SortableGridInner<I>({
           itemKey={key}
           key={key}
           renderItem={renderItem}
-          style={animatedItemStyle}
+          style={[
+            animatedItemStyle,
+            !isVertical && styles.horizontalStyleOverride
+          ]}
         />
       ))}
     </SortableContainer>

packages/react-native-sortables/src/components/shared/CustomHandle.tsx

@@ -1,7 +1,7 @@
 import { type PropsWithChildren, useCallback, useEffect } from 'react';
 import { View } from 'react-native';
 import { GestureDetector } from 'react-native-gesture-handler';
-import { useAnimatedRef } from 'react-native-reanimated';
+import { runOnUI, useAnimatedRef } from 'react-native-reanimated';
 
 import {
   useCustomHandleContext,
@@ -67,7 +67,7 @@ function CustomHandleComponent({
 
   return (
     <GestureDetector gesture={gesture.enabled(dragEnabled)} userSelect='none'>
-      <View collapsable={false} ref={handleRef} onLayout={onLayout}>
+      <View collapsable={false} ref={handleRef} onLayout={runOnUI(onLayout)}>
         {children}
       </View>
     </GestureDetector>

packages/react-native-sortables/src/components/shared/DraggableView/DraggableView.tsx

@@ -40,10 +40,9 @@ function DraggableView({
   const commonValuesContext = useCommonValuesContext();
   const { handleItemMeasurement, removeItemMeasurements } =
     useMeasurementsContext();
-  const { activeItemKey, componentId, customHandle, itemsOverridesStyle } =
-    commonValuesContext;
+  const { activeItemKey, containerId, customHandle } = commonValuesContext;
 
-  const teleportedItemId = `${componentId}-${key}`;
+  const teleportedItemId = `${containerId}-${key}`;
 
   const [isTeleported, setIsTeleported] = useState(false);
   const activationAnimationProgress = useMutableValue(0);
@@ -53,7 +52,7 @@ function DraggableView({
 
   useEffect(() => {
     return () => removeItemMeasurements(key);
-  }, [key, removeItemMeasurements, teleportedItemId]);
+  }, [key, removeItemMeasurements]);
 
   useEffect(() => {
     if (!portalContext) {
@@ -90,7 +89,6 @@ function DraggableView({
         {...layoutAnimations}
         cellStyle={[style, itemStyles]}
         hidden={hidden}
-        itemsOverridesStyle={itemsOverridesStyle}
         onMeasure={onMeasure}>
         <LayoutAnimationConfig skipEntering={false} skipExiting={false}>
           {children}
@@ -127,7 +125,6 @@ function DraggableView({
           baseCellStyle={style}
           isActive={isActive}
           itemKey={key}
-          itemsOverridesStyle={itemsOverridesStyle}
           onMeasure={onMeasure}>
           {children}
         </TeleportedItemCell>

packages/react-native-sortables/src/components/shared/DraggableView/ItemCell.tsx

@@ -5,7 +5,6 @@ import {
   StyleSheet,
   type ViewStyle
 } from 'react-native';
-import type { AnimatedStyle } from 'react-native-reanimated';
 import Animated from 'react-native-reanimated';
 
 import type {
@@ -16,7 +15,6 @@ import type {
 import AnimatedOnLayoutView from '../AnimatedOnLayoutView';
 
 export type ItemCellProps = PropsWithChildren<{
-  itemsOverridesStyle: AnimatedStyle<ViewStyle>;
   cellStyle: AnimatedStyleProp;
   onMeasure: MeasureCallback;
   hidden?: boolean;
@@ -30,16 +28,8 @@ export default function ItemCell({
   entering,
   exiting,
   hidden,
-  itemsOverridesStyle,
   onMeasure
 }: ItemCellProps) {
-  const style = [
-    styles.decoration,
-    cellStyle,
-    itemsOverridesStyle,
-    hidden && styles.hidden
-  ];
-
   const onLayout = hidden
     ? undefined
     : ({
@@ -51,7 +41,9 @@ export default function ItemCell({
       };
 
   return (
-    <AnimatedOnLayoutView style={style} onLayout={onLayout}>
+    <AnimatedOnLayoutView
+      style={[styles.decoration, cellStyle, hidden && styles.hidden]}
+      onLayout={onLayout}>
       {/* TODO - remove itemEntering and itemExiting layout animation in sortables v2 */}
       {entering || exiting ? (
         <Animated.View entering={entering} exiting={exiting}>

packages/react-native-sortables/src/components/shared/DraggableView/TeleportedItemCell.tsx

@@ -1,14 +1,12 @@
 import type { PropsWithChildren } from 'react';
-import type { ViewStyle } from 'react-native';
-import type { AnimatedStyle, SharedValue } from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 import { LayoutAnimationConfig } from 'react-native-reanimated';
 
 import { useTeleportedItemStyles } from '../../../providers';
 import type { AnimatedStyleProp, MeasureCallback } from '../../../types';
 import ItemCell from './ItemCell';
 
 type TeleportedItemCellProps = PropsWithChildren<{
-  itemsOverridesStyle: AnimatedStyle<ViewStyle>;
   activationAnimationProgress: SharedValue<number>;
   baseCellStyle: AnimatedStyleProp;
   isActive: SharedValue<boolean>;
@@ -22,7 +20,6 @@ export default function TeleportedItemCell({
   children,
   isActive,
   itemKey,
-  itemsOverridesStyle,
   onMeasure
 }: TeleportedItemCellProps) {
   const teleportedItemStyles = useTeleportedItemStyles(
@@ -34,7 +31,6 @@ export default function TeleportedItemCell({
   return (
     <ItemCell
       cellStyle={[baseCellStyle, teleportedItemStyles]}
-      itemsOverridesStyle={itemsOverridesStyle}
       onMeasure={onMeasure}>
       <LayoutAnimationConfig skipEntering>{children}</LayoutAnimationConfig>
     </ItemCell>