react-native-reanimated 4.0.3 → 4.1.0-jsx-fix

package/scripts/reanimated_utils.rb

@@ -64,10 +64,9 @@ def find_config()
 end
 
 def assert_minimal_react_native_version(config)
-      # If you change the minimal React Native version remember to update Compatibility Table in docs
-  minimalReactNativeVersion = 78
-  if config[:react_native_minor_version] < minimalReactNativeVersion
-    raise "[Reanimated] Unsupported React Native version. Please use React Native 0.#{minimalReactNativeVersion} or newer."
+  validate_react_native_version_script = File.expand_path(File.join(__dir__, 'validate-react-native-version.js'))
+  unless system("node \"#{validate_react_native_version_script}\" #{config[:react_native_version]}")
+    raise "[Reanimated] React Native version is not compatible with Reanimated"
   end
 end
 

package/scripts/validate-react-native-version.js

@@ -0,0 +1,43 @@
+'use strict';
+
+const semverSatisfies = require('semver/functions/satisfies');
+const semverPrerelease = require('semver/functions/prerelease');
+const path = require('path');
+
+const packageJsonPath = path.resolve(__dirname, '../package.json');
+const packageJson = require(packageJsonPath);
+const reanimatedVersion = packageJson.version;
+const compatibilityFile = require('../compatibility.json');
+
+const reactNativeVersion = process.argv[2];
+const supportedRNVersions = [];
+
+if (semverPrerelease(reactNativeVersion)) {
+  // Don't perform any checks for pre-release versions, like nightlies or
+  // feature previews. The user knows what they're doing.
+  process.exit(0);
+}
+
+for (const key in compatibilityFile) {
+  if (semverSatisfies(reanimatedVersion, key)) {
+    // @ts-ignore
+    supportedRNVersions.push(...compatibilityFile[key]['react-native']);
+  }
+}
+
+// If user uses a version of Reanimated that is not listed in the compatibility file, we skip the check
+if (supportedRNVersions.length === 0) {
+  process.exit(0);
+}
+
+for (const version of supportedRNVersions) {
+  if (semverSatisfies(reactNativeVersion, `${version}.x`)) {
+    process.exit(0);
+  }
+}
+
+// eslint-disable-next-line reanimated/use-logger
+console.error(
+  `[Reanimated] React Native ${reactNativeVersion} version is not compatible with Reanimated ${reanimatedVersion}`
+);
+process.exit(1);

package/scripts/validate-worklets-build.js

@@ -2,9 +2,14 @@
 
 // We don't use this script in runtime since `process` might not be available.
 
+const path = require('path');
+const packageJsonPath = path.resolve(__dirname, '../package.json');
+const packageJson = require(packageJsonPath);
+const reanimatedVersion = packageJson.version;
+
 const validateVersion = require('./validate-worklets-version');
 
-const result = validateVersion();
+const result = validateVersion(reanimatedVersion);
 if (!result.ok) {
   // eslint-disable-next-line reanimated/use-logger
   console.error('[Reanimated] ' + result.message);

package/scripts/validate-worklets-version.js

@@ -3,11 +3,11 @@
 const semverSatisfies = require('semver/functions/satisfies');
 const semverPrerelease = require('semver/functions/prerelease');
 const expectedVersion = require('./worklets-version.json');
+const compatibilityFile = require('../compatibility.json');
 
 /** @returns {{ ok: boolean; message?: string }} */
-function validateVersion() {
+function validateVersion(reanimatedVersion) {
   let workletsVersion;
-
   try {
     const { version } = require('react-native-worklets/package.json');
     workletsVersion = version;
@@ -19,7 +19,9 @@ function validateVersion() {
         expectedVersion.min +
         ' and ' +
         expectedVersion.max +
-        ' to use Reanimated 4.',
+        ' to use Reanimated ' +
+        reanimatedVersion +
+        '.',
     };
   }
 
@@ -31,17 +33,30 @@ function validateVersion() {
     return { ok: true };
   }
 
-  const acceptedRange = `${expectedVersion.min} - ${expectedVersion.max}`;
+  const supportedWorkletsVersions = [];
 
-  if (!semverSatisfies(workletsVersion, acceptedRange)) {
-    return {
-      ok: false,
-      message: `Invalid version of \`react-native-worklets\`: "${workletsVersion}". Expected the version to be in inclusive range "${acceptedRange}". Please install a compatible version of \`react-native-worklets\`.`,
-    };
+  for (const key in compatibilityFile) {
+    if (semverSatisfies(reanimatedVersion, key)) {
+      // @ts-ignore
+      supportedWorkletsVersions.push(
+        ...compatibilityFile[key]['react-native-worklets']
+      );
+    }
+  }
+
+  if (supportedWorkletsVersions.length === 0) {
+    return { ok: true };
+  }
+
+  for (const version of supportedWorkletsVersions) {
+    if (semverSatisfies(workletsVersion, version)) {
+      return { ok: true };
+    }
   }
 
   return {
-    ok: true,
+    ok: false,
+    message: `Invalid version of \`react-native-worklets\`: "${workletsVersion}". Expected the version to be in inclusive range "${supportedWorkletsVersions.join(', ')}". Please install a compatible version of \`react-native-worklets\`.`,
   };
 }
 

package/src/Animated.ts

@@ -1,22 +1,4 @@
 'use strict';
-import type {
-  AnimatedTransform as _AnimatedTransform,
-  AnimateStyle as _AnimateStyle,
-  EasingFunction as _EasingFunction,
-  SharedValue as _SharedValue,
-  StylesOrDefault as _StylesOrDefault,
-} from './commonTypes';
-import type { FlatListPropsWithLayout as _FlatListPropsWithLayout } from './component/FlatList';
-import type { AnimatedScrollViewProps as _AnimatedScrollViewProps } from './component/ScrollView';
-import type {
-  Adaptable as _Adaptable,
-  AdaptTransforms as _AdaptTransforms,
-  AnimateProps as _AnimateProps,
-  TransformStyleTypes as _TransformStyleTypes,
-} from './helperTypes';
-import type { DerivedValue as _DerivedValue } from './hook/useDerivedValue';
-import type { Extrapolate as _Extrapolate } from './interpolateColor';
-
 export { ReanimatedFlatList as FlatList } from './component/FlatList';
 export { AnimatedImage as Image } from './component/Image';
 export { AnimatedScrollView as ScrollView } from './component/ScrollView';
@@ -27,69 +9,3 @@ export {
   addWhitelistedUIProps,
 } from './ConfigHelper';
 export { createAnimatedComponent } from './createAnimatedComponent';
-/**
- * @deprecated Please import `Extrapolate` directly from
- *   `react-native-reanimated` instead of `Animated` namespace.
- */
-export type Extrapolate = typeof _Extrapolate;
-/**
- * @deprecated Please import `SharedValue` directly from
- *   `react-native-reanimated` instead of `Animated` namespace.
- */
-
-export type SharedValue<T> = _SharedValue<T>;
-/**
- * @deprecated Please import `DerivedValue` directly from
- *   `react-native-reanimated` instead of `Animated` namespace.
- */
-export type DerivedValue<T> = _DerivedValue<T>;
-/**
- * @deprecated Please import `Adaptable` directly from `react-native-reanimated`
- *   instead of `Animated` namespace.
- */
-export type Adaptable<T> = _Adaptable<T>;
-/**
- * @deprecated Please import `TransformStyleTypes` directly from
- *   `react-native-reanimated` instead of `Animated` namespace.
- */
-export type TransformStyleTypes = _TransformStyleTypes;
-/**
- * @deprecated Please import `AdaptTransforms` directly from
- *   `react-native-reanimated` instead of `Animated` namespace.
- */
-export type AdaptTransforms<T> = _AdaptTransforms<T>;
-/**
- * @deprecated Please import `AnimatedTransform` directly from
- *   `react-native-reanimated` instead of `Animated` namespace.
- */
-export type AnimatedTransform = _AnimatedTransform;
-/**
- * @deprecated Please import `AnimateStyle` directly from
- *   `react-native-reanimated` instead of `Animated` namespace.
- */
-export type AnimateStyle<S> = _AnimateStyle<S>;
-/**
- * @deprecated Please import `StylesOrDefault` directly from
- *   `react-native-reanimated` instead of `Animated` namespace.
- */
-export type StylesOrDefault<S> = _StylesOrDefault<S>;
-/**
- * @deprecated Please import `AnimateProps` directly from
- *   `react-native-reanimated` instead of `Animated` namespace.
- */
-export type AnimateProps<P extends object> = _AnimateProps<P>;
-/**
- * @deprecated Please import `EasingFunction` directly from
- *   `react-native-reanimated` instead of `Animated` namespace.
- */
-export type EasingFunction = _EasingFunction;
-/**
- * @deprecated Please import `AnimatedScrollViewProps` directly from
- *   `react-native-reanimated` instead of `Animated` namespace.
- */
-export type AnimatedScrollViewProps = _AnimatedScrollViewProps;
-/**
- * @deprecated Please import `FlatListPropsWithLayout` directly from
- *   `react-native-reanimated` instead of `Animated` namespace.
- */
-export type FlatListPropsWithLayout<T> = _FlatListPropsWithLayout<T>;

package/src/Colors.ts

@@ -6,7 +6,6 @@
  */
 
 /* eslint no-bitwise: 0 */
-import { makeShareable } from 'react-native-worklets';
 
 interface RGB {
   r: number;
@@ -169,7 +168,7 @@ export function clampRGBA(RGBA: ParsedColorArray): void {
   }
 }
 
-const names: Record<string, number> = makeShareable({
+const names: Record<string, number> = {
   transparent: 0x00000000,
 
   /* spell-checker: disable */
@@ -324,10 +323,10 @@ const names: Record<string, number> = makeShareable({
   yellow: 0xffff00ff,
   yellowgreen: 0x9acd32ff,
   /* spell-checker: enable */
-});
+};
 
 // copied from react-native/Libraries/Components/View/ReactNativeStyleAttributes
-export const ColorProperties = makeShareable([
+export const ColorProperties = [
   'backgroundColor',
   'borderBottomColor',
   'borderColor',
@@ -353,7 +352,7 @@ export const ColorProperties = makeShareable([
   'lightingColor',
   'stopColor',
   'stroke',
-]);
+];
 
 export function normalizeColor(color: unknown): number | null {
   'worklet';

package/src/Easing.ts

@@ -48,13 +48,8 @@ import type { EasingFunction } from './commonTypes';
  * - [`out`](docs/easing.html#out) runs an easing function backwards
  */
 
-/** @deprecated Please use {@link EasingFunction} type instead. */
-export type EasingFn = EasingFunction;
-
 export type EasingFunctionFactory = { factory: () => EasingFunction };
 
-/** @deprecated Please use {@link EasingFunctionFactory} type instead. */
-export type EasingFactoryFn = EasingFunctionFactory;
 /**
  * A linear function, `f(t) = t`. Position correlates to elapsed time one to
  * one.

package/src/ReanimatedModule/NativeReanimated.ts

@@ -1,9 +1,8 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 'use strict';
-import type React from 'react';
 import type {
   IWorkletsModule,
-  ShareableRef,
+  SerializableRef,
   WorkletFunction,
 } from 'react-native-worklets';
 import { executeOnUIRuntimeSync, WorkletsModule } from 'react-native-worklets';
@@ -19,12 +18,13 @@ import type {
   StyleProps,
   Value3D,
   ValueRotation,
+  WrapperRef,
 } from '../commonTypes';
 import type {
   CSSAnimationUpdates,
   NormalizedCSSAnimationKeyframesConfig,
   NormalizedCSSTransitionConfig,
-} from '../css/platform/native';
+} from '../css/native';
 import { getShadowNodeWrapperFromRef } from '../fabricUtils';
 import { checkCppVersion } from '../platform-specific/checkCppVersion';
 import { jsVersion } from '../platform-specific/jsVersion';
@@ -102,7 +102,7 @@ See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooti
     sensorType: number,
     interval: number,
     iosReferenceFrame: number,
-    handler: ShareableRef<(data: Value3D | ValueRotation) => void>
+    handler: SerializableRef<(data: Value3D | ValueRotation) => void>
   ) {
     return this.#reanimatedModuleProxy.registerSensor(
       sensorType,
@@ -117,7 +117,7 @@ See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooti
   }
 
   registerEventHandler<T>(
-    eventHandler: ShareableRef<T>,
+    eventHandler: SerializableRef<T>,
     eventName: string,
     emitterReactTag: number
   ) {
@@ -135,12 +135,10 @@ See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooti
   getViewProp<T>(
     viewTag: number,
     propName: string,
-    component: React.Component | undefined, // required on Fabric
+    component: WrapperRef, // required on Fabric
     callback?: (result: T) => void
   ) {
-    const shadowNodeWrapper = getShadowNodeWrapperFromRef(
-      component as React.Component
-    );
+    const shadowNodeWrapper = getShadowNodeWrapperFromRef(component);
     return this.#reanimatedModuleProxy.getViewProp(
       shadowNodeWrapper,
       propName,
@@ -163,12 +161,16 @@ See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooti
     );
   }
 
+  getStaticFeatureFlag(name: string): boolean {
+    return this.#reanimatedModuleProxy.getStaticFeatureFlag(name);
+  }
+
   setDynamicFeatureFlag(name: string, value: boolean) {
     this.#reanimatedModuleProxy.setDynamicFeatureFlag(name, value);
   }
 
   subscribeForKeyboardEvents(
-    handler: ShareableRef<WorkletFunction>,
+    handler: SerializableRef<WorkletFunction>,
     isStatusBarTranslucent: boolean,
     isNavigationBarTranslucent: boolean
   ) {
@@ -197,16 +199,18 @@ See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooti
 
   registerCSSKeyframes(
     animationName: string,
+    viewName: string,
     keyframesConfig: NormalizedCSSAnimationKeyframesConfig
   ) {
     this.#reanimatedModuleProxy.registerCSSKeyframes(
       animationName,
+      viewName,
       keyframesConfig
     );
   }
 
-  unregisterCSSKeyframes(animationName: string) {
-    this.#reanimatedModuleProxy.unregisterCSSKeyframes(animationName);
+  unregisterCSSKeyframes(animationName: string, viewName: string) {
+    this.#reanimatedModuleProxy.unregisterCSSKeyframes(animationName, viewName);
   }
 
   applyCSSAnimations(
@@ -248,6 +252,9 @@ See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooti
 class DummyReanimatedModuleProxy implements ReanimatedModuleProxy {
   configureLayoutAnimationBatch(): void {}
   setShouldAnimateExitingForTag(): void {}
+  getStaticFeatureFlag(): boolean {
+    return false;
+  }
   setDynamicFeatureFlag(): void {}
   subscribeForKeyboardEvents(): number {
     return -1;

package/src/ReanimatedModule/js-reanimated/JSReanimated.ts

@@ -1,7 +1,7 @@
 'use strict';
 import type {
   IWorkletsModule,
-  ShareableRef,
+  SerializableRef,
   WorkletFunction,
 } from 'react-native-worklets';
 import { WorkletsModule } from 'react-native-worklets';
@@ -18,13 +18,14 @@ import type {
   StyleProps,
   Value3D,
   ValueRotation,
+  WrapperRef,
 } from '../../commonTypes';
 import { SensorType } from '../../commonTypes';
 import type {
   CSSAnimationUpdates,
   NormalizedCSSAnimationKeyframesConfig,
   NormalizedCSSTransitionConfig,
-} from '../../css/platform/native';
+} from '../../css/native';
 import { assertWorkletsVersion } from '../../platform-specific/workletsVersion';
 import type { IReanimatedModule } from '../reanimatedModuleProxy';
 import type { WebSensor } from './WebSensor';
@@ -51,7 +52,7 @@ class JSReanimated implements IReanimatedModule {
   }
 
   registerEventHandler<T>(
-    _eventHandler: ShareableRef<T>,
+    _eventHandler: SerializableRef<T>,
     _eventName: string,
     _emitterReactTag: number
   ): number {
@@ -78,7 +79,7 @@ class JSReanimated implements IReanimatedModule {
     sensorType: SensorType,
     interval: number,
     _iosReferenceFrame: number,
-    eventHandler: ShareableRef<(data: Value3D | ValueRotation) => void>
+    eventHandler: SerializableRef<(data: Value3D | ValueRotation) => void>
   ): number {
     if (!IS_WINDOW_AVAILABLE) {
       // the window object is unavailable when building the server portion of a site that uses SSG
@@ -122,7 +123,7 @@ class JSReanimated implements IReanimatedModule {
   getSensorCallback = (
     sensor: WebSensor,
     sensorType: SensorType,
-    eventHandler: ShareableRef<(data: Value3D | ValueRotation) => void>
+    eventHandler: SerializableRef<(data: Value3D | ValueRotation) => void>
   ) => {
     switch (sensorType) {
       case SensorType.ACCELEROMETER:
@@ -134,14 +135,14 @@ class JSReanimated implements IReanimatedModule {
           if (this.platform === Platform.WEB_ANDROID) {
             [x, y, z] = [-x, -y, -z];
           }
-          // TODO TYPESCRIPT on web ShareableRef is the value itself so we call it directly
+          // TODO TYPESCRIPT on web SerializableRef is the value itself so we call it directly
           (eventHandler as any)({ x, y, z, interfaceOrientation: 0 });
         };
       case SensorType.GYROSCOPE:
       case SensorType.MAGNETIC_FIELD:
         return () => {
           const { x, y, z } = sensor;
-          // TODO TYPESCRIPT on web ShareableRef is the value itself so we call it directly
+          // TODO TYPESCRIPT on web SerializableRef is the value itself so we call it directly
           (eventHandler as any)({ x, y, z, interfaceOrientation: 0 });
         };
       case SensorType.ROTATION:
@@ -164,7 +165,7 @@ class JSReanimated implements IReanimatedModule {
             2.0 * (qx * qy + qw * qz),
             qw * qw + qx * qx - qy * qy - qz * qz
           );
-          // TODO TYPESCRIPT on web ShareableRef is the value itself so we call it directly
+          // TODO TYPESCRIPT on web SerializableRef is the value itself so we call it directly
           (eventHandler as any)({
             qw,
             qx,
@@ -187,7 +188,7 @@ class JSReanimated implements IReanimatedModule {
     }
   }
 
-  subscribeForKeyboardEvents(_: ShareableRef<WorkletFunction>): number {
+  subscribeForKeyboardEvents(_: SerializableRef<WorkletFunction>): number {
     if (IS_WEB) {
       logger.warn('useAnimatedKeyboard is not available on web yet.');
     } else if (IS_JEST) {
@@ -254,13 +255,18 @@ class JSReanimated implements IReanimatedModule {
   getViewProp<T>(
     _viewTag: number,
     _propName: string,
-    _component?: React.Component,
+    _component?: WrapperRef | null,
     _callback?: (result: T) => void
   ): Promise<T> {
     throw new ReanimatedError('getViewProp is not available in JSReanimated.');
   }
 
-  setDynamicFeatureFlag(_name: string, _value: boolean): void {
+  getStaticFeatureFlag(): boolean {
+    // mock implementation
+    return false;
+  }
+
+  setDynamicFeatureFlag(): void {
     // noop
   }
 
@@ -282,6 +288,7 @@ class JSReanimated implements IReanimatedModule {
 
   registerCSSKeyframes(
     _animationName: string,
+    _viewName: string,
     _keyframesConfig: NormalizedCSSAnimationKeyframesConfig
   ): void {
     throw new ReanimatedError(
@@ -289,7 +296,7 @@ class JSReanimated implements IReanimatedModule {
     );
   }
 
-  unregisterCSSKeyframes(_animationName: string): void {
+  unregisterCSSKeyframes(_animationName: string, _viewName: string): void {
     throw new ReanimatedError(
       '`unregisterCSSKeyframes` is not available in JSReanimated.'
     );

package/src/ReanimatedModule/js-reanimated/index.ts

@@ -1,5 +1,5 @@
 'use strict';
-import { logger, ReanimatedError } from '../../common';
+import { logger } from '../../common';
 import type { AnimatedStyle, StyleProps } from '../../commonTypes';
 import type { PropUpdates } from '../../createAnimatedComponent/commonTypes';
 import {
@@ -10,25 +10,6 @@ import {
 
 export { createJSReanimatedModule } from './JSReanimated';
 
-// TODO: Install these global functions in a more suitable location.
-global._makeShareableClone = () => {
-  throw new ReanimatedError(
-    '`_makeShareableClone` should never be called from React runtime.'
-  );
-};
-
-global._scheduleHostFunctionOnJS = () => {
-  throw new ReanimatedError(
-    '`_scheduleOnJS` should never be called from React runtime.'
-  );
-};
-
-global._scheduleOnRuntime = () => {
-  throw new ReanimatedError(
-    '`_scheduleOnRuntime` should never be called from React runtime.'
-  );
-};
-
 interface JSReanimatedComponent {
   previousStyle: StyleProps;
   setNativeProps?: (style: StyleProps) => void;

package/src/ReanimatedModule/reanimatedModuleProxy.ts

@@ -1,6 +1,6 @@
 'use strict';
 
-import type { ShareableRef, WorkletFunction } from 'react-native-worklets';
+import type { SerializableRef, WorkletFunction } from 'react-native-worklets';
 
 import type {
   LayoutAnimationBatchItem,
@@ -8,17 +8,18 @@ import type {
   StyleProps,
   Value3D,
   ValueRotation,
+  WrapperRef,
 } from '../commonTypes';
 import type {
   CSSAnimationUpdates,
   NormalizedCSSAnimationKeyframesConfig,
   NormalizedCSSTransitionConfig,
-} from '../css/platform/native';
+} from '../css/native';
 
 /** Type of `__reanimatedModuleProxy` injected with JSI. */
 export interface ReanimatedModuleProxy {
   registerEventHandler<T>(
-    eventHandler: ShareableRef<T>,
+    eventHandler: SerializableRef<T>,
     eventName: string,
     emitterReactTag: number
   ): number;
@@ -35,15 +36,17 @@ export interface ReanimatedModuleProxy {
     sensorType: number,
     interval: number,
     iosReferenceFrame: number,
-    handler: ShareableRef<(data: Value3D | ValueRotation) => void>
+    handler: SerializableRef<(data: Value3D | ValueRotation) => void>
   ): number;
 
   unregisterSensor(sensorId: number): void;
 
+  getStaticFeatureFlag(name: string): boolean;
+
   setDynamicFeatureFlag(name: string, value: boolean): void;
 
   subscribeForKeyboardEvents(
-    handler: ShareableRef<WorkletFunction>,
+    handler: SerializableRef<WorkletFunction>,
     isStatusBarTranslucent: boolean,
     isNavigationBarTranslucent: boolean
   ): number;
@@ -63,10 +66,11 @@ export interface ReanimatedModuleProxy {
 
   registerCSSKeyframes(
     animationName: string,
+    viewName: string,
     keyframesConfig: NormalizedCSSAnimationKeyframesConfig
   ): void;
 
-  unregisterCSSKeyframes(animationName: string): void;
+  unregisterCSSKeyframes(animationName: string, viewName: string): void;
 
   applyCSSAnimations(
     shadowNodeWrapper: ShadowNodeWrapper,
@@ -93,7 +97,7 @@ export interface IReanimatedModule
   getViewProp<TValue>(
     viewTag: number,
     propName: string,
-    component: React.Component | undefined,
+    component: WrapperRef | null,
     callback?: (result: TValue) => void
   ): Promise<TValue>;
 }

package/src/Sensor.ts

@@ -1,5 +1,5 @@
 'use strict';
-import type { ShareableRef, WorkletFunction } from 'react-native-worklets';
+import type { SerializableRef, WorkletFunction } from 'react-native-worklets';
 
 import type {
   SensorConfig,
@@ -49,7 +49,7 @@ export default class Sensor {
   }
 
   register(
-    eventHandler: ShareableRef<(data: Value3D | ValueRotation) => void>
+    eventHandler: SerializableRef<(data: Value3D | ValueRotation) => void>
   ) {
     const config = this.config;
     const sensorType = this.sensorType;
@@ -57,7 +57,7 @@ export default class Sensor {
       sensorType,
       config.interval === 'auto' ? -1 : config.interval,
       config.iosReferenceFrame,
-      eventHandler as ShareableRef<WorkletFunction>
+      eventHandler as SerializableRef<WorkletFunction>
     );
     return this.sensorId !== -1;
   }

package/src/SensorContainer.ts

@@ -1,5 +1,5 @@
 'use strict';
-import type { ShareableRef } from 'react-native-worklets';
+import type { SerializableRef } from 'react-native-worklets';
 
 import type {
   SensorConfig,
@@ -39,7 +39,7 @@ export class SensorContainer {
   registerSensor(
     sensorType: SensorType,
     config: SensorConfig,
-    handler: ShareableRef<(data: Value3D | ValueRotation) => void>
+    handler: SerializableRef<(data: Value3D | ValueRotation) => void>
   ): number {
     const sensorId = this.getSensorId(sensorType, config);
 

package/src/UpdateLayoutAnimations.ts

@@ -1,5 +1,5 @@
 'use strict';
-import { makeShareableCloneRecursive } from 'react-native-worklets';
+import { createSerializable } from 'react-native-worklets';
 
 import { SHOULD_BE_USE_WEB } from './common';
 import type {
@@ -69,7 +69,7 @@ if (SHOULD_BE_USE_WEB) {
       {
         viewTag,
         type,
-        config: config ? makeShareableCloneRecursive(config) : undefined,
+        config: config ? createSerializable(config) : undefined,
       },
       isUnmounting
     );