react-native-reanimated 2.3.0-alpha.1 → 2.3.0-beta.2

package/src/ConfigHelper.js

@@ -103,6 +103,7 @@ let NATIVE_THREAD_PROPS_WHITELIST = {
   color: true,
   tintColor: true,
   shadowColor: true,
+  placeholderTextColor: true,
 };
 
 function configureProps() {

package/src/ReanimatedModule.native.js

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

package/src/createAnimatedComponent.js

@@ -8,8 +8,9 @@ import AnimatedValue from './reanimated1/core/AnimatedValue';
 import { createOrReusePropsNode } from './reanimated1/core/AnimatedProps';
 import WorkletEventHandler from './reanimated2/WorkletEventHandler';
 import setAndForwardRef from './setAndForwardRef';
+import './reanimated2/layoutReanimation/LayoutAnimationRepository';
 
-import invariant from 'fbjs/lib/invariant';
+import invariant from 'invariant';
 import { adaptViewConfig } from './ConfigHelper';
 import { RNRenderer } from './reanimated2/platform-specific/RNRenderer';
 import { makeMutable, runOnUI } from './reanimated2/core';
@@ -17,7 +18,9 @@ import {
   DefaultEntering,
   DefaultExiting,
   DefaultLayout,
-} from './reanimated2/layoutReanimation/defaultAnimationsBuilder';
+} from './reanimated2/layoutReanimation/defaultAnimations/Default';
+import { isJest, isChromeDebugger } from './reanimated2/PlatformChecker';
+import { initialUpdaterRun } from './reanimated2/animation';
 
 const NODE_MAPPING = new Map();
 
@@ -46,7 +49,7 @@ function hasAnimatedNodes(value) {
 
 function flattenArray(array) {
   if (!Array.isArray(array)) {
-    return array;
+    return [array];
   }
   const resultArr = [];
 
@@ -73,11 +76,14 @@ export default function createAnimatedComponent(Component, options = {}) {
 
   class AnimatedComponent extends React.Component {
     _invokeAnimatedPropsCallbackOnMount = false;
+    _styles = null;
+    _viewTag = -1;
+    _isFirstRender = true;
 
     constructor(props) {
       super(props);
       this._attachProps(this.props);
-      if (process.env.JEST_WORKER_ID) {
+      if (isJest()) {
         this.animatedStyle = { value: {} };
       }
       this.sv = makeMutable({});
@@ -87,6 +93,7 @@ export default function createAnimatedComponent(Component, options = {}) {
       this._detachPropUpdater();
       this._propsAnimated && this._propsAnimated.__detach();
       this._detachNativeEvents();
+      this._detachStyles();
       this.sv = null;
     }
 
@@ -113,7 +120,6 @@ export default function createAnimatedComponent(Component, options = {}) {
     _attachNativeEvents() {
       const node = this._getEventViewRef();
       const viewTag = findNodeHandle(options.setNativeProps ? this : node);
-
       for (const key in this.props) {
         const prop = this.props[key];
         if (prop instanceof AnimatedEvent) {
@@ -143,6 +149,25 @@ export default function createAnimatedComponent(Component, options = {}) {
       }
     }
 
+    _detachStyles() {
+      if (Platform.OS === 'web') {
+        for (const style of this._styles) {
+          if (style?.viewsRef) {
+            style.viewsRef.remove(this);
+          }
+        }
+      } else if (this._viewTag !== -1) {
+        for (const style of this._styles) {
+          if (style?.viewDescriptors) {
+            style.viewDescriptors.remove(this._viewTag);
+          }
+        }
+        if (this.props.animatedProps?.viewDescriptors) {
+          this.props.animatedProps.viewDescriptors.remove(this._viewTag);
+        }
+      }
+    }
+
     _reattachNativeEvents(prevProps) {
       const node = this._getEventViewRef();
       const attached = new Set();
@@ -257,10 +282,8 @@ export default function createAnimatedComponent(Component, options = {}) {
     }
 
     _attachAnimatedStyles() {
-      let styles = Array.isArray(this.props.style)
-        ? this.props.style
-        : [this.props.style];
-      styles = flattenArray(styles);
+      const styles = flattenArray(this.props.style);
+      this._styles = styles;
       let viewTag, viewName;
       if (Platform.OS === 'web') {
         viewTag = findNodeHandle(this);
@@ -289,11 +312,12 @@ export default function createAnimatedComponent(Component, options = {}) {
           adaptViewConfig(hostInstance.viewConfig);
         }
       }
+      this._viewTag = viewTag;
 
       styles.forEach((style) => {
-        if (style?.viewDescriptor) {
-          style.viewDescriptor.value = { tag: viewTag, name: viewName };
-          if (process.env.JEST_WORKER_ID) {
+        if (style?.viewDescriptors) {
+          style.viewDescriptors.add({ tag: viewTag, name: viewName });
+          if (isJest()) {
             /**
              * We need to connect Jest's TestObject instance whose contains just props object
              * with the updateProps() function where we update the properties of the component.
@@ -302,29 +326,29 @@ export default function createAnimatedComponent(Component, options = {}) {
              */
             this.animatedStyle.value = {
               ...this.animatedStyle.value,
-              ...style.initial,
+              ...style.initial.value,
             };
             style.animatedStyle.current = this.animatedStyle;
           }
         }
       });
       // attach animatedProps property
-      if (this.props.animatedProps?.viewDescriptor) {
-        this.props.animatedProps.viewDescriptor.value = {
+      if (this.props.animatedProps?.viewDescriptors) {
+        this.props.animatedProps.viewDescriptors.add({
           tag: viewTag,
           name: viewName,
-        };
+        });
       }
     }
 
     _hasReanimated2Props(flattenStyles) {
-      if (this.props.animatedProps?.viewDescriptor) {
+      if (this.props.animatedProps?.viewDescriptors) {
         return true;
       }
       if (this.props.style) {
         for (const style of flattenStyles) {
           // eslint-disable-next-line no-prototype-builtins
-          if (style?.hasOwnProperty('viewDescriptor')) {
+          if (style?.hasOwnProperty('viewDescriptors')) {
             return true;
           }
         }
@@ -345,6 +369,7 @@ export default function createAnimatedComponent(Component, options = {}) {
       this._reattachNativeEvents(prevProps);
 
       this._propsAnimated && this._propsAnimated.setNativeView(this._component);
+      this._attachAnimatedStyles();
     }
 
     _setComponentRef = setAndForwardRef({
@@ -428,14 +453,19 @@ export default function createAnimatedComponent(Component, options = {}) {
       for (const key in inputProps) {
         const value = inputProps[key];
         if (key === 'style') {
-          const styles = Array.isArray(value) ? value : [value];
+          const styles = flattenArray(value);
           const processedStyle = styles.map((style) => {
-            if (style && style.viewDescriptor) {
+            if (style && style.viewDescriptors) {
               // this is how we recognize styles returned by useAnimatedStyle
-              if (style.viewRef.current === null) {
-                style.viewRef.current = this;
+              style.viewsRef.add(this);
+              if (this._isFirstRender) {
+                return {
+                  ...style.initial.value,
+                  ...initialUpdaterRun(style.initial.updater),
+                };
+              } else {
+                return style.initial.value;
               }
-              return style.initial;
             } else {
               return style;
             }
@@ -444,11 +474,9 @@ export default function createAnimatedComponent(Component, options = {}) {
             StyleSheet.flatten(processedStyle)
           );
         } else if (key === 'animatedProps') {
-          Object.keys(value.initial).forEach((key) => {
-            props[key] = value.initial[key];
-            if (value.viewRef.current === null) {
-              value.viewRef.current = this;
-            }
+          Object.keys(value.initial.value).forEach((key) => {
+            props[key] = value.initial.value[key];
+            value.viewsRef.add(this);
           });
         } else if (value instanceof AnimatedEvent) {
           // we cannot filter out event listeners completely as some components
@@ -470,7 +498,9 @@ export default function createAnimatedComponent(Component, options = {}) {
             props[key] = dummyListener;
           }
         } else if (!(value instanceof AnimatedNode)) {
-          props[key] = value;
+          if (key !== 'onGestureHandlerStateChange' || !isChromeDebugger()) {
+            props[key] = value;
+          }
         } else if (value instanceof AnimatedValue) {
           // if any prop in animated component is set directly to the `Value` we set those props to the first value of `Value` node in order
           // to avoid default values for a short moment when `Value` is being asynchrounously sent via bridge and initialized in the native side.
@@ -482,10 +512,14 @@ export default function createAnimatedComponent(Component, options = {}) {
 
     render() {
       const props = this._filterNonAnimatedProps(this.props);
-      if (process.env.JEST_WORKER_ID) {
+      if (isJest()) {
         props.animatedStyle = this.animatedStyle;
       }
 
+      if (this._isFirstRender) {
+        this._isFirstRender = false;
+      }
+
       const platformProps = Platform.select({
         web: {},
         default: { collapsable: false },

package/src/reanimated1/core/AnimatedAlways.js

@@ -1,5 +1,5 @@
 import AnimatedNode from './AnimatedNode';
-import invariant from 'fbjs/lib/invariant';
+import invariant from 'invariant';
 import { val } from '../val';
 
 class AnimatedAlways extends AnimatedNode {

package/src/reanimated1/core/AnimatedBezier.js

@@ -1,6 +1,6 @@
 import { val } from '../val';
 import AnimatedNode from './AnimatedNode';
-import invariant from 'fbjs/lib/invariant';
+import invariant from 'invariant';
 
 // These values are established by empiricism with tests (tradeoff: performance VS precision)
 var NEWTON_ITERATIONS = 4;

package/src/reanimated1/core/AnimatedBlock.js

@@ -1,4 +1,4 @@
-import invariant from 'fbjs/lib/invariant';
+import invariant from 'invariant';
 import { val } from '../val';
 import AnimatedNode from './AnimatedNode';
 import InternalAnimatedValue from './InternalAnimatedValue';

package/src/reanimated1/core/AnimatedCall.js

@@ -1,4 +1,4 @@
-import invariant from 'fbjs/lib/invariant';
+import invariant from 'invariant';
 import ReanimatedEventEmitter from '../../ReanimatedEventEmitter';
 import { val } from '../val';
 import AnimatedNode from './AnimatedNode';

package/src/reanimated1/core/AnimatedCallFunc.js

@@ -1,7 +1,7 @@
 import AnimatedNode, { getCallID, setCallID } from './AnimatedNode';
 import { adapt } from './AnimatedBlock';
 import { val } from '../val';
-import invariant from 'fbjs/lib/invariant';
+import invariant from 'invariant';
 
 class AnimatedCallFunc extends AnimatedNode {
   _previousCallID;

package/src/reanimated1/core/AnimatedConcat.js

@@ -1,4 +1,4 @@
-import invariant from 'fbjs/lib/invariant';
+import invariant from 'invariant';
 import { adapt } from '../core/AnimatedBlock';
 import AnimatedNode from './AnimatedNode';
 import { val } from '../val';

package/src/reanimated1/core/AnimatedCond.js

@@ -1,4 +1,4 @@
-import invariant from 'fbjs/lib/invariant';
+import invariant from 'invariant';
 import { adapt } from '../core/AnimatedBlock';
 import { val } from '../val';
 import AnimatedNode from './AnimatedNode';

package/src/reanimated1/core/AnimatedDebug.js

@@ -1,4 +1,4 @@
-import invariant from 'fbjs/lib/invariant';
+import invariant from 'invariant';
 import { NativeModules } from 'react-native';
 import { val } from '../val';
 import { adapt, createAnimatedBlock as block } from './AnimatedBlock';

package/src/reanimated1/core/AnimatedEvent.js

@@ -5,7 +5,7 @@ import AnimatedNode from './AnimatedNode';
 import InternalAnimatedValue from './AnimatedValue';
 import { createAnimatedAlways } from './AnimatedAlways';
 
-import invariant from 'fbjs/lib/invariant';
+import invariant from 'invariant';
 import createEventObjectProxyPolyfill from './createEventObjectProxyPolyfill';
 
 function sanitizeArgMapping(argMapping) {

package/src/reanimated1/core/AnimatedFunction.js

@@ -2,7 +2,7 @@ import AnimatedNode from './AnimatedNode';
 import { createAnimatedCallFunc } from './AnimatedCallFunc';
 import { createAnimatedParam } from './AnimatedParam';
 import { val } from '../val';
-import invariant from 'fbjs/lib/invariant';
+import invariant from 'invariant';
 
 class AnimatedFunction extends AnimatedNode {
   _what;

package/src/reanimated1/core/AnimatedOperator.js

@@ -1,7 +1,7 @@
 import AnimatedNode from './AnimatedNode';
 import { val } from '../val';
 
-import invariant from 'fbjs/lib/invariant';
+import invariant from 'invariant';
 import { adapt } from '../core/AnimatedBlock';
 
 function reduce(fn) {

package/src/reanimated1/core/AnimatedParam.js

@@ -1,4 +1,4 @@
-import invariant from 'fbjs/lib/invariant';
+import invariant from 'invariant';
 import AnimatedNode, { getCallID, setCallID } from './AnimatedNode';
 import AnimatedClock from './AnimatedClock';
 import { val } from '../val';

package/src/reanimated1/core/AnimatedProps.js

@@ -4,8 +4,8 @@ import AnimatedNode from './AnimatedNode';
 import AnimatedEvent from './AnimatedEvent';
 import { createOrReuseStyleNode } from './AnimatedStyle';
 
-import invariant from 'fbjs/lib/invariant';
-import deepEqual from 'fbjs/lib/areEqual';
+import invariant from 'invariant';
+import deepEqual from 'lodash.isequal';
 import { val } from '../val';
 
 function sanitizeProps(inputProps) {

package/src/reanimated1/core/AnimatedSet.js

@@ -1,5 +1,5 @@
 import AnimatedNode from './AnimatedNode';
-import invariant from 'fbjs/lib/invariant';
+import invariant from 'invariant';
 import { val } from '../val';
 import { adapt } from '../core/AnimatedBlock';
 

package/src/reanimated1/core/AnimatedStartClock.js

@@ -1,7 +1,7 @@
 import AnimatedNode from './AnimatedNode';
 import AnimatedClock from './AnimatedClock';
 import { AnimatedParam } from './AnimatedParam';
-import invariant from 'fbjs/lib/invariant';
+import invariant from 'invariant';
 
 class AnimatedStartClock extends AnimatedNode {
   _clockNode;

package/src/reanimated1/core/AnimatedStopClock.js

@@ -1,7 +1,7 @@
 import AnimatedNode from './AnimatedNode';
 import AnimatedClock from './AnimatedClock';
 import { AnimatedParam } from './AnimatedParam';
-import invariant from 'fbjs/lib/invariant';
+import invariant from 'invariant';
 
 class AnimatedStopClock extends AnimatedNode {
   _clockNode;

package/src/reanimated1/core/AnimatedStyle.js

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 import AnimatedNode from './AnimatedNode';
 import { createOrReuseTransformNode } from './AnimatedTransform';
 
-import deepEqual from 'fbjs/lib/areEqual';
+import deepEqual from 'lodash.isequal';
 
 function sanitizeStyle(inputStyle) {
   let style;

package/src/reanimated1/core/AnimatedTransform.js

@@ -1,6 +1,6 @@
 import AnimatedNode from './AnimatedNode';
 
-import deepEqual from 'fbjs/lib/areEqual';
+import deepEqual from 'lodash.isequal';
 
 function sanitizeTransform(inputTransform) {
   const outputTransform = [];

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/reanimated1/core/InternalAnimatedValue.js

@@ -1,7 +1,7 @@
 import AnimatedNode from './AnimatedNode';
 import { val } from '../val';
 import ReanimatedModule from '../../ReanimatedModule';
-import invariant from 'fbjs/lib/invariant';
+import invariant from 'invariant';
 
 function sanitizeValue(value) {
   return value === null || value === undefined || typeof value === 'string'

package/src/reanimated1/core/__mocks__/AnimatedProps.js

@@ -2,7 +2,7 @@ import AnimatedNode from '../AnimatedNode';
 import AnimatedEvent from '../AnimatedEvent';
 import AnimatedStyle, { createOrReuseStyleNode } from '../AnimatedStyle';
 
-import deepEqual from 'fbjs/lib/areEqual';
+import deepEqual from 'lodash.isequal';
 
 // This file has been mocked as react-native's `findNodeHandle` is returning undefined value;
 // and I became easier to mock whole this file instead of mocking RN

package/src/reanimated1/derived/interpolate.js

@@ -8,7 +8,7 @@ import {
   lessOrEq,
   eq,
 } from '../operators';
-import invariant from 'fbjs/lib/invariant';
+import invariant from 'invariant';
 
 import AnimatedNode from '../core/AnimatedNode';
 import { createAnimatedCond as cond } from '../core/AnimatedCond';

package/src/reanimated2/Colors.ts

@@ -37,18 +37,18 @@ function call(...args: unknown[]): string {
 // matchers use RegExp objects which needs to be created separately on JS and on
 // the UI thread. We keep separate cache of Regexes for UI and JS using the below
 // objects, then pick the right cache in getMatchers() method.
-const jsCachedMatchers = {};
-const uiCachedMatchers = !isConfigured() ? null : makeRemote({});
+const jsCachedMatchers: Matchers = {};
+const uiCachedMatchers: Matchers = !isConfigured() ? {} : makeRemote({});
 type Matchers = {
-  rgb: RegExp;
-  rgba: RegExp;
-  hsl: RegExp;
-  hsla: RegExp;
-  hex3: RegExp;
-  hex4: RegExp;
-  hex5: RegExp;
-  hex6: RegExp;
-  hex8: RegExp;
+  rgb?: RegExp;
+  rgba?: RegExp;
+  hsl?: RegExp;
+  hsla?: RegExp;
+  hex3?: RegExp;
+  hex4?: RegExp;
+  hex5?: RegExp;
+  hex6?: RegExp;
+  hex8?: RegExp;
 };
 function getMatchers(): Matchers {
   'worklet';
@@ -329,10 +329,10 @@ function normalizeColor(color: unknown): number | null {
 
   const matchers = getMatchers();
 
-  let match: RegExpExecArray | null;
+  let match: RegExpExecArray | null | undefined;
 
   // Ordered based on occurrences on Facebook codebase
-  if ((match = matchers.hex6.exec(color))) {
+  if ((match = matchers?.hex6?.exec(color))) {
     return Number.parseInt(match[1] + 'ff', 16) >>> 0;
   }
 
@@ -340,7 +340,7 @@ function normalizeColor(color: unknown): number | null {
     return names[color];
   }
 
-  if ((match = matchers.rgb.exec(color))) {
+  if ((match = matchers?.rgb?.exec(color))) {
     return (
       // b
       ((parse255(match[1]) << 24) | // r
@@ -351,7 +351,7 @@ function normalizeColor(color: unknown): number | null {
     );
   }
 
-  if ((match = matchers.rgba.exec(color))) {
+  if ((match = matchers?.rgba?.exec(color))) {
     return (
       // b
       ((parse255(match[1]) << 24) | // r
@@ -362,7 +362,7 @@ function normalizeColor(color: unknown): number | null {
     );
   }
 
-  if ((match = matchers.hex3.exec(color))) {
+  if ((match = matchers?.hex3?.exec(color))) {
     return (
       Number.parseInt(
         match[1] +
@@ -378,11 +378,11 @@ function normalizeColor(color: unknown): number | null {
   }
 
   // https://drafts.csswg.org/css-color-4/#hex-notation
-  if ((match = matchers.hex8.exec(color))) {
+  if ((match = matchers?.hex8?.exec(color))) {
     return Number.parseInt(match[1], 16) >>> 0;
   }
 
-  if ((match = matchers.hex4.exec(color))) {
+  if ((match = matchers?.hex4?.exec(color))) {
     return (
       Number.parseInt(
         match[1] +
@@ -398,7 +398,7 @@ function normalizeColor(color: unknown): number | null {
     );
   }
 
-  if ((match = matchers.hsl.exec(color))) {
+  if ((match = matchers?.hsl?.exec(color))) {
     return (
       (hslToRgb(
         parse360(match[1]), // h
@@ -410,7 +410,7 @@ function normalizeColor(color: unknown): number | null {
     );
   }
 
-  if ((match = matchers.hsla.exec(color))) {
+  if ((match = matchers?.hsla?.exec(color))) {
     return (
       (hslToRgb(
         parse360(match[1]), // h
@@ -634,9 +634,9 @@ export function processColor(color: unknown): number | null | undefined {
   return normalizedColor;
 }
 
-export function convertToHSVA(
-  color: unknown
-): [number, number, number, number] {
+export type ParsedColorArray = [number, number, number, number];
+
+export function convertToHSVA(color: unknown): ParsedColorArray {
   'worklet';
   const processedColor = processColorInitially(color)!; // argb;
   const a = (processedColor >>> 24) / 255;
@@ -647,7 +647,7 @@ export function convertToHSVA(
   return [h, s, v, a];
 }
 
-export function toRGBA(HSVA: [number, number, number, number]): string {
+export function toRGBA(HSVA: ParsedColorArray): string {
   'worklet';
   const { r, g, b } = HSVtoRGB(HSVA[0], HSVA[1], HSVA[2]);
   return `rgba(${r}, ${g}, ${b}, ${HSVA[3]})`;
@@ -704,9 +704,11 @@ const getInterpolateCacheRGBA = (
   const g = [];
   const b = [];
   const a = [];
-  for (const color of colors) {
+  for (let i = 0; i < colors.length; ++i) {
+    const color = colors[i];
     const proocessedColor = processColor(color);
-    if (proocessedColor) {
+    // explicit check in case if processedColor is 0
+    if (proocessedColor !== null && proocessedColor !== undefined) {
       r.push(red(proocessedColor));
       g.push(green(proocessedColor));
       b.push(blue(proocessedColor));
@@ -747,7 +749,8 @@ const getInterpolateCacheHSV = (
   const h = [];
   const s = [];
   const v = [];
-  for (const color of colors) {
+  for (let i = 0; i < colors.length; ++i) {
+    const color = colors[i];
     const proocessedColor = RGBtoHSV(processColor(color) as any);
     if (proocessedColor) {
       h.push(proocessedColor.h);

package/src/reanimated2/Easing.ts

@@ -54,7 +54,9 @@ import { Bezier } from './Bezier';
  * - [`out`](docs/easing.html#out) runs an easing function backwards
  */
 
-type EasingFn = (t: number) => number;
+export type EasingFn = (t: number) => number;
+
+export type EasingFactoryFn = { factory: () => EasingFn };
 /**
  * A linear function, `f(t) = t`. Position correlates to elapsed time one to
  * one.