react-native-reanimated 2.14.4 → 2.16.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/Common/cpp/Tools/SingleInstanceChecker.h

@@ -7,6 +7,10 @@
 #include <iostream>
 #include <string>
 
+#ifdef ANDROID
+#include <android/log.h>
+#endif
+
 namespace reanimated {
 
 // This is a class that counts how many instances of a different class there
@@ -22,8 +26,12 @@ class SingleInstanceChecker {
  private:
   void assertWithMessage(bool condition, std::string message) {
     if (!condition) {
-      std::cerr << message << std::endl;
-      assert(condition);
+#ifdef ANDROID
+      __android_log_print(
+          ANDROID_LOG_WARN, "Reanimated", "%s", message.c_str());
+#else
+      std::cerr << "[Reanimated] " << message << std::endl;
+#endif
     }
   }
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.14.4",
+  "version": "2.16.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

@@ -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/android/.gradle/buildOutputCleanup/cache.properties

@@ -1,2 +0,0 @@
-#Thu Jan 19 15:25:25 UTC 2023
-gradle.version=7.5.1

package/lib/Animated.js

@@ -1,9 +0,0 @@
-export { default as createAnimatedComponent } from './createAnimatedComponent';
-export { addWhitelistedNativeProps, addWhitelistedUIProps, } from './ConfigHelper';
-export { default as Text } from './reanimated2/component/Text';
-export { default as View } from './reanimated2/component/View';
-export { default as ScrollView } from './reanimated2/component/ScrollView';
-export { default as Image } from './reanimated2/component/Image';
-export { default as FlatList } from './reanimated2/component/FlatList';
-// @ts-ignore backward compatibility with treeshaking
-export * from './reanimated1';

package/lib/ConfigHelper.js

@@ -1,145 +0,0 @@
-import { configureProps as jsiConfigureProps } from './reanimated2/core';
-/**
- * Styles allowed to be direcly updated in UI thread
- */
-let UI_THREAD_PROPS_WHITELIST = {
-    opacity: true,
-    transform: true,
-    /* colors */
-    backgroundColor: true,
-    borderRightColor: true,
-    borderBottomColor: true,
-    borderColor: true,
-    borderEndColor: true,
-    borderLeftColor: true,
-    borderStartColor: true,
-    borderTopColor: true,
-    /* ios styles */
-    shadowOpacity: true,
-    shadowRadius: true,
-    /* legacy android transform properties */
-    scaleX: true,
-    scaleY: true,
-    translateX: true,
-    translateY: true,
-};
-/**
- * Whitelist of view props that can be updated in native thread via UIManagerModule
- */
-let NATIVE_THREAD_PROPS_WHITELIST = {
-    borderBottomWidth: true,
-    borderEndWidth: true,
-    borderLeftWidth: true,
-    borderRightWidth: true,
-    borderStartWidth: true,
-    borderTopWidth: true,
-    borderWidth: true,
-    bottom: true,
-    flex: true,
-    flexGrow: true,
-    flexShrink: true,
-    height: true,
-    left: true,
-    margin: true,
-    marginBottom: true,
-    marginEnd: true,
-    marginHorizontal: true,
-    marginLeft: true,
-    marginRight: true,
-    marginStart: true,
-    marginTop: true,
-    marginVertical: true,
-    maxHeight: true,
-    maxWidth: true,
-    minHeight: true,
-    minWidth: true,
-    padding: true,
-    paddingBottom: true,
-    paddingEnd: true,
-    paddingHorizontal: true,
-    paddingLeft: true,
-    paddingRight: true,
-    paddingStart: true,
-    paddingTop: true,
-    paddingVertical: true,
-    right: true,
-    start: true,
-    top: true,
-    width: true,
-    zIndex: true,
-    borderBottomEndRadius: true,
-    borderBottomLeftRadius: true,
-    borderBottomRightRadius: true,
-    borderBottomStartRadius: true,
-    borderRadius: true,
-    borderTopEndRadius: true,
-    borderTopLeftRadius: true,
-    borderTopRightRadius: true,
-    borderTopStartRadius: true,
-    elevation: true,
-    fontSize: true,
-    lineHeight: true,
-    textShadowRadius: true,
-    letterSpacing: true,
-    /* strings */
-    display: true,
-    backfaceVisibility: true,
-    overflow: true,
-    resizeMode: true,
-    fontStyle: true,
-    fontWeight: true,
-    textAlign: true,
-    textDecorationLine: true,
-    fontFamily: true,
-    textAlignVertical: true,
-    fontVariant: true,
-    textDecorationStyle: true,
-    textTransform: true,
-    writingDirection: true,
-    /* text color */
-    color: true,
-    tintColor: true,
-    shadowColor: true,
-    placeholderTextColor: true,
-};
-function configureProps() {
-    jsiConfigureProps(Object.keys(UI_THREAD_PROPS_WHITELIST), Object.keys(NATIVE_THREAD_PROPS_WHITELIST));
-}
-export function addWhitelistedNativeProps(props) {
-    const oldSize = Object.keys(NATIVE_THREAD_PROPS_WHITELIST).length;
-    NATIVE_THREAD_PROPS_WHITELIST = Object.assign(Object.assign({}, NATIVE_THREAD_PROPS_WHITELIST), props);
-    if (oldSize !== Object.keys(NATIVE_THREAD_PROPS_WHITELIST).length) {
-        configureProps();
-    }
-}
-export function addWhitelistedUIProps(props) {
-    const oldSize = Object.keys(UI_THREAD_PROPS_WHITELIST).length;
-    UI_THREAD_PROPS_WHITELIST = Object.assign(Object.assign({}, UI_THREAD_PROPS_WHITELIST), props);
-    if (oldSize !== Object.keys(UI_THREAD_PROPS_WHITELIST).length) {
-        configureProps();
-    }
-}
-const PROCESSED_VIEW_NAMES = new Set();
-/**
- * updates UI props whitelist for given view host instance
- * this will work just once for every view name
- */
-export function adaptViewConfig(viewConfig) {
-    const viewName = viewConfig.uiViewClassName;
-    const props = viewConfig.validAttributes;
-    // update whitelist of UI props for this view name only once
-    if (!PROCESSED_VIEW_NAMES.has(viewName)) {
-        const propsToAdd = {};
-        Object.keys(props).forEach((key) => {
-            // we don't want to add native props as they affect layout
-            // we also skip props which repeat here
-            if (!(key in NATIVE_THREAD_PROPS_WHITELIST) &&
-                !(key in UI_THREAD_PROPS_WHITELIST)) {
-                propsToAdd[key] = true;
-            }
-        });
-        addWhitelistedUIProps(propsToAdd);
-        PROCESSED_VIEW_NAMES.add(viewName);
-    }
-}
-configureProps();

package/lib/ReanimatedEventEmitter.js

@@ -1,3 +0,0 @@
-import ReanimatedModule from './ReanimatedModule';
-import { NativeEventEmitter } from 'react-native';
-export default new NativeEventEmitter(ReanimatedModule);

package/lib/ReanimatedModule.js

@@ -1,2 +0,0 @@
-import ReanimatedModuleCompat from './ReanimatedModuleCompat';
-export default ReanimatedModuleCompat;

package/lib/ReanimatedModule.macos.js

@@ -1,2 +0,0 @@
-import ReanimatedModuleCompat from './ReanimatedModuleCompat';
-export default ReanimatedModuleCompat;

package/lib/ReanimatedModule.native.js

@@ -1,12 +0,0 @@
-import { NativeModules } from 'react-native';
-import ReanimatedModuleCompat from './ReanimatedModuleCompat';
-import { nativeShouldBeMock } from './reanimated2/PlatformChecker';
-let exportedModule;
-if (nativeShouldBeMock()) {
-    exportedModule = ReanimatedModuleCompat;
-}
-else {
-    const { ReanimatedModule } = NativeModules;
-    exportedModule = ReanimatedModule;
-}
-export default exportedModule;

package/lib/ReanimatedModule.windows.js

@@ -1,2 +0,0 @@
-import ReanimatedModuleCompat from './ReanimatedModuleCompat';
-export default ReanimatedModuleCompat;

package/lib/ReanimatedModuleCompat.js

@@ -1,66 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-export default {
-    disconnectNodeFromView() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // noop
-        });
-    },
-    attachEvent(_viewTag, _eventName, _nodeID) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // noop
-        });
-    },
-    detachEvent(_viewTag, _eventName, _nodeID) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // noop
-        });
-    },
-    createNode(_nodeID, _config) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // noop
-        });
-    },
-    dropNode(_nodeID) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // noop
-        });
-    },
-    configureProps(_nativeProps, _uiProps) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // noop
-        });
-    },
-    disconnectNodes() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // noop
-        });
-    },
-    addListener() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // noop
-        });
-    },
-    removeListeners() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // noop
-        });
-    },
-    removeAllListeners() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // noop
-        });
-    },
-    animateNextTransition() {
-        return __awaiter(this, void 0, void 0, function* () {
-            console.warn('Reanimated: animateNextTransition is unimplemented on current platform');
-        });
-    },
-};

package/lib/__mocks__/ReanimatedEventEmitter.js

@@ -1,8 +0,0 @@
-const NOOP = () => {
-  // noop
-};
-
-export default {
-  addListener: NOOP,
-  removeAllListeners: NOOP,
-};

package/lib/__mocks__/ReanimatedModule.native.js

@@ -1,11 +0,0 @@
-const NOOP = () => {
-  // noop
-};
-
-export default {
-  configureProps: NOOP,
-  connectNodes: NOOP,
-  getValue: () => 0,
-  disconnectNodes: NOOP,
-  createNode: NOOP,
-};