react-native-reanimated 3.0.0-rc.9 → 3.0.1

package/src/reanimated2/mappers.ts

@@ -1,6 +1,9 @@
 import { SharedValue } from './commonTypes';
+import { isJest } from './PlatformChecker';
 import { runOnUI } from './threads';
 
+const IS_JEST = isJest();
+
 export type Mapper = {
   id: number;
   dirty: boolean;
@@ -14,7 +17,7 @@ export function createMapperRegistry() {
   const mappers = new Map();
   let sortedMappers: Mapper[] = [];
 
-  let frameRequested = false;
+  let runRequested = false;
 
   function updateMappersOrder() {
     // sort mappers topologically
@@ -74,8 +77,8 @@ export function createMapperRegistry() {
     sortedMappers = newOrder;
   }
 
-  function mapperFrame() {
-    frameRequested = false;
+  function mapperRun() {
+    runRequested = false;
     if (mappers.size !== sortedMappers.length) {
       updateMappersOrder();
     }
@@ -88,9 +91,17 @@ export function createMapperRegistry() {
   }
 
   function maybeRequestUpdates() {
-    if (!frameRequested) {
-      requestAnimationFrame(mapperFrame);
-      frameRequested = true;
+    if (IS_JEST) {
+      // On Jest environment we avoid using setImmediate as that'd require test
+      // to advance the clock manually. This on other hand would require tests
+      // to know how many times mappers need to run. As we don't want tests to
+      // make any assumptions on that number it is easier to execute mappers
+      // immediately for testing purposes and only expect test to advance timers
+      // if they want to make any assertions on the effects of animations being run.
+      mapperRun();
+    } else if (!runRequested) {
+      setImmediate(mapperRun);
+      runRequested = true;
     }
   }
 

package/src/reanimated2/mock.ts

@@ -16,7 +16,19 @@ class BaseAnimationMock {
     return this;
   }
 
-  withCallback(_: (finsihed: boolean) => void) {
+  springify(_: number) {
+    return this;
+  }
+
+  damping(_: number) {
+    return this;
+  }
+
+  stiffness(_: number) {
+    return this;
+  }
+
+  withCallback(_: (finished: boolean) => void) {
     return this;
   }
 
@@ -27,6 +39,10 @@ class BaseAnimationMock {
   withInitialValues() {
     return this;
   }
+
+  build() {
+    return () => ({ initialValues: {}, animations: {} });
+  }
 }
 
 const ReanimatedV2 = {
@@ -102,7 +118,7 @@ const ReanimatedV2 = {
   'FadeInRight',
   'FadeInLeft',
   'FadeInUp',
-  'FadFadeInDown',
+  'FadeInDown',
   'FadeOut',
   'FadeOutRight',
   'FadeOutLeft',
@@ -174,6 +190,13 @@ const ReanimatedV2 = {
   'RollInRight',
   'RollOutLeft',
   'RollOutRight',
+
+  'Layout',
+  'CurvedTransition',
+  'JumpingTransition',
+  'SequencedTransition',
+  'FadingTransition',
+  'EntryExitTransition',
 ].forEach((k) =>
   Object.assign(ReanimatedV2, {
     [k]: new BaseAnimationMock(),

package/src/reanimated2/mutables.ts

@@ -53,6 +53,7 @@ export function makeUIMutable<T>(
       listeners.delete(id);
     },
     _animation: null,
+    _isReanimatedSharedValue: true,
   };
   return self;
 }
@@ -134,6 +135,7 @@ export function makeMutable<T>(
       }
       listeners!.delete(id);
     },
+    _isReanimatedSharedValue: true,
   };
   registerShareableMapping(mutable, handle);
   return mutable;

package/src/reanimated2/platform-specific/checkVersion.ts

@@ -0,0 +1,39 @@
+/**
+ * We hardcode the version of Reanimated here in order to compare it
+ * with the version used to build the native part of the library in runtime.
+ * Remember to keep this in sync with the version declared in `package.json`
+ */
+const jsVersion = '3.0.1';
+
+/**
+ * Checks that native and js versions of reanimated match.
+ */
+export function checkVersion(): void {
+  const cppVersion = global._REANIMATED_VERSION_CPP;
+  if (cppVersion === undefined) {
+    console.error(
+      `[Reanimated] Couldn't determine the version of the native part of Reanimated. Did you forget to re-build the app after upgrading react-native-reanimated? If you use Expo Go, you must use the exact version which is bundled into Expo SDK.`
+    );
+    return;
+  }
+  const ok = (() => {
+    if (
+      jsVersion.match(/^\d+\.\d+\.\d+$/) &&
+      cppVersion.match(/^\d+\.\d+\.\d+$/)
+    ) {
+      // x.y.z, compare only major and minor, skip patch
+      const [jsMajor, jsMinor] = jsVersion.split('.');
+      const [cppMajor, cppMinor] = cppVersion.split('.');
+      return jsMajor === cppMajor && jsMinor === cppMinor;
+    } else {
+      // alpha, beta or rc, compare everything
+      return jsVersion === cppVersion;
+    }
+  })();
+  if (!ok) {
+    console.error(
+      `[Reanimated] Mismatch between JavaScript part and native part of Reanimated (${jsVersion} vs. ${cppVersion}). Did you forget to re-build the app after upgrading react-native-reanimated? If you use Expo Go, you must downgrade to ${cppVersion} which is bundled into Expo SDK.`
+    );
+    // TODO: detect Expo managed workflow
+  }
+}

package/src/reanimated2/platform-specific/checkVersion.web.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+/**
+ * Checks that native and js versions of reanimated match.
+ * Stubbed for web, where this check is unnecessary.
+ */
+export function checkVersion(): void {}

package/src/reanimated2/pluginUtils.ts

@@ -0,0 +1,8 @@
+export function getUseOfValueInStyleWarning() {
+  return (
+    "It looks like you might be using shared value's .value inside reanimated inline style. " +
+    'If you want a component to update when shared value changes you should use the shared value' +
+    ' directly instead of its current state represented by `.value`. See documentation here: ' +
+    'https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/animations#animations-in-inline-styles'
+  );
+}

package/src/reanimated2/shareables.ts

@@ -17,6 +17,16 @@ const _shareableCache = new WeakMap<
 // this is used to allow for a converted shareable to be passed to makeShareableClone
 const _shareableFlag = Symbol('shareable flag');
 
+const MAGIC_KEY = 'REANIMATED_MAGIC_KEY';
+
+function isHostObject(value: any): boolean {
+  // We could use JSI to determine whether an object is a host object, however
+  // the below workaround works well and is way faster than an additional JSI call.
+  // We use the fact that host objects have broken implementation of `hasOwnProperty`
+  // and hence return true for all `in` checks regardless of the key we ask for.
+  return MAGIC_KEY in value;
+}
+
 export function registerShareableMapping(
   shareable: any,
   shareableRef?: ShareableRef<any>
@@ -27,14 +37,10 @@ export function registerShareableMapping(
   _shareableCache.set(shareable, shareableRef || _shareableFlag);
 }
 
-export function makeShareableShadowNodeWrapper<T>(shadowNodeWrapper: T): T {
-  const adoptedSNW =
-    NativeReanimatedModule.makeShareableClone(shadowNodeWrapper);
-  registerShareableMapping(shadowNodeWrapper, adoptedSNW);
-  return shadowNodeWrapper;
-}
-
-export function makeShareableCloneRecursive<T>(value: any): ShareableRef<T> {
+export function makeShareableCloneRecursive<T>(
+  value: any,
+  shouldPersistRemote = false
+): ShareableRef<T> {
   if (USE_STUB_IMPLEMENTATION) {
     return value;
   }
@@ -53,14 +59,34 @@ export function makeShareableCloneRecursive<T>(value: any): ShareableRef<T> {
       } else if (type === 'function' && value.__workletHash === undefined) {
         // this is a remote function
         toAdapt = value;
+      } else if (isHostObject(value)) {
+        // for host objects we pass the reference to the object as shareable and
+        // then recreate new host object wrapping the same instance on the UI thread.
+        // there is no point of iterating over keys as we do for regular objects.
+        toAdapt = value;
       } else {
-        if (__DEV__ && value.__workletHash !== undefined) {
-          registerWorkletStackDetails(
-            value.__workletHash,
-            value.__stackDetails
+        toAdapt = {};
+        if (value.__workletHash !== undefined) {
+          // we are converting a worklet
+          if (__DEV__) {
+            registerWorkletStackDetails(
+              value.__workletHash,
+              value.__stackDetails
+            );
+            delete value.__stackDetails;
+          }
+          // to save on transferring static __initData field of worklet structure
+          // we request shareable value to persist its UI counterpart. This means
+          // that the __initData field that contains long strings represeting the
+          // worklet code, source map, and location, will always be
+          // serialized/deserialized once.
+          toAdapt.__initData = makeShareableCloneRecursive(
+            value.__initData,
+            true
           );
+          delete value.__initData;
         }
-        toAdapt = {};
+
         for (const [key, element] of Object.entries(value)) {
           toAdapt[key] = makeShareableCloneRecursive(element);
         }
@@ -71,16 +97,19 @@ export function makeShareableCloneRecursive<T>(value: any): ShareableRef<T> {
         // shareable. Meaning that they may be doing a faulty assumption in their
         // code expecting that the updates are going to automatically populate to
         // the object sent to the UI thread. If the user really wants some objects
-        // to be mutable they should use share values instead.
+        // to be mutable they should use shared values instead.
         Object.freeze(value);
       }
-      const adopted = NativeReanimatedModule.makeShareableClone(toAdapt);
+      const adopted = NativeReanimatedModule.makeShareableClone(
+        toAdapt,
+        shouldPersistRemote
+      );
       _shareableCache.set(value, adopted);
       _shareableCache.set(adopted, _shareableFlag);
       return adopted;
     }
   }
-  return NativeReanimatedModule.makeShareableClone(value);
+  return NativeReanimatedModule.makeShareableClone(value, shouldPersistRemote);
 }
 
 export function makeShareableCloneOnUIRecursive<T>(value: T): ShareableRef<T> {

package/src/reanimated2/threads.ts

@@ -1,28 +1,127 @@
 import NativeReanimatedModule from './NativeReanimated';
+import { isJest, shouldBeUseWeb } from './PlatformChecker';
 import { ComplexWorkletFunction } from './commonTypes';
 import {
   makeShareableCloneOnUIRecursive,
   makeShareableCloneRecursive,
 } from './shareables';
 
+const IS_JEST = isJest();
+const IS_WEB = shouldBeUseWeb();
+
+let _runOnUIQueue: Array<[ComplexWorkletFunction<any[], any>, any[]]> = [];
+
+export function setupSetImmediate() {
+  'worklet';
+
+  let immediateCallbacks: Array<() => void> = [];
+
+  // @ts-ignore – typescript expects this to conform to NodeJS definition and expects the return value to be NodeJS.Immediate which is an object and not a number
+  global.setImmediate = (callback: () => void): number => {
+    immediateCallbacks.push(callback);
+    return -1;
+  };
+
+  global.__flushImmediates = () => {
+    for (let index = 0; index < immediateCallbacks.length; index += 1) {
+      // we use classic 'for' loop because the size of the currentTasks array may change while executing some of the callbacks due to setImmediate calls
+      immediateCallbacks[index]();
+    }
+    immediateCallbacks = [];
+  };
+}
+
+function flushImmediatesOnUIThread() {
+  'worklet';
+  global.__flushImmediates();
+}
+
+export const flushImmediates = shouldBeUseWeb()
+  ? () => {
+      // on web flushing is a noop as immediates are handled by the browser
+    }
+  : flushImmediatesOnUIThread;
+
+/**
+ * Schedule a worklet to execute on the UI runtime. This method does not schedule the work immediately but instead
+ * waits for other worklets to be scheduled within the same JS loop. It uses setImmediate to schedule all the worklets
+ * at once making sure they will run within the same frame boundaries on the UI thread.
+ */
 export function runOnUI<A extends any[], R>(
   worklet: ComplexWorkletFunction<A, R>
 ): (...args: A) => void {
-  if (__DEV__) {
-    if (worklet.__workletHash === undefined) {
-      throw new Error('runOnUI() can only be used on worklets');
+  if (__DEV__ && !IS_WEB && worklet.__workletHash === undefined) {
+    throw new Error('runOnUI() can only be used on worklets');
+  }
+  return (...args) => {
+    if (IS_JEST) {
+      // Mocking time in Jest is tricky as both requestAnimationFrame and setImmediate
+      // callbacks run on the same queue and can be interleaved. There is no way
+      // to flush particular queue in Jest and the only control over mocked timers
+      // is by using jest.advanceTimersByTime() method which advances all types
+      // of timers including immediate and animation callbacks. Ideally we'd like
+      // to have some way here to schedule work along with React updates, but
+      // that's not possible, and hence in Jest environment instead of using scheduling
+      // mechanism we just schedule the work ommiting the queue. This is ok for the
+      // uses that we currently have but may not be ok for future tests that we write.
+      NativeReanimatedModule.scheduleOnUI(
+        makeShareableCloneRecursive(() => {
+          'worklet';
+          worklet(...args);
+        })
+      );
+      return;
     }
+    _runOnUIQueue.push([worklet, args]);
+    if (_runOnUIQueue.length === 1) {
+      setImmediate(() => {
+        const queue = _runOnUIQueue;
+        _runOnUIQueue = [];
+        NativeReanimatedModule.scheduleOnUI(
+          makeShareableCloneRecursive(() => {
+            'worklet';
+            queue.forEach(([worklet, args]) => {
+              worklet(...args);
+            });
+            flushImmediates();
+          })
+        );
+      });
+    }
+  };
+}
+
+/**
+ * Schedule a worklet to execute on the UI runtime skipping batching mechanism.
+ */
+export function runOnUIImmediately<A extends any[], R>(
+  worklet: ComplexWorkletFunction<A, R>
+): (...args: A) => void {
+  if (__DEV__ && !IS_WEB && worklet.__workletHash === undefined) {
+    throw new Error('runOnUI() can only be used on worklets');
   }
   return (...args) => {
     NativeReanimatedModule.scheduleOnUI(
       makeShareableCloneRecursive(() => {
         'worklet';
-        return worklet(...args);
+        worklet(...args);
       })
     );
   };
 }
 
+if (__DEV__) {
+  try {
+    runOnUI(() => {
+      'worklet';
+    });
+  } catch (e) {
+    throw new Error(
+      'Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js? See installation docs at https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation#babel-plugin.'
+    );
+  }
+}
+
 export function runOnJS<A extends any[], R>(
   fun: ComplexWorkletFunction<A, R>
 ): (...args: A) => void {

package/src/reanimated2/utils.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 import { measure } from './NativeMethods';
 import { RefObjectFunction } from './hook/commonTypes';
+import { SharedValue } from './commonTypes';
 
 export interface ComponentCoords {
   x: number;
@@ -26,3 +27,8 @@ export function getRelativeCoords(
     y: absoluteY - parentCoords.y,
   };
 }
+
+export function isSharedValue<T>(value: any): value is SharedValue<T> {
+  'worklet';
+  return value?._isReanimatedSharedValue === true;
+}

package/src/reanimated2/valueSetter.ts

@@ -1,6 +1,5 @@
 import { AnimationObject, AnimatableValue } from './commonTypes';
 import { Descriptor } from './hook/commonTypes';
-import { getTimestamp } from './time';
 export { stopMapper } from './mappers';
 
 export function valueSetter(sv: any, value: any): void {
@@ -32,7 +31,7 @@ export function valueSetter(sv: any, value: any): void {
     const initializeAnimation = (timestamp: number) => {
       animation.onStart(animation, sv.value, timestamp, previousAnimation);
     };
-    const currentTimestamp = getTimestamp();
+    const currentTimestamp = global.__frameTimestamp || performance.now();
     initializeAnimation(currentTimestamp);
     const step = (timestamp: number) => {
       if (animation.cancelled) {

package/lib/commonjs/reanimated2/time.js

@@ -1,55 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getTimestamp = getTimestamp;
-Object.defineProperty(exports, "stopMapper", {
-  enumerable: true,
-  get: function () {
-    return _mappers.stopMapper;
-  }
-});
-
-var _NativeReanimated = _interopRequireDefault(require("./NativeReanimated"));
-
-var _reactNative = require("react-native");
-
-var _PlatformChecker = require("./PlatformChecker");
-
-var _mappers = require("./mappers");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-let _getTimestamp;
-
-if ((0, _PlatformChecker.nativeShouldBeMock)()) {
-  _getTimestamp = () => {
-    return _NativeReanimated.default.getTimestamp();
-  };
-} else {
-  _getTimestamp = () => {
-    'worklet';
-
-    if (_frameTimestamp) {
-      return _frameTimestamp;
-    }
-
-    if (_eventTimestamp) {
-      return _eventTimestamp;
-    }
-
-    return _getCurrentTime();
-  };
-}
-
-function getTimestamp() {
-  'worklet';
-
-  if (_reactNative.Platform.OS === 'web') {
-    return _NativeReanimated.default.getTimestamp();
-  }
-
-  return _getTimestamp();
-}
-//# sourceMappingURL=time.js.map

package/lib/commonjs/reanimated2/time.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_getTimestamp","nativeShouldBeMock","NativeReanimatedModule","getTimestamp","_frameTimestamp","_eventTimestamp","_getCurrentTime","Platform","OS"],"sources":["time.ts"],"sourcesContent":["import NativeReanimatedModule from './NativeReanimated';\nimport { Platform } from 'react-native';\nimport { nativeShouldBeMock } from './PlatformChecker';\nexport { stopMapper } from './mappers';\n\nlet _getTimestamp: () => number;\nif (nativeShouldBeMock()) {\n  _getTimestamp = () => {\n    return NativeReanimatedModule.getTimestamp();\n  };\n} else {\n  _getTimestamp = () => {\n    'worklet';\n    if (_frameTimestamp) {\n      return _frameTimestamp;\n    }\n    if (_eventTimestamp) {\n      return _eventTimestamp;\n    }\n    return _getCurrentTime();\n  };\n}\n\nexport function getTimestamp(): number {\n  'worklet';\n  if (Platform.OS === 'web') {\n    return NativeReanimatedModule.getTimestamp();\n  }\n  return _getTimestamp();\n}\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAEA,IAAIA,aAAJ;;AACA,IAAI,IAAAC,mCAAA,GAAJ,EAA0B;EACxBD,aAAa,GAAG,MAAM;IACpB,OAAOE,yBAAA,CAAuBC,YAAvB,EAAP;EACD,CAFD;AAGD,CAJD,MAIO;EACLH,aAAa,GAAG,MAAM;IACpB;;IACA,IAAII,eAAJ,EAAqB;MACnB,OAAOA,eAAP;IACD;;IACD,IAAIC,eAAJ,EAAqB;MACnB,OAAOA,eAAP;IACD;;IACD,OAAOC,eAAe,EAAtB;EACD,CATD;AAUD;;AAEM,SAASH,YAAT,GAAgC;EACrC;;EACA,IAAII,qBAAA,CAASC,EAAT,KAAgB,KAApB,EAA2B;IACzB,OAAON,yBAAA,CAAuBC,YAAvB,EAAP;EACD;;EACD,OAAOH,aAAa,EAApB;AACD"}

package/lib/module/reanimated2/time.js

@@ -1,37 +0,0 @@
-import NativeReanimatedModule from './NativeReanimated';
-import { Platform } from 'react-native';
-import { nativeShouldBeMock } from './PlatformChecker';
-export { stopMapper } from './mappers';
-
-let _getTimestamp;
-
-if (nativeShouldBeMock()) {
-  _getTimestamp = () => {
-    return NativeReanimatedModule.getTimestamp();
-  };
-} else {
-  _getTimestamp = () => {
-    'worklet';
-
-    if (_frameTimestamp) {
-      return _frameTimestamp;
-    }
-
-    if (_eventTimestamp) {
-      return _eventTimestamp;
-    }
-
-    return _getCurrentTime();
-  };
-}
-
-export function getTimestamp() {
-  'worklet';
-
-  if (Platform.OS === 'web') {
-    return NativeReanimatedModule.getTimestamp();
-  }
-
-  return _getTimestamp();
-}
-//# sourceMappingURL=time.js.map

package/lib/module/reanimated2/time.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["NativeReanimatedModule","Platform","nativeShouldBeMock","stopMapper","_getTimestamp","getTimestamp","_frameTimestamp","_eventTimestamp","_getCurrentTime","OS"],"sources":["time.ts"],"sourcesContent":["import NativeReanimatedModule from './NativeReanimated';\nimport { Platform } from 'react-native';\nimport { nativeShouldBeMock } from './PlatformChecker';\nexport { stopMapper } from './mappers';\n\nlet _getTimestamp: () => number;\nif (nativeShouldBeMock()) {\n  _getTimestamp = () => {\n    return NativeReanimatedModule.getTimestamp();\n  };\n} else {\n  _getTimestamp = () => {\n    'worklet';\n    if (_frameTimestamp) {\n      return _frameTimestamp;\n    }\n    if (_eventTimestamp) {\n      return _eventTimestamp;\n    }\n    return _getCurrentTime();\n  };\n}\n\nexport function getTimestamp(): number {\n  'worklet';\n  if (Platform.OS === 'web') {\n    return NativeReanimatedModule.getTimestamp();\n  }\n  return _getTimestamp();\n}\n"],"mappings":"AAAA,OAAOA,sBAAP,MAAmC,oBAAnC;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,kBAAT,QAAmC,mBAAnC;AACA,SAASC,UAAT,QAA2B,WAA3B;;AAEA,IAAIC,aAAJ;;AACA,IAAIF,kBAAkB,EAAtB,EAA0B;EACxBE,aAAa,GAAG,MAAM;IACpB,OAAOJ,sBAAsB,CAACK,YAAvB,EAAP;EACD,CAFD;AAGD,CAJD,MAIO;EACLD,aAAa,GAAG,MAAM;IACpB;;IACA,IAAIE,eAAJ,EAAqB;MACnB,OAAOA,eAAP;IACD;;IACD,IAAIC,eAAJ,EAAqB;MACnB,OAAOA,eAAP;IACD;;IACD,OAAOC,eAAe,EAAtB;EACD,CATD;AAUD;;AAED,OAAO,SAASH,YAAT,GAAgC;EACrC;;EACA,IAAIJ,QAAQ,CAACQ,EAAT,KAAgB,KAApB,EAA2B;IACzB,OAAOT,sBAAsB,CAACK,YAAvB,EAAP;EACD;;EACD,OAAOD,aAAa,EAApB;AACD"}

package/src/reanimated2/time.ts

@@ -1,30 +0,0 @@
-import NativeReanimatedModule from './NativeReanimated';
-import { Platform } from 'react-native';
-import { nativeShouldBeMock } from './PlatformChecker';
-export { stopMapper } from './mappers';
-
-let _getTimestamp: () => number;
-if (nativeShouldBeMock()) {
-  _getTimestamp = () => {
-    return NativeReanimatedModule.getTimestamp();
-  };
-} else {
-  _getTimestamp = () => {
-    'worklet';
-    if (_frameTimestamp) {
-      return _frameTimestamp;
-    }
-    if (_eventTimestamp) {
-      return _eventTimestamp;
-    }
-    return _getCurrentTime();
-  };
-}
-
-export function getTimestamp(): number {
-  'worklet';
-  if (Platform.OS === 'web') {
-    return NativeReanimatedModule.getTimestamp();
-  }
-  return _getTimestamp();
-}