diff --git a/packages/react-native-sortables/src/providers/SharedProvider.tsx b/packages/react-native-sortables/src/providers/SharedProvider.tsx
index 5552b750..37b217e4 100644
--- a/packages/react-native-sortables/src/providers/SharedProvider.tsx
+++ b/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({
,
// Provider used for layout debugging (can be used only in dev mode)
__DEV__ && debug && ,
+ // Provider used for active item values
+ ,
// Provider used for shared values between all providers below
(() => {
+ // POSITIONS
+ const touchPosition = useSharedValue(null);
+ const activeItemPosition = useSharedValue(null);
+
+ // DIMENSIONS
+ const activeItemDimensions = useSharedValue(null);
+
+ // DRAG STATE
+ const activeItemKey = useSharedValue(null);
+ const prevActiveItemKey = useSharedValue(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 };
diff --git a/packages/react-native-sortables/src/providers/shared/CommonValuesProvider.ts b/packages/react-native-sortables/src/providers/shared/CommonValuesProvider.ts
index 17460f18..c4efb8ab 100644
--- a/packages/react-native-sortables/src/providers/shared/CommonValuesProvider.ts
+++ b/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>({});
- const touchPosition = useSharedValue(null);
- const activeItemPosition = useSharedValue(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);
const containerHeight = useSharedValue(null);
- const activeItemDimensions = useSharedValue(null);
const itemDimensions = useSharedValue>({});
const itemsStyleOverride = useSharedValue>(
initialItemsStyleOverride
);
- // DRAG STATE
- const activeItemKey = useSharedValue(null);
- const prevActiveItemKey = useSharedValue(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
}
};
});
diff --git a/packages/react-native-sortables/src/providers/shared/index.ts b/packages/react-native-sortables/src/providers/shared/index.ts
index 6fa652ac..f5184254 100644
--- a/packages/react-native-sortables/src/providers/shared/index.ts
+++ b/packages/react-native-sortables/src/providers/shared/index.ts
@@ -1,3 +1,4 @@
+export { ActiveItemValuesProvider } from './ActiveItemValuesProvider';
export { AutoScrollProvider, useAutoScrollContext } from './AutoScrollProvider';
export {
CommonValuesContext,
diff --git a/packages/react-native-sortables/src/providers/utils/createProvider.tsx b/packages/react-native-sortables/src/providers/utils/createProvider.tsx
index 3f7145fc..edad98ef 100644
--- a/packages/react-native-sortables/src/providers/utils/createProvider.tsx
+++ b/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 ?? {};
diff --git a/packages/react-native-sortables/src/types/providers/shared.ts b/packages/react-native-sortables/src/types/providers/shared.ts
index ca044210..dc191d8a 100644
--- a/packages/react-native-sortables/src/types/providers/shared.ts
+++ b/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;
+ activeItemPosition: SharedValue;
+
+ // DIMENSIONS
+ activeItemDimensions: SharedValue;
+
+ // DRAG STATE
+ prevActiveItemKey: SharedValue;
+ activeItemKey: SharedValue;
+ activationState: SharedValue;
+ activeAnimationProgress: SharedValue;
+ inactiveAnimationProgress: SharedValue;
+ activeItemDropped: SharedValue;
+};
+
+// COMMON VALUES
+
/**
* Context values shared between all providers.
* (they are stored in a single context to make the access to them easier
@@ -45,8 +66,6 @@ export type CommonValuesContextType = {
// POSITIONS
itemPositions: SharedValue>;
- touchPosition: SharedValue;
- activeItemPosition: SharedValue;
// DIMENSIONS
controlledContainerDimensions: SharedValue;
@@ -54,18 +73,9 @@ export type CommonValuesContextType = {
measuredContainerHeight: SharedValue;
containerWidth: SharedValue;
containerHeight: SharedValue;
- activeItemDimensions: SharedValue;
itemDimensions: SharedValue>;
itemsStyleOverride: SharedValue>;
- // DRAG STATE
- prevActiveItemKey: SharedValue;
- activeItemKey: SharedValue;
- activationState: SharedValue;
- activeAnimationProgress: SharedValue;
- inactiveAnimationProgress: SharedValue;
- activeItemDropped: SharedValue;
-
// OTHER
containerRef: AnimatedRef;
sortEnabled: SharedValue;
@@ -75,7 +85,8 @@ export type CommonValuesContextType = {
customHandle: boolean;
itemsOverridesStyle: AnimatedStyle;
-} & AnimatedValues &
+} & ActiveItemValuesContextType &
+ AnimatedValues &
AnimatedValues &
AnimatedValues>;