fix: Fix Tried to synchronously call a non-worklet function

packages/react-native-sortables/src/constants/layoutAnimations.ts

@@ -1,9 +1,9 @@
-'worklet';
 import { type LayoutAnimation, withTiming } from 'react-native-reanimated';
 
 const ITEM_LAYOUT_ANIMATION_DURATION = 300;
 
 export const SortableItemExiting = (): LayoutAnimation => {
+  'worklet';
   const animations = {
     opacity: withTiming(0, {
       duration: ITEM_LAYOUT_ANIMATION_DURATION
@@ -27,6 +27,7 @@ export const SortableItemExiting = (): LayoutAnimation => {
 };
 
 export const SortableItemEntering = (): LayoutAnimation => {
+  'worklet';
   const animations = {
     opacity: withTiming(1, {
       duration: ITEM_LAYOUT_ANIMATION_DURATION

packages/react-native-sortables/src/integrations/reanimated/utils/animatedTimeout.ts

@@ -1,4 +1,3 @@
-'worklet';
 import { makeMutable } from 'react-native-reanimated';
 
 import type { AnyFunction } from '../../../helperTypes';
@@ -9,6 +8,7 @@ const TIMEOUT_ID = makeMutable(0);
 export type AnimatedTimeoutID = number;
 
 function removeFromPendingTimeouts(id: AnimatedTimeoutID): void {
+  'worklet';
   PENDING_TIMEOUTS.modify(pendingTimeouts => {
     'worklet';
     delete pendingTimeouts[id];
@@ -20,6 +20,7 @@ export function setAnimatedTimeout<F extends AnyFunction>(
   callback: F,
   delay = 0
 ): AnimatedTimeoutID {
+  'worklet';
   let startTimestamp: number;
 
   const currentId = TIMEOUT_ID.value;
@@ -45,5 +46,6 @@ export function setAnimatedTimeout<F extends AnyFunction>(
 }
 
 export function clearAnimatedTimeout(handle: AnimatedTimeoutID): void {
+  'worklet';
   removeFromPendingTimeouts(handle);
 }

packages/react-native-sortables/src/integrations/reanimated/utils/interpolation.ts

@@ -1,5 +1,3 @@
-'worklet';
-
 import { Extrapolation, interpolate } from 'react-native-reanimated';
 
 import type { Vector } from '../../../types/layout';
@@ -10,6 +8,7 @@ export const interpolateVector = (
   to: Vector,
   extrapolation?: Extrapolation
 ) => {
+  'worklet';
   const inputRange = [0, 1];
   const extrapolate = extrapolation ?? Extrapolation.CLAMP;
   return {

packages/react-native-sortables/src/providers/flex/FlexLayoutProvider/updates/insert/utils.ts

@@ -1,4 +1,3 @@
-'worklet';
 import type { ItemSizes } from '../../../../../types';
 import { reorderInsert, resolveDimension } from '../../../../../utils';
 
@@ -28,6 +27,7 @@ const getGroupItemIndex = (
   group: Array<string>,
   keyToIndex: Record<string, number>
 ) => {
+  'worklet';
   const key = group[inGroupIndex];
   if (key === undefined) return null;
   return keyToIndex[key] ?? null;
@@ -38,6 +38,7 @@ export const getTotalGroupSize = (
   mainItemSizes: ItemSizes,
   gap: number
 ) => {
+  'worklet';
   const sizesSum = group.reduce(
     (total, key) => total + (resolveDimension(mainItemSizes, key) ?? 0),
     0
@@ -62,6 +63,7 @@ const getIndexesWhenSwappedToGroupBefore = ({
   mainGap,
   mainItemSizes
 }: ItemGroupSwapProps): SwappedGroupIndexesResult => {
+  'worklet';
   if (groupSizeLimit === Infinity) {
     return null;
   }
@@ -146,6 +148,7 @@ const getIndexesWhenSwappedToGroupAfter = ({
   mainGap,
   mainItemSizes
 }: ItemGroupSwapProps): SwappedGroupIndexesResult => {
+  'worklet';
   const activeGroup = itemGroups[currentGroupIndex];
   if (groupSizeLimit === Infinity || activeGroup === undefined) {
     return null;
@@ -227,6 +230,7 @@ const getIndexesWhenSwappedToGroupAfter = ({
 export const getSwappedToGroupBeforeIndices = (
   props: ItemGroupSwapProps
 ): ItemGroupSwapResult | null => {
+  'worklet';
   const indexes = getIndexesWhenSwappedToGroupBefore(props);
   if (indexes === null) return null;
 
@@ -247,6 +251,7 @@ export const getSwappedToGroupBeforeIndices = (
 export const getSwappedToGroupAfterIndices = (
   props: ItemGroupSwapProps
 ): ItemGroupSwapResult | null => {
+  'worklet';
   const indexes = getIndexesWhenSwappedToGroupAfter(props);
   if (indexes === null) return null;
 

packages/react-native-sortables/src/providers/flex/FlexLayoutProvider/utils/layout.ts

@@ -1,4 +1,3 @@
-'worklet';
 import { IS_WEB } from '../../../../constants';
 import type {
   AlignContent,
@@ -25,6 +24,7 @@ const createGroups = (
   groups: Array<Array<string>>;
   crossAxisGroupSizes: Array<number>;
 } => {
+  'worklet';
   const groups: Array<Array<string>> = [];
   const crossAxisGroupSizes: Array<number> = [];
 
@@ -77,6 +77,7 @@ const calculateAlignment = (
   totalSize: number;
   adjustedGap: number;
 } => {
+  'worklet';
   let startOffset = 0;
   let adjustedGap = providedGap;
 
@@ -150,6 +151,7 @@ const handleLayoutCalculation = (
   isReverse: boolean,
   shouldWrap: boolean
 ) => {
+  'worklet';
   const isRow = axisDirections.main === 'row';
   const expandMultiGroup = !IS_WEB && groups.length > 1; // expands to max height/width
   const paddingHorizontal = paddings.left + paddings.right;
@@ -332,6 +334,7 @@ export const calculateLayout = ({
   limits,
   paddings
 }: FlexLayoutProps): FlexLayout | null => {
+  'worklet';
   if (!limits) {
     return null;
   }

packages/react-native-sortables/src/providers/grid/GridLayoutProvider/utils/helpers.ts

@@ -1,22 +1,30 @@
-'worklet';
 import { areValuesDifferent } from '../../../../utils';
 
-export const getMainIndex = (index: number, numGroups: number): number =>
-  +index % numGroups;
+export const getMainIndex = (index: number, numGroups: number): number => {
+  'worklet';
+  return +index % numGroups;
+};
 
-export const getCrossIndex = (index: number, numGroups: number): number =>
-  Math.floor(+index / numGroups);
+export const getCrossIndex = (index: number, numGroups: number): number => {
+  'worklet';
+  return Math.floor(+index / numGroups);
+};
 
 export const shouldUpdateContainerDimensions = (
   currentContainerCrossSize: null | number,
   calculatedContainerCrossSize: number,
   hasAutoOffsetAdjustment: boolean
-): boolean =>
-  !currentContainerCrossSize ||
-  (areValuesDifferent(
-    currentContainerCrossSize,
-    calculatedContainerCrossSize,
-    1
-  ) &&
-    (!hasAutoOffsetAdjustment ||
-      calculatedContainerCrossSize > currentContainerCrossSize));
+): boolean => {
+  'worklet';
+  return (
+    !currentContainerCrossSize ||
+    !currentContainerCrossSize ||
+    (areValuesDifferent(
+      currentContainerCrossSize,
+      calculatedContainerCrossSize,
+      1
+    ) &&
+      (!hasAutoOffsetAdjustment ||
+        calculatedContainerCrossSize > currentContainerCrossSize))
+  );
+};

packages/react-native-sortables/src/providers/grid/GridLayoutProvider/utils/layout.ts

@@ -1,4 +1,3 @@
-'worklet';
 import type {
   AutoOffsetAdjustmentProps,
   Coordinate,
@@ -18,6 +17,7 @@ export const calculateLayout = ({
   numGroups,
   startCrossOffset
 }: GridLayoutProps): GridLayout | null => {
+  'worklet';
   const mainGroupSize = (isVertical ? itemWidths : itemHeights) as
     | null
     | number;
@@ -102,6 +102,7 @@ export const calculateItemCrossOffset = ({
   itemKey,
   numGroups
 }: AutoOffsetAdjustmentProps): number => {
+  'worklet';
   let activeItemCrossOffset = 0;
   let currentGroupCrossSize = 0;
   let currentGroupCrossIndex = 0;

packages/react-native-sortables/src/providers/shared/AutoScrollProvider/utils.ts

@@ -1,4 +1,3 @@
-'worklet';
 import type { ExtrapolationType } from 'react-native-reanimated';
 import { Extrapolation, interpolate } from 'react-native-reanimated';
 
@@ -11,6 +10,7 @@ export const calculateRawProgress = (
   maxOverscroll: [number, number],
   extrapolation: ExtrapolationType
 ) => {
+  'worklet';
   const startDistance = containerPos + contentBounds[0];
   const startBoundProgress = interpolate(
     startDistance,

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

@@ -1,7 +1,7 @@
-'worklet';
 import { EXTRA_SWAP_OFFSET } from '../../constants';
 import type { Maybe } from '../../helperTypes';
 
 export const getAdditionalSwapOffset = (size?: Maybe<number>) => {
+  'worklet';
   return size ? Math.min(EXTRA_SWAP_OFFSET, size / 2) : EXTRA_SWAP_OFFSET;
 };

packages/react-native-sortables/src/utils/dimensions.ts

@@ -1,15 +1,19 @@
-'worklet';
 import type { Dimensions, ItemSizes } from '../types';
 
-export const resolveDimension = (dimension: ItemSizes, key: string) =>
-  dimension &&
-  (typeof dimension === 'number' ? dimension : (dimension[key] ?? null));
+export const resolveDimension = (dimension: ItemSizes, key: string) => {
+  'worklet';
+  return (
+    dimension &&
+    (typeof dimension === 'number' ? dimension : (dimension[key] ?? null))
+  );
+};
 
 export const getItemDimensions = (
   key: string,
   itemWidths: ItemSizes,
   itemHeights: ItemSizes
 ): Dimensions | null => {
+  'worklet';
   const itemWidth = resolveDimension(itemWidths, key);
   const itemHeight = resolveDimension(itemHeights, key);
 

packages/react-native-sortables/src/utils/equality.ts

@@ -2,22 +2,33 @@
 import type { AnyRecord, Maybe } from '../helperTypes';
 import type { Vector } from '../types';
 
-export const lt = (a: number, b: number): boolean => a < b;
-export const gt = (a: number, b: number): boolean => a > b;
+export const lt = (a: number, b: number): boolean => {
+  'worklet';
+  return a < b;
+};
+export const gt = (a: number, b: number): boolean => {
+  'worklet';
+  return a > b;
+};
 
 export const areArraysDifferent = <T>(
   arr1: Array<T>,
   arr2: Array<T>,
   areEqual = (a: T, b: T): boolean => a === b
-): boolean =>
-  arr1.length !== arr2.length ||
-  arr1.some((item, index) => !areEqual(item, arr2[index] as T));
+): boolean => {
+  'worklet';
+  return (
+    arr1.length !== arr2.length ||
+    arr1.some((item, index) => !areEqual(item, arr2[index] as T))
+  );
+};
 
 export const areValuesDifferent = (
   dim1: number | undefined,
   dim2: number | undefined,
   eps?: number
 ): boolean => {
+  'worklet';
   if (dim1 === undefined) {
     return dim2 !== undefined;
   }
@@ -36,14 +47,19 @@ export const areVectorsDifferent = (
   vec1: Vector,
   vec2: Vector,
   eps?: number
-): boolean =>
-  areValuesDifferent(vec1.x, vec2.x, eps) ||
-  areValuesDifferent(vec1.y, vec2.y, eps);
+): boolean => {
+  'worklet';
+  return (
+    areValuesDifferent(vec1.x, vec2.x, eps) ||
+    areValuesDifferent(vec1.y, vec2.y, eps)
+  );
+};
 
 export const haveEqualPropValues = <T extends AnyRecord>(
   obj1: Maybe<T>,
   obj2: Maybe<T>
 ): boolean => {
+  'worklet';
   if (!obj1 || !obj2) {
     return false;
   }

packages/react-native-sortables/src/utils/layout.ts

@@ -1,4 +1,3 @@
-'worklet';
 import type { Maybe } from '../helperTypes';
 import type { Dimensions, Offset, Vector } from '../types';
 import { gt, lt } from './equality';
@@ -8,6 +7,7 @@ const getOffsetDistance = (
   providedOffset: Offset,
   distance: number
 ): number => {
+  'worklet';
   if (typeof providedOffset === 'number') {
     return providedOffset;
   }
@@ -44,6 +44,7 @@ export const reorderInsert = (
   toIndex: number,
   fixedItemKeys: Record<string, boolean> | undefined
 ) => {
+  'worklet';
   toIndex = Math.min(toIndex, indexToKey.length - 1);
   const direction = toIndex > fromIndex ? -1 : 1;
   const fromKey = indexToKey[fromIndex]!;
@@ -75,6 +76,7 @@ export const reorderSwap = (
   fromIndex: number,
   toIndex: number
 ) => {
+  'worklet';
   if (toIndex > indexToKey.length - 1) {
     return indexToKey;
   }
@@ -83,8 +85,12 @@ export const reorderSwap = (
   return result;
 };
 
-const isValidCoordinate = (coordinate: number): boolean =>
-  !isNaN(coordinate) && coordinate > -Infinity && coordinate < Infinity;
+const isValidCoordinate = (coordinate: number): boolean => {
+  'worklet';
+  return !isNaN(coordinate) && coordinate > -Infinity && coordinate < Infinity;
+};
 
-export const isValidVector = (vector: Vector): boolean =>
-  isValidCoordinate(vector.x) && isValidCoordinate(vector.y);
+export const isValidVector = (vector: Vector): boolean => {
+  'worklet';
+  return isValidCoordinate(vector.x) && isValidCoordinate(vector.y);
+};

packages/react-native-sortables/src/utils/logs.ts

@@ -1,11 +1,12 @@
-'worklet';
 const LIBRARY_NAME = 'react-native-sortables';
 
 export const logger = {
   error(message: string) {
+    'worklet';
     console.error(`[${LIBRARY_NAME}] ${message}`);
   },
   warn(message: string) {
+    'worklet';
     console.warn(`[${LIBRARY_NAME}] ${message}`);
   }
 };

packages/react-native-sortables/src/utils/operations.ts

@@ -1,4 +1,4 @@
-'worklet';
 export const sum = (arr: Array<number>) => {
+  'worklet';
   return arr.reduce((acc, val) => acc + val, 0);
 };