react-native-reanimated 2.1.0 → 2.2.3

package/src/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/src/reanimated2/animations.ts

@@ -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;
 
@@ -356,55 +357,80 @@ 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;
+      animation.lastTimestamp = now;
 
-      let toValueIsReached = null;
-
-      if (Array.isArray(config.clamp)) {
+      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 {

package/src/reanimated2/core.ts

@@ -39,7 +39,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'
+      'If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation'
     );
   }
 };

package/src/reanimated2/jestUtils.ts

@@ -6,34 +6,69 @@ let config = {
   fps: 60,
 };
 
-const checkValidation = (received) => {
-  let message = [];
-  let isValid = true;
-  if (!received.props.style) {
-    isValid = false;
-    message.push("Component not contains 'style' property");
-  }
-  if (!received.props.animatedStyle?.value) {
-    isValid = false;
-    message.push("Component not contains 'animatedStyle' property");
-  }
-  message = message.join('\n');
+const isAnimatedStyle = (style) => {
+  return !!style.animatedStyle;
+};
 
-  return { isValid, message };
+const getAnimatedStyleFromObject = (style) => {
+  return style.animatedStyle.current.value;
 };
 
 const getCurrentStyle = (received) => {
-  return {
-    ...received.props.style,
-    ...received.props.animatedStyle.value,
-  };
+  const styleObject = received.props.style;
+  let currentStyle = {};
+  if (Array.isArray(styleObject)) {
+    received.props.style.forEach((style) => {
+      if (isAnimatedStyle(style)) {
+        currentStyle = {
+          ...currentStyle,
+          ...getAnimatedStyleFromObject(style),
+        };
+      } else {
+        currentStyle = {
+          ...currentStyle,
+          ...style,
+        };
+      }
+    });
+  } else {
+    if (isAnimatedStyle(styleObject)) {
+      currentStyle = getAnimatedStyleFromObject(styleObject);
+    } else {
+      currentStyle = {
+        ...styleObject,
+        ...received.props.animatedStyle.value,
+      };
+    }
+  }
+  return currentStyle;
+};
+
+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,
@@ -42,6 +77,7 @@ const findStyleDiff = (current, expect, requireAllMatch) => {
       });
     }
   }
+
   if (
     requireAllMatch &&
     Object.keys(current).length !== Object.keys(expect).length
@@ -62,8 +98,7 @@ const findStyleDiff = (current, expect, requireAllMatch) => {
 };
 
 const compareStyle = (received, expectedStyle, config) => {
-  const { isValid, message } = checkValidation(received);
-  if (!isValid) {
+  if (!received.props.style) {
     return { message: () => message, pass: false };
   }
   const { exact } = config;
@@ -79,7 +114,9 @@ const compareStyle = (received, expectedStyle, config) => {
   const differences = diffs
     .map(
       (diff) =>
-        `- '${diff.property}' should be ${diff.expect}, but is ${diff.current}`
+        `- '${diff.property}' should be ${JSON.stringify(
+          diff.expect
+        )}, but is ${JSON.stringify(diff.current)}`
     )
     .join('\n');
 
@@ -122,20 +159,22 @@ export const withReanimatedTimer = (animatonTest) => {
 };
 
 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 = {
     ...config,

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

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