react-native-reanimated 2.14.3 → 2.15.0

package/Common/cpp/Registries/EventHandlerRegistry.cpp

@@ -49,8 +49,14 @@ void EventHandlerRegistry::processEvent(
     return;
   }
 
-  auto eventObject = jsi::Value::createFromJsonUtf8(
-      rt, reinterpret_cast<uint8_t *>(&eventJSON[0]), eventJSON.size());
+  jsi::Value eventObject;
+  try {
+    eventObject = jsi::Value::createFromJsonUtf8(
+        rt, reinterpret_cast<uint8_t *>(&eventJSON[0]), eventJSON.size());
+  } catch (std::exception &) {
+    // Ignore events with malformed JSON payload.
+    return;
+  }
 
   eventObject.asObject(rt).setProperty(
       rt, "eventName", jsi::String::createFromUtf8(rt, eventName));

package/android/.gradle/buildOutputCleanup/cache.properties

@@ -1,2 +1,2 @@
-#Thu Jan 19 15:25:25 UTC 2023
+#Mon Apr 03 12:23:34 UTC 2023
 gradle.version=7.5.1

package/android/build.gradle

@@ -289,10 +289,10 @@ def detectAAR(Integer rnMinorVersion, String engine) { // Reanimated2 only
             println "\n\n\n"
             println "****************************************************************************************"
             println "\n\n\n"
-            println "WARNING reanimated - no version-specific reanimated AAR for react-native version $minor found."
+            println "WARNING reanimated - no version-specific reanimated AAR for react-native version $rnMinorVersion found."
             println "Falling back to AAR for react-native version $rnMinorVersionCopy."
             println "The react-native JSI interface is not ABI-safe yet, this may result in crashes."
-            println "Please post a pull request to implement support for react-native version $minor to the reanimated repo."
+            println "Please post a pull request to implement support for react-native version $rnMinorVersion to the reanimated repo."
             println "Thanks!"
             println "\n\n\n"
             println "****************************************************************************************"
@@ -1033,13 +1033,13 @@ dependencies {
 
     if (REACT_NATIVE_MINOR_VERSION >= 71) {
         if (isPackageBuild()) {
-            implementation "com.facebook.react:react-android:+"
+            implementation "com.facebook.react:react-android:" + REACT_NATIVE_VERSION
         } else {
             implementation "com.facebook.react:react-android:" // version substituted by RNGP
         }
         if (JS_RUNTIME == "hermes") {
             if (isPackageBuild()) {
-                implementation "com.facebook.react:hermes-android:+"
+                implementation "com.facebook.react:hermes-android:" + REACT_NATIVE_VERSION
             } else {
                 implementation "com.facebook.react:hermes-android:" // version substituted by RNGP
             }

package/android/src/main/java/com/swmansion/reanimated/NodesManager.java

@@ -61,6 +61,7 @@ import java.util.Queue;
 import java.util.Set;
 import java.util.concurrent.ConcurrentLinkedQueue;
 import java.util.concurrent.Semaphore;
+import java.util.concurrent.TimeUnit;
 import java.util.concurrent.atomic.AtomicBoolean;
 import javax.annotation.Nullable;
 
@@ -248,13 +249,11 @@ public class NodesManager implements EventDispatcherListener {
             }
           });
       if (trySynchronously) {
-        while (true) {
-          try {
-            semaphore.acquire();
-            break;
-          } catch (InterruptedException e) {
-            // noop
-          }
+        try {
+          semaphore.tryAcquire(16, TimeUnit.MILLISECONDS);
+        } catch (InterruptedException e) {
+          // if the thread is interruped we just continue and let the layout update happen
+          // asynchronously
         }
       }
     }

package/ios/REANodesManager.m

@@ -109,6 +109,8 @@
   BOOL _tryRunBatchUpdatesSynchronously;
   REAEventHandler _eventHandler;
   volatile void (^_mounting)(void);
+  NSObject *_syncLayoutUpdatesWaitLock;
+  volatile BOOL _syncLayoutUpdatesWaitTimedOut;
   NSMutableDictionary<NSNumber *, ComponentUpdate *> *_componentUpdateBuffer;
   volatile atomic_bool _shouldFlushUpdateBuffer;
   NSMutableDictionary<NSNumber *, UIView *> *_viewRegistry;
@@ -128,6 +130,7 @@
     _operationsInBatch = [NSMutableArray new];
     _componentUpdateBuffer = [NSMutableDictionary new];
     _viewRegistry = [_uiManager valueForKey:@"_viewRegistry"];
+    _syncLayoutUpdatesWaitLock = [NSObject new];
     _shouldFlushUpdateBuffer = false;
   }
 
@@ -232,8 +235,14 @@
 - (BOOL)uiManager:(RCTUIManager *)manager performMountingWithBlock:(RCTUIManagerMountingBlock)block
 {
   RCTAssert(_mounting == nil, @"Mouting block is expected to not be set");
-  _mounting = block;
-  return YES;
+  @synchronized(_syncLayoutUpdatesWaitLock) {
+    if (_syncLayoutUpdatesWaitTimedOut) {
+      return NO;
+    } else {
+      _mounting = block;
+      return YES;
+    }
+  }
 }
 
 - (void)performOperations
@@ -250,6 +259,7 @@
 
     __weak typeof(self) weakSelf = self;
     dispatch_semaphore_t semaphore = dispatch_semaphore_create(0);
+    _syncLayoutUpdatesWaitTimedOut = NO;
     RCTExecuteOnUIManagerQueue(^{
       __typeof__(self) strongSelf = weakSelf;
       if (strongSelf == nil) {
@@ -266,7 +276,7 @@
       }
 
       if (canUpdateSynchronously) {
-        [strongSelf.uiManager runSyncUIUpdatesWithObserver:self];
+        [strongSelf.uiManager runSyncUIUpdatesWithObserver:strongSelf];
         dispatch_semaphore_signal(semaphore);
       }
       // In case canUpdateSynchronously=true we still have to send uiManagerWillPerformMounting event
@@ -274,7 +284,16 @@
       [strongSelf.uiManager setNeedsLayout];
     });
     if (trySynchronously) {
-      dispatch_semaphore_wait(semaphore, DISPATCH_TIME_FOREVER);
+      // The 16ms timeout here aims to match the frame duration. It may make sense to read that parameter
+      // from CADisplayLink but it is easier to hardcode it for the time being.
+      // The reason why we use frame duration here is that if takes longer than one frame to complete layout tasks
+      // there is no point of synchronizing layout with the UI interaction as we get that one frame delay anyways.
+      long result = dispatch_semaphore_wait(semaphore, dispatch_time(DISPATCH_TIME_NOW, 16 * NSEC_PER_MSEC));
+      if (result != 0) {
+        @synchronized(_syncLayoutUpdatesWaitLock) {
+          _syncLayoutUpdatesWaitTimedOut = YES;
+        }
+      }
     }
 
     if (_mounting) {

package/lib/reanimated2/hook/useAnimatedReaction.js

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { startMapper, stopMapper } from '../core';
 import { useSharedValue } from './useSharedValue';
+import { shouldBeUseWeb } from '../PlatformChecker';
 /**
  * @param prepare - worklet used for data preparation for the second parameter
  * @param react - worklet which takes data prepared by the one in the first parameter and performs certain actions
@@ -8,12 +9,19 @@ import { useSharedValue } from './useSharedValue';
  * the second one can modify any shared values but those which are mentioned in the first worklet. Beware of that, because this may result in endless loop and high cpu usage.
  */
 export function useAnimatedReaction(prepare, react, dependencies) {
-    var _a, _b;
+    var _a, _b, _c;
     const previous = useSharedValue(null);
+    let inputs = Object.values((_a = prepare._closure) !== null && _a !== void 0 ? _a : {});
+    if (shouldBeUseWeb()) {
+        if (!inputs.length && (dependencies === null || dependencies === void 0 ? void 0 : dependencies.length)) {
+            // let web work without a Babel/SWC plugin
+            inputs = dependencies;
+        }
+    }
     if (dependencies === undefined) {
         dependencies = [
-            Object.values((_a = prepare._closure) !== null && _a !== void 0 ? _a : {}),
-            Object.values((_b = react._closure) !== null && _b !== void 0 ? _b : {}),
+            Object.values((_b = prepare._closure) !== null && _b !== void 0 ? _b : {}),
+            Object.values((_c = react._closure) !== null && _c !== void 0 ? _c : {}),
             prepare.__workletHash,
             react.__workletHash,
         ];
@@ -22,14 +30,13 @@ export function useAnimatedReaction(prepare, react, dependencies) {
         dependencies.push(prepare.__workletHash, react.__workletHash);
     }
     useEffect(() => {
-        var _a;
         const fun = () => {
             'worklet';
             const input = prepare();
             react(input, previous.value);
             previous.value = input;
         };
-        const mapperId = startMapper(fun, Object.values((_a = prepare._closure) !== null && _a !== void 0 ? _a : {}), []);
+        const mapperId = startMapper(fun, inputs, []);
         return () => {
             stopMapper(mapperId);
         };

package/lib/reanimated2/hook/useAnimatedStyle.js

@@ -155,7 +155,7 @@ function styleUpdater(viewDescriptors, updater, state, maybeViewRef, animationsA
                 requestFrame(frame);
             }
         }
-        state.last = Object.assign(oldValues, newValues);
+        state.last = Object.assign({}, oldValues, newValues);
         const style = getStyleWithoutAnimations(state.last);
         if (style) {
             updateProps(viewDescriptors, style, maybeViewRef);
@@ -165,7 +165,7 @@ function styleUpdater(viewDescriptors, updater, state, maybeViewRef, animationsA
         state.isAnimationCancelled = true;
         state.animations = [];
         const diff = styleDiff(oldValues, newValues);
-        state.last = Object.assign(oldValues, diff);
+        state.last = Object.assign({}, oldValues, newValues);
         if (diff) {
             updateProps(viewDescriptors, newValues, maybeViewRef);
         }
@@ -240,7 +240,7 @@ function jestStyleUpdater(viewDescriptors, updater, state, maybeViewRef, animati
     }
     // calculate diff
     const diff = styleDiff(oldValues, newValues);
-    state.last = Object.assign(oldValues, diff);
+    state.last = Object.assign({}, oldValues, newValues);
     if (Object.keys(diff).length !== 0) {
         updatePropsJestWrapper(viewDescriptors, diff, maybeViewRef, animatedStyle, adapters);
     }
@@ -271,7 +271,16 @@ export function useAnimatedStyle(updater, dependencies, adapters) {
     const viewsRef = makeViewsRefSet();
     const viewDescriptors = makeViewDescriptorsSet();
     const initRef = useRef();
-    const inputs = Object.values((_a = updater._closure) !== null && _a !== void 0 ? _a : {});
+    let inputs = Object.values((_a = updater._closure) !== null && _a !== void 0 ? _a : {});
+    if (shouldBeUseWeb()) {
+        if (!inputs.length && (dependencies === null || dependencies === void 0 ? void 0 : dependencies.length)) {
+            // let web work without a Babel/SWC plugin
+            inputs = dependencies;
+        }
+        if (__DEV__ && !inputs.length && !dependencies && !updater.__workletHash) {
+            console.error(`useAnimatedStyle was used without a dependency array or Babel plugin. Please explicitly pass a dependency array, or enable the Babel/SWC plugin. For more, see the docs: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/web-support#web-without-a-babel-plugin`);
+        }
+    }
     const adaptersArray = adapters
         ? Array.isArray(adapters)
             ? adapters

package/lib/reanimated2/hook/useDerivedValue.js

@@ -1,10 +1,17 @@
 import { useEffect, useRef } from 'react';
 import { initialUpdaterRun } from '../animation';
 import { makeMutable, startMapper, stopMapper } from '../core';
+import { shouldBeUseWeb } from '../PlatformChecker';
 export function useDerivedValue(processor, dependencies) {
     var _a;
     const initRef = useRef(null);
-    const inputs = Object.values((_a = processor._closure) !== null && _a !== void 0 ? _a : {});
+    let inputs = Object.values((_a = processor._closure) !== null && _a !== void 0 ? _a : {});
+    if (shouldBeUseWeb()) {
+        if (!inputs.length && (dependencies === null || dependencies === void 0 ? void 0 : dependencies.length)) {
+            // let web work without a Babel/SWC plugin
+            inputs = dependencies;
+        }
+    }
     // build dependencies
     if (dependencies === undefined) {
         dependencies = [...inputs, processor.__workletHash];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.14.3",
+  "version": "2.15.0",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "test": "yarn run format:js && yarn run lint:js && yarn run test:unit",
@@ -77,7 +77,6 @@
   "dependencies": {
     "@babel/plugin-transform-object-assign": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "convert-source-map": "^1.7.0",
     "invariant": "^2.2.4",
     "lodash.isequal": "^4.5.0",
     "setimmediate": "^1.0.5",
@@ -122,6 +121,7 @@
     "jest": "^27.5.1",
     "lint-staged": "^11.2.0",
     "madge": "^5.0.1",
+    "metro-react-native-babel-preset": "^0.74.0",
     "prettier": "^2.5.1",
     "react": "17.0.2",
     "react-native": "0.71.0-rc.5",
@@ -161,5 +161,8 @@
     "./lib/reanimated2/core",
     "./lib/reanimated2/js-reanimated/global",
     "./lib/index"
-  ]
+  ],
+  "resolutions": {
+    "@babel/core": "7.20.12"
+  }
 }

package/src/reanimated2/hook/useAnimatedReaction.ts

@@ -3,6 +3,7 @@ import { BasicWorkletFunction, WorkletFunction } from '../commonTypes';
 import { startMapper, stopMapper } from '../core';
 import { DependencyList } from './commonTypes';
 import { useSharedValue } from './useSharedValue';
+import { shouldBeUseWeb } from '../PlatformChecker';
 
 export interface AnimatedReactionWorkletFunction<T> extends WorkletFunction {
   (prepared: T, previous: T | null): void;
@@ -19,6 +20,13 @@ export function useAnimatedReaction<T>(
   dependencies: DependencyList
 ): void {
   const previous = useSharedValue<T | null>(null);
+  let inputs = Object.values(prepare._closure ?? {});
+  if (shouldBeUseWeb()) {
+    if (!inputs.length && dependencies?.length) {
+      // let web work without a Babel/SWC plugin
+      inputs = dependencies;
+    }
+  }
   if (dependencies === undefined) {
     dependencies = [
       Object.values(prepare._closure ?? {}),
@@ -37,11 +45,7 @@ export function useAnimatedReaction<T>(
       react(input, previous.value);
       previous.value = input;
     };
-    const mapperId = startMapper(
-      fun,
-      Object.values(prepare._closure ?? {}),
-      []
-    );
+    const mapperId = startMapper(fun, inputs, []);
     return () => {
       stopMapper(mapperId);
     };

package/src/reanimated2/hook/useAnimatedStyle.ts

@@ -253,7 +253,7 @@ function styleUpdater(
         requestFrame(frame);
       }
     }
-    state.last = Object.assign(oldValues, newValues);
+    state.last = Object.assign({}, oldValues, newValues);
     const style = getStyleWithoutAnimations(state.last);
     if (style) {
       updateProps(viewDescriptors, style, maybeViewRef);
@@ -263,7 +263,7 @@ function styleUpdater(
     state.animations = [];
 
     const diff = styleDiff(oldValues, newValues);
-    state.last = Object.assign(oldValues, diff);
+    state.last = Object.assign({}, oldValues, newValues);
     if (diff) {
       updateProps(viewDescriptors, newValues, maybeViewRef);
     }
@@ -361,7 +361,7 @@ function jestStyleUpdater(
 
   // calculate diff
   const diff = styleDiff(oldValues, newValues);
-  state.last = Object.assign(oldValues, diff);
+  state.last = Object.assign({}, oldValues, newValues);
 
   if (Object.keys(diff).length !== 0) {
     updatePropsJestWrapper(
@@ -409,7 +409,18 @@ export function useAnimatedStyle<T extends AnimatedStyle>(
   const viewsRef: ViewRefSet<any> = makeViewsRefSet();
   const viewDescriptors: ViewDescriptorsSet = makeViewDescriptorsSet();
   const initRef = useRef<AnimationRef>();
-  const inputs = Object.values(updater._closure ?? {});
+  let inputs = Object.values(updater._closure ?? {});
+  if (shouldBeUseWeb()) {
+    if (!inputs.length && dependencies?.length) {
+      // let web work without a Babel/SWC plugin
+      inputs = dependencies;
+    }
+    if (__DEV__ && !inputs.length && !dependencies && !updater.__workletHash) {
+      console.error(
+        `useAnimatedStyle was used without a dependency array or Babel plugin. Please explicitly pass a dependency array, or enable the Babel/SWC plugin. For more, see the docs: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/web-support#web-without-a-babel-plugin`
+      );
+    }
+  }
   const adaptersArray: AdapterWorkletFunction[] = adapters
     ? Array.isArray(adapters)
       ? adapters

package/src/reanimated2/hook/useDerivedValue.ts

@@ -3,6 +3,7 @@ import { initialUpdaterRun } from '../animation';
 import { BasicWorkletFunction, SharedValue } from '../commonTypes';
 import { makeMutable, startMapper, stopMapper } from '../core';
 import { DependencyList } from './commonTypes';
+import { shouldBeUseWeb } from '../PlatformChecker';
 
 export type DerivedValue<T> = Readonly<SharedValue<T>>;
 
@@ -11,7 +12,13 @@ export function useDerivedValue<T>(
   dependencies: DependencyList
 ): DerivedValue<T> {
   const initRef = useRef<SharedValue<T> | null>(null);
-  const inputs = Object.values(processor._closure ?? {});
+  let inputs = Object.values(processor._closure ?? {});
+  if (shouldBeUseWeb()) {
+    if (!inputs.length && dependencies?.length) {
+      // let web work without a Babel/SWC plugin
+      inputs = dependencies;
+    }
+  }
 
   // build dependencies
   if (dependencies === undefined) {

package/lib/reanimated1/core/Core.test.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import Animated from '../../Animated';
-
-import renderer from 'react-test-renderer';
-
-jest.mock('../../ReanimatedEventEmitter');
-jest.mock('../../ReanimatedModule');
-jest.mock('../../reanimated2/NativeReanimated/NativeReanimated');
-
-describe('Core Animated components', () => {
-  xit('fails if something other then a node or function that returns a node is passed to Animated.Code exec prop', () => {
-    console.error = jest.fn();
-
-    expect(() =>
-      renderer.create(<Animated.Code exec="not a node" />)
-    ).toThrowError(
-      "<Animated.Code /> expects the 'exec' prop or children to be an animated node or a function returning an animated node."
-    );
-  });
-
-  xit('fails if something other then a node or function that returns a node is passed to Animated.Code children', () => {
-    console.error = jest.fn();
-
-    expect(() =>
-      renderer.create(<Animated.Code>not a node</Animated.Code>)
-    ).toThrowError(
-      "<Animated.Code /> expects the 'exec' prop or children to be an animated node or a function returning an animated node."
-    );
-  });
-});

package/src/reanimated1/core/Core.test.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import Animated from '../../Animated';
-
-import renderer from 'react-test-renderer';
-
-jest.mock('../../ReanimatedEventEmitter');
-jest.mock('../../ReanimatedModule');
-jest.mock('../../reanimated2/NativeReanimated/NativeReanimated');
-
-describe('Core Animated components', () => {
-  xit('fails if something other then a node or function that returns a node is passed to Animated.Code exec prop', () => {
-    console.error = jest.fn();
-
-    expect(() =>
-      renderer.create(<Animated.Code exec="not a node" />)
-    ).toThrowError(
-      "<Animated.Code /> expects the 'exec' prop or children to be an animated node or a function returning an animated node."
-    );
-  });
-
-  xit('fails if something other then a node or function that returns a node is passed to Animated.Code children', () => {
-    console.error = jest.fn();
-
-    expect(() =>
-      renderer.create(<Animated.Code>not a node</Animated.Code>)
-    ).toThrowError(
-      "<Animated.Code /> expects the 'exec' prop or children to be an animated node or a function returning an animated node."
-    );
-  });
-});