react-native-reanimated 2.1.0 → 2.2.3

package/ios/native/UIResponder+Reanimated.mm

@@ -1,21 +1,10 @@
 #import "UIResponder+Reanimated.h"
-#import <React/RCTCxxBridgeDelegate.h>
-#import <RNReanimated/NativeProxy.h>
-#import <RNReanimated/REAModule.h>
-#import <ReactCommon/RCTTurboModuleManager.h>
-#import <React/RCTBridge+Private.h>
-#import <React/RCTCxxBridgeDelegate.h>
-#import <RNReanimated/REAEventDispatcher.h>
+#import "REAInitializer.h"
 
-#if RNVERSION >= 64
-#import <React/RCTJSIExecutorRuntimeInstaller.h>
-#endif
-
-#if RNVERSION < 63
-#import <ReactCommon/BridgeJSCallInvoker.h>
-#endif
-
-#if __has_include(<React/HermesExecutorFactory.h>)
+#if __has_include(<reacthermes/HermesExecutorFactory.h>)
+#import <reacthermes/HermesExecutorFactory.h>
+typedef HermesExecutorFactory ExecutorFactory;
+#elif __has_include(<React/HermesExecutorFactory.h>)
 #import <React/HermesExecutorFactory.h>
 typedef HermesExecutorFactory ExecutorFactory;
 #else
@@ -25,45 +14,16 @@ typedef JSCExecutorFactory ExecutorFactory;
 
 #ifndef DONT_AUTOINSTALL_REANIMATED
 
-@interface RCTEventDispatcher(Reanimated)
-
-- (void)setBridge:(RCTBridge*)bridge;
-
-@end
-
 @implementation UIResponder (Reanimated)
 - (std::unique_ptr<facebook::react::JSExecutorFactory>)jsExecutorFactoryForBridge:(RCTBridge *)bridge
 {
-  [bridge moduleForClass:[RCTEventDispatcher class]];
-  RCTEventDispatcher *eventDispatcher = [REAEventDispatcher new];
-  [eventDispatcher setBridge:bridge];
-  [bridge updateModuleWithInstance:eventDispatcher];
-   _bridge_reanimated = bridge;
-  __weak __typeof(self) weakSelf = self;
-
-  const auto executor = [weakSelf, bridge](facebook::jsi::Runtime &runtime) {
-    if (!bridge) {
-      return;
-    }
-    __typeof(self) strongSelf = weakSelf;
-    if (strongSelf) {
-#if RNVERSION >= 63
-      auto reanimatedModule = reanimated::createReanimatedModule(bridge.jsCallInvoker);
-#else
-      auto callInvoker = std::make_shared<react::BridgeJSCallInvoker>(bridge.reactInstance);
-      auto reanimatedModule = reanimated::createReanimatedModule(callInvoker);
-#endif
-      runtime.global().setProperty(runtime,
-                                   jsi::PropNameID::forAscii(runtime, "__reanimatedModuleProxy"),
-                                   jsi::Object::createFromHostObject(runtime, reanimatedModule));
-    }
-  };
+  const auto installer = reanimated::REAJSIExecutorRuntimeInstaller(bridge, NULL);
 
 #if RNVERSION >= 64
   // installs globals such as console, nativePerformanceNow, etc.
-  return std::make_unique<ExecutorFactory>(RCTJSIExecutorRuntimeInstaller(executor));
+  return std::make_unique<ExecutorFactory>(RCTJSIExecutorRuntimeInstaller(installer));
 #else
-  return std::make_unique<ExecutorFactory>(executor);
+  return std::make_unique<ExecutorFactory>(installer);
 #endif
 }
 

package/lib/Animated.js

@@ -4,7 +4,6 @@ import {
   addWhitelistedNativeProps,
   addWhitelistedUIProps,
 } from './ConfigHelper';
-import * as reanimated2 from './reanimated2';
 import * as reanimated1 from './reanimated1';
 
 const Animated = {
@@ -19,8 +18,6 @@ const Animated = {
   addWhitelistedUIProps,
   // reanimated 1
   ...reanimated1,
-  // reanimated 2
-  ...reanimated2,
 };
 
 export * from './reanimated2';

package/lib/createAnimatedComponent.js

@@ -57,7 +57,7 @@ function flattenArray(array) {
   return resultArr;
 }
 
-export default function createAnimatedComponent(Component) {
+export default function createAnimatedComponent(Component, options = {}) {
   invariant(
     typeof Component !== 'function' ||
       (Component.prototype && Component.prototype.isReactComponent),
@@ -104,7 +104,7 @@ export default function createAnimatedComponent(Component) {
 
     _attachNativeEvents() {
       const node = this._getEventViewRef();
-      const viewTag = findNodeHandle(node);
+      const viewTag = findNodeHandle(options.setNativeProps ? this : node);
 
       for (const key in this.props) {
         const prop = this.props[key];
@@ -232,8 +232,12 @@ export default function createAnimatedComponent(Component) {
     }
 
     _updateFromNative(props) {
-      // eslint-disable-next-line no-unused-expressions
-      this._component.setNativeProps?.(props);
+      if (options.setNativeProps) {
+        options.setNativeProps(this._component, props);
+      } else {
+        // eslint-disable-next-line no-unused-expressions
+        this._component.setNativeProps?.(props);
+      }
     }
 
     _attachPropUpdater() {

package/lib/index.js

@@ -4,7 +4,6 @@ import {
   addWhitelistedNativeProps,
   addWhitelistedUIProps,
 } from './ConfigHelper';
-import * as reanimated2 from './reanimated2';
 import * as reanimated1 from './reanimated1';
 
 const Animated = {
@@ -19,8 +18,6 @@ const Animated = {
   addWhitelistedUIProps,
   // reanimated 1
   ...reanimated1,
-  // reanimated 2
-  ...reanimated2,
 };
 
 export * from './reanimated2';

package/lib/reanimated1/animations/decay.js

@@ -45,8 +45,10 @@ const procDecay = proc(
     decay(clock, { time, velocity, position, finished }, { deceleration })
 );
 
-export default (
+export default function decayAnimation(
   clock,
   { time, velocity, position, finished },
   { deceleration }
-) => procDecay(clock, time, velocity, position, finished, deceleration);
+) {
+  return procDecay(clock, time, velocity, position, finished, deceleration);
+}

package/lib/reanimated1/animations/spring.js

@@ -167,7 +167,7 @@ const procSpring = proc(
     )
 );
 
-export default (
+export default function springAnimation(
   clock,
   { finished, velocity, position, time, prevPosition },
   {
@@ -179,8 +179,8 @@ export default (
     restDisplacementThreshold,
     restSpeedThreshold,
   }
-) =>
-  procSpring(
+) {
+  return procSpring(
     finished,
     velocity,
     position,
@@ -195,3 +195,4 @@ export default (
     restDisplacementThreshold,
     clock
   );
+}

package/lib/reanimated1/animations/timing.js

@@ -50,7 +50,7 @@ const internalTiming = proc(function (
   ]);
 });
 
-export default function (clock, state, config) {
+export default function timing(clock, state, config) {
   if (config.duration === 0) {
     // when duration is zero we end the timing immediately
     return block([set(state.position, config.toValue), set(state.finished, 1)]);

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import Animated from '../../Animated';
+
+import renderer from 'react-test-renderer';
+
+jest.mock('../../ReanimatedEventEmitter');
+jest.mock('../../ReanimatedModule');
+jest.mock('../../reanimated2/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/lib/reanimated2/animations.js

@@ -4,6 +4,7 @@
 import { Easing } from './Easing';
 import { isColor, convertToHSVA, toRGBA } from './Colors';
 import NativeReanimated from './NativeReanimated';
+import { Platform } from 'react-native';
 let IN_STYLE_UPDATER = false;
 export function initialUpdaterRun(updater) {
     IN_STYLE_UPDATER = true;
@@ -293,43 +294,58 @@ export function withDecay(userConfig, callback) {
         'worklet';
         const config = {
             deceleration: 0.998,
+            velocityFactor: Platform.OS !== 'web' ? 1 : 1000,
         };
         if (userConfig) {
             Object.keys(userConfig).forEach((key) => (config[key] = userConfig[key]));
         }
-        const VELOCITY_EPS = 5;
+        const VELOCITY_EPS = Platform.OS !== 'web' ? 1 : 1 / 20;
+        const SLOPE_FACTOR = 0.1;
         function decay(animation, now) {
-            const { lastTimestamp, initialVelocity, current, velocity } = animation;
+            const { lastTimestamp, startTimestamp, initialVelocity, current, velocity, } = animation;
             const deltaTime = Math.min(now - lastTimestamp, 64);
-            animation.lastTimestamp = now;
-            const kv = Math.pow(config.deceleration, deltaTime);
-            const kx = (config.deceleration * (1 - kv)) / (1 - config.deceleration);
-            const v0 = velocity / 1000;
-            const v = v0 * kv * 1000;
-            const x = current + v0 * kx;
-            animation.current = x;
+            const v = velocity *
+                Math.exp(-(1 - config.deceleration) * (now - startTimestamp) * SLOPE_FACTOR);
+            animation.current =
+                current + (v * config.velocityFactor * deltaTime) / 1000; // /1000 because time is in ms not in s
             animation.velocity = v;
-            let toValueIsReached = null;
-            if (Array.isArray(config.clamp)) {
+            animation.lastTimestamp = now;
+            if (config.clamp) {
                 if (initialVelocity < 0 && animation.current <= config.clamp[0]) {
-                    toValueIsReached = config.clamp[0];
+                    animation.current = config.clamp[0];
+                    return true;
                 }
                 else if (initialVelocity > 0 &&
                     animation.current >= config.clamp[1]) {
-                    toValueIsReached = config.clamp[1];
+                    animation.current = config.clamp[1];
+                    return true;
                 }
             }
-            if (Math.abs(v) < VELOCITY_EPS || toValueIsReached !== null) {
-                if (toValueIsReached !== null) {
-                    animation.current = toValueIsReached;
-                }
+            if (Math.abs(v) < VELOCITY_EPS) {
                 return true;
             }
         }
+        function validateConfig() {
+            if (config.clamp) {
+                if (Array.isArray(config.clamp)) {
+                    if (config.clamp.length !== 2) {
+                        console.error(`clamp array must contain 2 items but is given ${config.clamp.length}`);
+                    }
+                }
+                else {
+                    console.error(`config.clamp must be an array but is ${typeof config.clamp}`);
+                }
+            }
+            if (config.velocityFactor <= 0) {
+                console.error(`config.velocityFactor must be greather then 0 but is ${config.velocityFactor}`);
+            }
+        }
         function onStart(animation, value, now) {
             animation.current = value;
             animation.lastTimestamp = now;
+            animation.startTimestamp = now;
             animation.initialVelocity = config.velocity;
+            validateConfig();
         }
         return {
             onFrame: decay,

package/lib/reanimated2/core.js

@@ -30,7 +30,7 @@ export const isConfigured = (throwError = false) => {
 };
 export const isConfiguredCheck = () => {
     if (!isConfigured(true)) {
-        throw new Error('If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/installation');
+        throw new Error('If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation');
     }
 };
 function _toArrayReanimated(object) {

package/lib/reanimated2/jestUtils.js

@@ -4,29 +4,62 @@ const MockDate = require('mockdate');
 let config = {
     fps: 60,
 };
-const checkValidation = (received) => {
-    var _a;
-    let message = [];
-    let isValid = true;
-    if (!received.props.style) {
-        isValid = false;
-        message.push("Component not contains 'style' property");
+const isAnimatedStyle = (style) => {
+    return !!style.animatedStyle;
+};
+const getAnimatedStyleFromObject = (style) => {
+    return style.animatedStyle.current.value;
+};
+const getCurrentStyle = (received) => {
+    const styleObject = received.props.style;
+    let currentStyle = {};
+    if (Array.isArray(styleObject)) {
+        received.props.style.forEach((style) => {
+            if (isAnimatedStyle(style)) {
+                currentStyle = Object.assign(Object.assign({}, currentStyle), getAnimatedStyleFromObject(style));
+            }
+            else {
+                currentStyle = Object.assign(Object.assign({}, currentStyle), style);
+            }
+        });
     }
-    if (!((_a = received.props.animatedStyle) === null || _a === void 0 ? void 0 : _a.value)) {
-        isValid = false;
-        message.push("Component not contains 'animatedStyle' property");
+    else {
+        if (isAnimatedStyle(styleObject)) {
+            currentStyle = getAnimatedStyleFromObject(styleObject);
+        }
+        else {
+            currentStyle = Object.assign(Object.assign({}, styleObject), received.props.animatedStyle.value);
+        }
     }
-    message = message.join('\n');
-    return { isValid, message };
+    return currentStyle;
 };
-const getCurrentStyle = (received) => {
-    return Object.assign(Object.assign({}, received.props.style), received.props.animatedStyle.value);
+const checkEqual = (currentStyle, expectStyle) => {
+    if (Array.isArray(expectStyle)) {
+        if (expectStyle.length !== currentStyle.length)
+            return false;
+        for (let i = 0; i < currentStyle.length; i++) {
+            if (!checkEqual(currentStyle[i], expectStyle[i])) {
+                return false;
+            }
+        }
+    }
+    else if (typeof currentStyle === 'object' && currentStyle) {
+        for (const property in expectStyle) {
+            if (!checkEqual(currentStyle[property], expectStyle[property])) {
+                return false;
+            }
+        }
+    }
+    else {
+        return currentStyle === expectStyle;
+    }
+    return true;
 };
 const findStyleDiff = (current, expect, requireAllMatch) => {
     const diffs = [];
     let isEqual = true;
     for (const property in expect) {
-        if (current[property] !== expect[property]) {
+        if (!checkEqual(current[property], expect[property])) {
             isEqual = false;
             diffs.push({
                 property: property,
@@ -51,8 +84,7 @@ const findStyleDiff = (current, expect, requireAllMatch) => {
     return { isEqual, diffs };
 };
 const compareStyle = (received, expectedStyle, config) => {
-    const { isValid, message } = checkValidation(received);
-    if (!isValid) {
+    if (!received.props.style) {
         return { message: () => message, pass: false };
     }
     const { exact } = config;
@@ -64,7 +96,7 @@ const compareStyle = (received, expectedStyle, config) => {
     const currentStyleStr = JSON.stringify(currentStyle);
     const expectedStyleStr = JSON.stringify(expectedStyle);
     const differences = diffs
-        .map((diff) => `- '${diff.property}' should be ${diff.expect}, but is ${diff.current}`)
+        .map((diff) => `- '${diff.property}' should be ${JSON.stringify(diff.expect)}, but is ${JSON.stringify(diff.current)}`)
         .join('\n');
     return {
         message: () => `Expected: ${expectedStyleStr}\nReceived: ${currentStyleStr}\n\nDifferences:\n${differences}`,
@@ -97,18 +129,20 @@ export const withReanimatedTimer = (animatonTest) => {
     afterTest();
 };
 export const advanceAnimationByTime = (time = frameTime) => {
-    for (let i = 0; i < Math.ceil(time / frameTime); i++) {
+    for (let i = 0; i <= Math.ceil(time / frameTime); i++) {
         tickTravel();
     }
+    jest.advanceTimersByTime(frameTime);
 };
 export const advanceAnimationByFrame = (count) => {
-    for (let i = 0; i < count; i++) {
+    for (let i = 0; i <= count; i++) {
         tickTravel();
     }
+    jest.advanceTimersByTime(frameTime);
 };
 export const setUpTests = (userConfig = {}) => {
     const expect = require('expect');
-    frameTime = 1000 / config.fps;
+    frameTime = Math.round(1000 / config.fps);
     config = Object.assign(Object.assign({}, config), userConfig);
     expect.extend({
         toHaveAnimatedStyle(received, expectedStyle, config = {}) {

package/lib/reanimated2/js-reanimated/JSReanimated.js

@@ -10,10 +10,13 @@ export default class JSReanimated {
         this._renderRequested = false;
         this._mapperRegistry = new MapperRegistry(this);
         this._frames = [];
-        this.timeProvider = null;
-        this.timeProvider = process.env.JEST_WORKER_ID
-            ? { now: () => Date.now() }
-            : window.performance;
+        this.timeProvider = {};
+        if (process.env.JEST_WORKER_ID) {
+            this.timeProvider.now = () => Date.now();
+        }
+        else {
+            this.timeProvider.now = () => window.performance.now();
+        }
     }
     pushFrame(frame) {
         this._frames.push(frame);

package/mock.js

@@ -234,10 +234,10 @@ module.exports = {
   __esModule: true,
 
   ...Reanimated,
+  ...ReanimatedV2,
 
   default: {
     ...Reanimated,
-    ...ReanimatedV2,
   },
 
   Transitioning: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.1.0",
+  "version": "2.2.3",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
@@ -24,6 +24,7 @@
     "Common/",
     "src/",
     "lib/",
+    "libSo/",
     "android/src/main/AndroidManifest.xml",
     "android/src/main/java/",
     "android/build.gradle",
@@ -80,7 +81,7 @@
     "@types/babel__generator": "^7.6.2",
     "@types/babel__traverse": "^7.0.15",
     "@types/jest": "^26.0.15",
-    "@types/react-native": "^0.64.2",
+    "@types/react-native": "^0.65.5",
     "@typescript-eslint/eslint-plugin": "^4.15.1",
     "@typescript-eslint/parser": "^4.15.1",
     "babel-eslint": "^10.0.3",
@@ -99,7 +100,7 @@
     "lint-staged": "^10.2.11",
     "prettier": "^2.2.1",
     "react": "17.0.1",
-    "react-native": "^0.64.0",
+    "react-native": "0.66.0",
     "react-native-gesture-handler": "^1.6.1",
     "react-test-renderer": "17.0.1",
     "release-it": "^13.1.1",

package/plugin.js

@@ -554,6 +554,14 @@ function removePluginsFromBlacklist(plugins) {
 
 module.exports = function({ types: t }) {
   return {
+    pre() {
+      // allows adding custom globals such as host-functions
+      if (this.opts != null && Array.isArray(this.opts.globals)) {
+        this.opts.globals.forEach((name) => {
+          globals.add(name)
+        })
+      }
+    },
     visitor: {
       CallExpression: {
         exit(path, state) {

package/react-native-reanimated.d.ts

@@ -119,6 +119,7 @@ declare module 'react-native-reanimated' {
       deceleration?: number;
       velocity?: number;
       clamp?: [number, number];
+      velocityFactor?: number;
     }
     export interface BackwardCompatibleWrapper {
       start: (callback?: (data: { finished: boolean }) => any) => void;
@@ -246,11 +247,16 @@ declare module 'react-native-reanimated' {
     }
     export class Code extends Component<CodeProps> {}
 
+    type Options<P> = {
+      setNativeProps: (ref: any, props: P) => void;
+    }
     export function createAnimatedComponent<P extends object>(
-      component: ComponentClass<P>
+      component: ComponentClass<P>,
+      options?: Options<P>
     ): ComponentClass<AnimateProps<P>>;
     export function createAnimatedComponent<P extends object>(
-      component: FunctionComponent<P>
+      component: FunctionComponent<P>,
+      options?: Options<P>
     ): FunctionComponent<AnimateProps<P>>;
 
     // classes

package/src/Animated.js

@@ -4,7 +4,6 @@ import {
   addWhitelistedNativeProps,
   addWhitelistedUIProps,
 } from './ConfigHelper';
-import * as reanimated2 from './reanimated2';
 import * as reanimated1 from './reanimated1';
 
 const Animated = {
@@ -19,8 +18,6 @@ const Animated = {
   addWhitelistedUIProps,
   // reanimated 1
   ...reanimated1,
-  // reanimated 2
-  ...reanimated2,
 };
 
 export * from './reanimated2';

package/src/createAnimatedComponent.js

@@ -57,7 +57,7 @@ function flattenArray(array) {
   return resultArr;
 }
 
-export default function createAnimatedComponent(Component) {
+export default function createAnimatedComponent(Component, options = {}) {
   invariant(
     typeof Component !== 'function' ||
       (Component.prototype && Component.prototype.isReactComponent),
@@ -104,7 +104,7 @@ export default function createAnimatedComponent(Component) {
 
     _attachNativeEvents() {
       const node = this._getEventViewRef();
-      const viewTag = findNodeHandle(node);
+      const viewTag = findNodeHandle(options.setNativeProps ? this : node);
 
       for (const key in this.props) {
         const prop = this.props[key];
@@ -232,8 +232,12 @@ export default function createAnimatedComponent(Component) {
     }
 
     _updateFromNative(props) {
-      // eslint-disable-next-line no-unused-expressions
-      this._component.setNativeProps?.(props);
+      if (options.setNativeProps) {
+        options.setNativeProps(this._component, props);
+      } else {
+        // eslint-disable-next-line no-unused-expressions
+        this._component.setNativeProps?.(props);
+      }
     }
 
     _attachPropUpdater() {

package/src/reanimated1/animations/decay.js

@@ -45,8 +45,10 @@ const procDecay = proc(
     decay(clock, { time, velocity, position, finished }, { deceleration })
 );
 
-export default (
+export default function decayAnimation(
   clock,
   { time, velocity, position, finished },
   { deceleration }
-) => procDecay(clock, time, velocity, position, finished, deceleration);
+) {
+  return procDecay(clock, time, velocity, position, finished, deceleration);
+}

package/src/reanimated1/animations/spring.js

@@ -167,7 +167,7 @@ const procSpring = proc(
     )
 );
 
-export default (
+export default function springAnimation(
   clock,
   { finished, velocity, position, time, prevPosition },
   {
@@ -179,8 +179,8 @@ export default (
     restDisplacementThreshold,
     restSpeedThreshold,
   }
-) =>
-  procSpring(
+) {
+  return procSpring(
     finished,
     velocity,
     position,
@@ -195,3 +195,4 @@ export default (
     restDisplacementThreshold,
     clock
   );
+}

package/src/reanimated1/animations/timing.js

@@ -50,7 +50,7 @@ const internalTiming = proc(function (
   ]);
 });
 
-export default function (clock, state, config) {
+export default function timing(clock, state, config) {
   if (config.duration === 0) {
     // when duration is zero we end the timing immediately
     return block([set(state.position, config.toValue), set(state.finished, 1)]);