chore: Move active item related value to a separate provider (#359)

## Description

This PR is just a preparation for the next one in which I will add
support for item dragging between sortable components (like dragging
from one grid to another). To implement this feature, I need to know the
current position of the active item in all sortable components to detect
when it enters another sortable component.

Author: MatiPl01

packages/react-native-sortables/src/providers/SharedProvider.tsx

@@ -19,6 +19,7 @@ import type {
   SortableCallbacks
 } from '../types';
 import {
+  ActiveItemValuesProvider,
   AutoScrollProvider,
   CommonValuesProvider,
   CustomHandleProvider,
@@ -75,6 +76,8 @@ export default function SharedProvider({
     <LayerProvider />,
     // Provider used for layout debugging (can be used only in dev mode)
     __DEV__ && debug && <DebugProvider />,
+    // Provider used for active item values
+    <ActiveItemValuesProvider />,
     // Provider used for shared values between all providers below
     <CommonValuesProvider
       customHandle={customHandle}

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

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+import { useSharedValue } from 'react-native-reanimated';
+
+import type {
+  ActiveItemValuesContextType,
+  Dimensions,
+  Vector
+} from '../../types';
+import { DragActivationState } from '../../types';
+import { createProvider } from '../utils';
+
+type ActiveItemValuesProviderProps = {
+  children?: ReactNode;
+};
+
+const { ActiveItemValuesProvider, useActiveItemValuesContext } = createProvider(
+  'ActiveItemValues'
+)<ActiveItemValuesProviderProps, ActiveItemValuesContextType>(() => {
+  // POSITIONS
+  const touchPosition = useSharedValue<Vector | null>(null);
+  const activeItemPosition = useSharedValue<Vector | null>(null);
+
+  // DIMENSIONS
+  const activeItemDimensions = useSharedValue<Dimensions | null>(null);
+
+  // DRAG STATE
+  const activeItemKey = useSharedValue<null | string>(null);
+  const prevActiveItemKey = useSharedValue<null | string>(null);
+  const activationState = useSharedValue(DragActivationState.INACTIVE);
+  const activeAnimationProgress = useSharedValue(0);
+  const inactiveAnimationProgress = useSharedValue(0);
+  const activeItemDropped = useSharedValue(true);
+
+  return {
+    value: {
+      activationState,
+      activeAnimationProgress,
+      activeItemDimensions,
+      activeItemDropped,
+      activeItemKey,
+      activeItemPosition,
+      inactiveAnimationProgress,
+      prevActiveItemKey,
+      touchPosition
+    }
+  };
+});
+
+export { ActiveItemValuesProvider, useActiveItemValuesContext };

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

@@ -21,9 +21,10 @@ import type {
   Maybe,
   Vector
 } from '../../types';
-import { AbsoluteLayoutState, DragActivationState } from '../../types';
+import { AbsoluteLayoutState } from '../../types';
 import { areArraysDifferent } from '../../utils';
 import { createProvider } from '../utils';
+import { useActiveItemValuesContext } from './ActiveItemValuesProvider';
 
 let nextId = 0;
 
@@ -75,8 +76,6 @@ const { CommonValuesContext, CommonValuesProvider, useCommonValuesContext } =
 
     // POSITIONS
     const itemPositions = useSharedValue<Record<string, Vector>>({});
-    const touchPosition = useSharedValue<Vector | null>(null);
-    const activeItemPosition = useSharedValue<Vector | null>(null);
 
     // DIMENSIONS
     // measured dimensions via onLayout used to calculate containerWidth and containerHeight
@@ -88,20 +87,11 @@ const { CommonValuesContext, CommonValuesProvider, useCommonValuesContext } =
     // (containerWidth and containerHeight should be used in most cases)
     const containerWidth = useSharedValue<null | number>(null);
     const containerHeight = useSharedValue<null | number>(null);
-    const activeItemDimensions = useSharedValue<Dimensions | null>(null);
     const itemDimensions = useSharedValue<Record<string, Dimensions>>({});
     const itemsStyleOverride = useSharedValue<Maybe<ViewStyle>>(
       initialItemsStyleOverride
     );
 
-    // DRAG STATE
-    const activeItemKey = useSharedValue<null | string>(null);
-    const prevActiveItemKey = useSharedValue<null | string>(null);
-    const activationState = useSharedValue(DragActivationState.INACTIVE);
-    const activeAnimationProgress = useSharedValue(0);
-    const inactiveAnimationProgress = useSharedValue(0);
-    const activeItemDropped = useSharedValue(true);
-
     // ITEM ACTIVATION SETTINGS
     const dragActivationDelay = useAnimatableValue(_dragActivationDelay);
     const activationAnimationDuration = useAnimatableValue(
@@ -149,15 +139,10 @@ const { CommonValuesContext, CommonValuesProvider, useCommonValuesContext } =
 
     return {
       value: {
+        ...useActiveItemValuesContext(),
         absoluteLayoutState,
         activationAnimationDuration,
-        activationState,
-        activeAnimationProgress,
-        activeItemDimensions,
-        activeItemDropped,
-        activeItemKey,
         activeItemOpacity,
-        activeItemPosition,
         activeItemScale,
         activeItemShadowOpacity,
         animateLayoutOnReorderOnly,
@@ -171,7 +156,6 @@ const { CommonValuesContext, CommonValuesProvider, useCommonValuesContext } =
         dragActivationFailOffset,
         dropAnimationDuration,
         enableActiveItemSnap,
-        inactiveAnimationProgress,
         inactiveItemOpacity,
         inactiveItemScale,
         indexToKey,
@@ -183,12 +167,10 @@ const { CommonValuesContext, CommonValuesProvider, useCommonValuesContext } =
         keyToIndex,
         measuredContainerHeight,
         measuredContainerWidth,
-        prevActiveItemKey,
         shouldAnimateLayout,
         snapOffsetX,
         snapOffsetY,
-        sortEnabled,
-        touchPosition
+        sortEnabled
       }
     };
   });

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

@@ -1,3 +1,4 @@
+export { ActiveItemValuesProvider } from './ActiveItemValuesProvider';
 export { AutoScrollProvider, useAutoScrollContext } from './AutoScrollProvider';
 export {
   CommonValuesContext,

packages/react-native-sortables/src/providers/utils/createProvider.tsx

@@ -3,6 +3,7 @@
 import {
   createContext,
   type PropsWithChildren,
+  type ReactNode,
   useContext,
   useMemo
 } from 'react';
@@ -20,7 +21,7 @@ export default function createProvider<
     factory: (props: ProviderProps) => {
       value?: ContextValue;
       enabled?: boolean;
-      children?: React.ReactNode;
+      children?: ReactNode;
     }
   ) {
     const { guarded = true } = options ?? {};

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

@@ -31,6 +31,27 @@ import type { AnimatedValues, AnyRecord, Maybe } from '../utils';
 
 export type ControlledContainerDimensions = { width: boolean; height: boolean };
 
+// ACTIVE ITEM VALUES
+
+export type ActiveItemValuesContextType = {
+  // POSITIONS
+  touchPosition: SharedValue<Vector | null>;
+  activeItemPosition: SharedValue<Vector | null>;
+
+  // DIMENSIONS
+  activeItemDimensions: SharedValue<Dimensions | null>;
+
+  // DRAG STATE
+  prevActiveItemKey: SharedValue<null | string>;
+  activeItemKey: SharedValue<null | string>;
+  activationState: SharedValue<DragActivationState>;
+  activeAnimationProgress: SharedValue<number>;
+  inactiveAnimationProgress: SharedValue<number>;
+  activeItemDropped: SharedValue<boolean>;
+};
+
+// COMMON VALUES
+
 /**
  * Context values shared between all providers.
  * (they are stored in a single context to make the access to them easier
@@ -45,27 +66,16 @@ export type CommonValuesContextType = {
 
   // POSITIONS
   itemPositions: SharedValue<Record<string, Vector>>;
-  touchPosition: SharedValue<Vector | null>;
-  activeItemPosition: SharedValue<Vector | null>;
 
   // DIMENSIONS
   controlledContainerDimensions: SharedValue<ControlledContainerDimensions>;
   measuredContainerWidth: SharedValue<null | number>;
   measuredContainerHeight: SharedValue<null | number>;
   containerWidth: SharedValue<null | number>;
   containerHeight: SharedValue<null | number>;
-  activeItemDimensions: SharedValue<Dimensions | null>;
   itemDimensions: SharedValue<Record<string, Dimensions>>;
   itemsStyleOverride: SharedValue<Maybe<ViewStyle>>;
 
-  // DRAG STATE
-  prevActiveItemKey: SharedValue<null | string>;
-  activeItemKey: SharedValue<null | string>;
-  activationState: SharedValue<DragActivationState>;
-  activeAnimationProgress: SharedValue<number>;
-  inactiveAnimationProgress: SharedValue<number>;
-  activeItemDropped: SharedValue<boolean>;
-
   // OTHER
   containerRef: AnimatedRef<View>;
   sortEnabled: SharedValue<boolean>;
@@ -75,7 +85,8 @@ export type CommonValuesContextType = {
   customHandle: boolean;
 
   itemsOverridesStyle: AnimatedStyle<ViewStyle>;
-} & AnimatedValues<ActiveItemDecorationSettings> &
+} & ActiveItemValuesContextType &
+  AnimatedValues<ActiveItemDecorationSettings> &
   AnimatedValues<ActiveItemSnapSettings> &
   AnimatedValues<Omit<ItemDragSettings, 'overDrag' | 'reorderTriggerOrigin'>>;