fix: Fix Tried to synchronously call a non-worklet function (#507)

## Description

It looks like reanimated's babel plugin in old reanimated versions
didn't support file-level `'worklet'` directive. To fix the issue, I had
to remove all file-level directives and move them to particular
functions.

Author: MatiPl01

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);