react-native-reanimated 2.3.0-beta.3 → 2.3.2

package/src/createAnimatedComponent.tsx

@@ -17,18 +17,26 @@ import './reanimated2/layoutReanimation/LayoutAnimationRepository';
 import invariant from 'invariant';
 import { adaptViewConfig } from './ConfigHelper';
 import { RNRenderer } from './reanimated2/platform-specific/RNRenderer';
-import { makeMutable, runOnUI } from './reanimated2/core';
+import {
+  makeMutable,
+  runOnUI,
+  enableLayoutAnimations,
+} from './reanimated2/core';
 import {
   DefaultEntering,
   DefaultExiting,
   DefaultLayout,
 } from './reanimated2/layoutReanimation/defaultAnimations/Default';
-import { isJest, isChromeDebugger } from './reanimated2/PlatformChecker';
+import {
+  isJest,
+  isChromeDebugger,
+  shouldBeUseWeb,
+} from './reanimated2/PlatformChecker';
 import { initialUpdaterRun } from './reanimated2/animation';
 import {
   BaseAnimationBuilder,
   EntryExitAnimationFunction,
-  LayoutAnimationFunction,
+  ILayoutAnimationBuilder,
 } from './reanimated2/layoutReanimation';
 import { SharedValue, StyleProps } from './reanimated2/commonTypes';
 import {
@@ -88,6 +96,21 @@ function flattenArray<T>(array: NestedArray<T>): T[] {
   return resultArr;
 }
 
+function onlyAnimatedStyles(styles: StyleProps[]) {
+  return styles.filter((style) => style?.viewDescriptors);
+}
+
+function isSameAnimatedStyle(
+  style1?: StyleProps,
+  style2?: StyleProps
+): boolean {
+  // We cannot use equality check to compare useAnimatedStyle outputs directly.
+  // Instead, we can compare its viewsRefs.
+  return style1?.viewsRef === style2?.viewsRef;
+}
+
+const isSameAnimatedProps = isSameAnimatedStyle;
+
 const has = <K extends string>(
   key: K,
   x: unknown
@@ -115,7 +138,7 @@ export type AnimatedComponentProps<P extends Record<string, unknown>> = P & {
   animatedStyle?: StyleProps;
   layout?:
     | BaseAnimationBuilder
-    | LayoutAnimationFunction
+    | ILayoutAnimationBuilder
     | typeof BaseAnimationBuilder;
   entering?:
     | BaseAnimationBuilder
@@ -167,6 +190,7 @@ export default function createAnimatedComponent(
   > {
     _invokeAnimatedPropsCallbackOnMount = false;
     _styles: StyleProps[] | null = null;
+    _animatedProps?: Partial<AnimatedComponentProps<AnimatedProps>>;
     _viewTag = -1;
     _isFirstRender = true;
     animatedStyle: { value: StyleProps } = { value: {} };
@@ -255,9 +279,7 @@ export default function createAnimatedComponent(
         }
       } else if (this._viewTag !== -1 && this._styles !== null) {
         for (const style of this._styles) {
-          if (style?.viewDescriptors) {
-            style.viewDescriptors.remove(this._viewTag);
-          }
+          style.viewDescriptors.remove(this._viewTag);
         }
         if (this.props.animatedProps?.viewDescriptors) {
           this.props.animatedProps.viewDescriptors.remove(this._viewTag);
@@ -387,8 +409,15 @@ export default function createAnimatedComponent(
     }
 
     _attachAnimatedStyles() {
-      const styles = flattenArray<StyleProps>(this.props.style ?? []);
+      const styles = this.props.style
+        ? onlyAnimatedStyles(flattenArray<StyleProps>(this.props.style))
+        : [];
+      const prevStyles = this._styles;
       this._styles = styles;
+
+      const prevAnimatedProps = this._animatedProps;
+      this._animatedProps = this.props.animatedProps;
+
       let viewTag: number | null;
       let viewName: string | null;
       if (Platform.OS === 'web') {
@@ -410,34 +439,60 @@ export default function createAnimatedComponent(
          */
         viewName = hostInstance?.viewConfig?.uiViewClassName;
         // update UI props whitelist for this view
-        if (
-          hostInstance &&
-          this._hasReanimated2Props(styles) &&
-          hostInstance.viewConfig
-        ) {
+        const hasReanimated2Props =
+          this.props.animatedProps?.viewDescriptors || styles.length;
+        if (hasReanimated2Props && hostInstance?.viewConfig) {
           adaptViewConfig(hostInstance.viewConfig);
         }
       }
       this._viewTag = viewTag as number;
 
-      styles.forEach((style) => {
-        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.
-             * We can't update props object directly because TestObject contains a copy of props - look at render function:
-             * const props = this._filterNonAnimatedProps(this.props);
-             */
-            this.animatedStyle.value = {
-              ...this.animatedStyle.value,
-              ...style.initial.value,
-            };
-            style.animatedStyle.current = this.animatedStyle;
+      // remove old styles
+      if (prevStyles) {
+        // in most of the cases, views have only a single animated style and it remains unchanged
+        const hasOneSameStyle =
+          styles.length === 1 &&
+          prevStyles.length === 1 &&
+          isSameAnimatedStyle(styles[0], prevStyles[0]);
+
+        if (!hasOneSameStyle) {
+          // otherwise, remove each style that is not present in new styles
+          for (const prevStyle of prevStyles) {
+            const isPresent = styles.some((style) =>
+              isSameAnimatedStyle(style, prevStyle)
+            );
+            if (!isPresent) {
+              prevStyle.viewDescriptors.remove(viewTag);
+            }
           }
         }
+      }
+
+      styles.forEach((style) => {
+        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.
+           * We can't update props object directly because TestObject contains a copy of props - look at render function:
+           * const props = this._filterNonAnimatedProps(this.props);
+           */
+          this.animatedStyle.value = {
+            ...this.animatedStyle.value,
+            ...style.initial.value,
+          };
+          style.animatedStyle.current = this.animatedStyle;
+        }
       });
+
+      // detach old animatedProps
+      if (
+        prevAnimatedProps &&
+        !isSameAnimatedProps(prevAnimatedProps, this.props.animatedProps)
+      ) {
+        prevAnimatedProps.viewDescriptors!.remove(viewTag as number);
+      }
+
       // attach animatedProps property
       if (this.props.animatedProps?.viewDescriptors) {
         this.props.animatedProps.viewDescriptors.add({
@@ -449,21 +504,6 @@ export default function createAnimatedComponent(
       }
     }
 
-    _hasReanimated2Props(flattenStyles: StyleProps[]) {
-      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('viewDescriptors')) {
-            return true;
-          }
-        }
-      }
-      return false;
-    }
-
     _detachPropUpdater() {
       const viewTag = findNodeHandle(this);
       NODE_MAPPING.delete(viewTag);
@@ -496,6 +536,9 @@ export default function createAnimatedComponent(
           (this.props.layout || this.props.entering || this.props.exiting) &&
           tag != null
         ) {
+          if (!shouldBeUseWeb()) {
+            enableLayoutAnimations(true, false);
+          }
           let layout = this.props.layout ? this.props.layout : DefaultLayout;
           let entering = this.props.entering
             ? this.props.entering

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

@@ -5,7 +5,7 @@ import renderer from 'react-test-renderer';
 
 jest.mock('../../ReanimatedEventEmitter');
 jest.mock('../../ReanimatedModule');
-jest.mock('../../reanimated2/NativeReanimated');
+jest.mock('../../reanimated2/NativeReanimated/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', () => {

package/src/reanimated2/NativeMethods.ts

@@ -1,4 +1,6 @@
-/* global _WORKLET _measure _scrollTo */
+/* global _WORKLET _measure _scrollTo _setGestureState */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import { Component } from 'react';
 import { findNodeHandle } from 'react-native';
 import { RefObjectFunction } from './hook/useAnimatedRef';
@@ -47,3 +49,13 @@ export function scrollTo(
   const viewTag = animatedRef();
   _scrollTo(viewTag, x, y, animated);
 }
+
+export function setGestureState(handlerTag: number, newState: number): void {
+  'worklet';
+  if (!_WORKLET && !isChromeDebugger()) {
+    console.warn(
+      '[Reanimated] You can not use setGestureState in non-worklet function.'
+    );
+  }
+  _setGestureState(handlerTag, newState);
+}

package/src/reanimated2/NativeReanimated/NativeReanimated.ts

@@ -65,4 +65,8 @@ export class NativeReanimated {
   ): Promise<T> {
     return InnerNativeModule.getViewProp(viewTag, propName, callback);
   }
+
+  enableLayoutAnimations(flag: boolean): void {
+    InnerNativeModule.enableLayoutAnimations(flag);
+  }
 }

package/src/reanimated2/UpdateProps.ts

@@ -26,7 +26,7 @@ export const colorProps = [
   'overlayColor',
 ];
 
-const ColorProperties = !isConfigured() ? [] : makeShareable(colorProps);
+export const ColorProperties = !isConfigured() ? [] : makeShareable(colorProps);
 
 let updatePropsByPlatform;
 if (shouldBeUseWeb()) {

package/src/reanimated2/ViewDescriptorsSet.ts

@@ -2,6 +2,7 @@ import { useRef } from 'react';
 import { makeMutable } from './core';
 import { SharedValue } from './commonTypes';
 import { Descriptor } from './hook/commonTypes';
+import { Platform } from 'react-native';
 
 export interface ViewRefSet<T> {
   items: Set<T>;
@@ -23,6 +24,9 @@ export interface ViewDescriptorsSet {
   ) => void;
 }
 
+const scheduleUpdates =
+  Platform.OS === 'web' ? requestAnimationFrame : setImmediate;
+
 export function makeViewDescriptorsSet(): ViewDescriptorsSet {
   const ref = useRef<ViewDescriptorsSet | null>(null);
   if (ref.current === null) {
@@ -44,7 +48,7 @@ export function makeViewDescriptorsSet(): ViewDescriptorsSet {
         if (!data.waitForInsertSync) {
           data.waitForInsertSync = true;
 
-          setImmediate(() => {
+          scheduleUpdates(() => {
             data.sharableViewDescriptors.value = data.items;
             data.waitForInsertSync = false;
           });
@@ -57,7 +61,7 @@ export function makeViewDescriptorsSet(): ViewDescriptorsSet {
         if (!data.waitForRemoveSync) {
           data.waitForRemoveSync = true;
 
-          setImmediate(() => {
+          scheduleUpdates(() => {
             const items = [];
             for (const item of data.items) {
               if (data.batchToRemove.has(item.tag)) {

package/src/reanimated2/animation/styleAnimation.ts

@@ -14,6 +14,8 @@ import {
   StyleProps,
 } from '../commonTypes';
 import { withTiming } from './timing';
+import { ColorProperties } from '../UpdateProps';
+import { processColor } from '../Colors';
 
 export interface StyleLayoutAnimation extends HigherOrderAnimation {
   current: StyleProps;
@@ -134,6 +136,13 @@ export function withStyleAnimation(
           } else {
             stillGoing = true;
           }
+
+          if (ColorProperties.includes(currentEntry.path[0] as string)) {
+            currentStyleAnimation.current = processColor(
+              currentStyleAnimation.current
+            ) as number;
+          }
+
           setPath(
             animation.current,
             currentEntry.path,

package/src/reanimated2/component/FlatList.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { FlatList, FlatListProps, LayoutChangeEvent } from 'react-native';
+import WrappedComponents from './WrappedComponents';
+import createAnimatedComponent from '../../createAnimatedComponent';
+import { ILayoutAnimationBuilder } from '../layoutReanimation/animationBuilder/commonTypes';
+
+const AnimatedFlatList = createAnimatedComponent(FlatList as any) as any;
+
+const createCellRenderer = (itemLayoutAnimation?: ILayoutAnimationBuilder) => {
+  const cellRenderer: React.FC<{
+    onLayout: (event: LayoutChangeEvent) => void;
+  }> = (props) => {
+    return (
+      <WrappedComponents.View
+        layout={itemLayoutAnimation}
+        onLayout={props.onLayout}>
+        {props.children}
+      </WrappedComponents.View>
+    );
+  };
+
+  return cellRenderer;
+};
+
+interface ReanimatedFlatlistProps<ItemT> extends FlatListProps<ItemT> {
+  itemLayoutAnimation?: ILayoutAnimationBuilder;
+}
+
+type ReanimatedFlatListFC<T = any> = React.FC<ReanimatedFlatlistProps<T>>;
+
+const ReanimatedFlatlist: ReanimatedFlatListFC = ({
+  itemLayoutAnimation,
+  ...restProps
+}) => {
+  const cellRenderer = React.useMemo(
+    () => createCellRenderer(itemLayoutAnimation),
+    []
+  );
+  return (
+    <AnimatedFlatList {...restProps} CellRendererComponent={cellRenderer} />
+  );
+};
+
+export default ReanimatedFlatlist;

package/src/reanimated2/component/WrappedComponents.ts

@@ -0,0 +1,11 @@
+import { Image, ScrollView, Text, View } from 'react-native';
+import createAnimatedComponent from '../../createAnimatedComponent';
+
+const WrappedComponents = {
+  View: createAnimatedComponent(View),
+  Text: createAnimatedComponent(Text as any),
+  Image: createAnimatedComponent(Image as any),
+  ScrollView: createAnimatedComponent(ScrollView),
+};
+
+export default WrappedComponents;

package/src/reanimated2/component/index.ts

@@ -0,0 +1,9 @@
+import ReanimatedFlatlist from './FlatList';
+import WrappedComponents from './WrappedComponents';
+
+const ReanimatedComponents = {
+  ...WrappedComponents,
+  FlatList: ReanimatedFlatlist,
+};
+
+export default ReanimatedComponents;

package/src/reanimated2/core.ts

@@ -1,7 +1,7 @@
 /* global _WORKLET _getCurrentTime _frameTimestamp _eventTimestamp, _setGlobalConsole */
 import NativeReanimatedModule from './NativeReanimated';
 import { Platform } from 'react-native';
-import { nativeShouldBeMock, shouldBeUseWeb } from './PlatformChecker';
+import { nativeShouldBeMock, shouldBeUseWeb, isWeb } from './PlatformChecker';
 import {
   BasicWorkletFunction,
   WorkletFunction,
@@ -371,8 +371,8 @@ if (!NativeReanimatedModule.useOnlyV1) {
       : (workletValueSetterJS as <T>(value: T) => void)
   );
 
-  const capturableConsole = console;
-  isConfigured() &&
+  if (!isWeb() && isConfigured()) {
+    const capturableConsole = console;
     runOnUI(() => {
       'worklet';
       const console = {
@@ -383,5 +383,40 @@ if (!NativeReanimatedModule.useOnlyV1) {
         info: runOnJS(capturableConsole.info),
       };
       _setGlobalConsole(console);
+      if (global.performance == null) {
+        global.performance = {
+          now: global._chronoNow,
+        };
+      }
     })();
+  }
+}
+
+type FeaturesConfig = {
+  enableLayoutAnimations: boolean;
+  setByUser: boolean;
+};
+
+let featuresConfig: FeaturesConfig = {
+  enableLayoutAnimations: false,
+  setByUser: false,
+};
+
+export function enableLayoutAnimations(
+  flag: boolean,
+  isCallByUser = true
+): void {
+  if (isCallByUser) {
+    featuresConfig = {
+      enableLayoutAnimations: flag,
+      setByUser: true,
+    };
+    NativeReanimatedModule.enableLayoutAnimations(flag);
+  } else if (
+    !featuresConfig.setByUser &&
+    featuresConfig.enableLayoutAnimations !== flag
+  ) {
+    featuresConfig.enableLayoutAnimations = flag;
+    NativeReanimatedModule.enableLayoutAnimations(flag);
+  }
 }

package/src/reanimated2/globals.d.ts

@@ -13,6 +13,7 @@ declare global {
     tag: number,
     flag: { value: boolean; _value: boolean }
   ) => void;
+  const _setGestureState: (handlerTag: number, newState: number) => void;
   const _updateProps: (
     tag: number,
     name: string,
@@ -25,16 +26,20 @@ declare global {
     y: number,
     animated: boolean
   ) => void;
+  const _chronoNow: () => number;
   namespace NodeJS {
     interface Global {
       __reanimatedWorkletInit: (worklet: WorkletFunction) => void;
       _setGlobalConsole: (console?: ReanimatedConsole) => void;
       _log: (s: string) => void;
+      _setGestureState: () => void;
       _WORKLET: boolean;
       __reanimatedModuleProxy: NativeReanimated;
       _frameTimestamp: number | null;
       _measure: () => MeasuredDimensions;
       _scrollTo: () => void;
+      _chronoNow: () => number;
+      performance: { now: () => number };
       LayoutAnimationRepository: {
         configs: Record<string, unknown>;
         registerConfig(tag: number, config: Record<string, unknown>): void;

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

@@ -98,4 +98,10 @@ export default class JSReanimated extends NativeReanimated {
   unregisterEventHandler(_: string): void {
     // noop
   }
+
+  enableLayoutAnimations() {
+    console.warn(
+      '[Reanimated] enableLayoutAnimations is not available for WEB yet'
+    );
+  }
 }

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

@@ -43,7 +43,9 @@ export default class Mapper<T> {
     const res: MutableValue<T>[] = [];
 
     function extractMutables(value: NestedObjectValues<MutableValue<T>>) {
-      if (value instanceof MutableValue) {
+      if (value == null) {
+        // return;
+      } else if (value instanceof MutableValue) {
         res.push(value);
       } else if (Array.isArray(value)) {
         value.forEach((v) => extractMutables(v));

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

@@ -36,6 +36,11 @@ if (shouldBeUseWeb()) {
       "[Reanimated] You can't use 'scrollTo' method with Chrome Debugger or with web version"
     );
   };
+  global._setGestureState = () => {
+    console.warn(
+      "[Reanimated] You can't use 'setGestureState' method with Chrome Debugger or with web version"
+    );
+  };
 }
 
 export const _updatePropsJS = (

package/src/reanimated2/layoutReanimation/LayoutAnimationRepository.ts

@@ -1,6 +1,8 @@
 /* global _stopObservingProgress, _startObservingProgress */
 import { runOnUI } from '../core';
 import { withStyleAnimation } from '../animation/styleAnimation';
+import { ColorProperties } from '../UpdateProps';
+import { processColor } from '../Colors';
 
 runOnUI(() => {
   'worklet';
@@ -36,13 +38,22 @@ runOnUI(() => {
         for (const key in layoutAnimation) {
           currentAnimation[key] = layoutAnimation[key];
         }
-        enteringAnimationForTag[tag] = null;
       }
 
       const sv: { value: boolean; _value: boolean } = configs[tag].sv;
       _stopObservingProgress(tag, false);
       _startObservingProgress(tag, sv);
-      sv._value = Object.assign({}, sv._value, style.initialValues);
+
+      const backupColor: Record<string, string> = {};
+      for (const key in style.initialValues) {
+        if (ColorProperties.includes(key)) {
+          const value = style.initialValues[key];
+          backupColor[key] = value;
+          style.initialValues[key] = processColor(value);
+        }
+      }
+
+      sv.value = Object.assign({}, sv._value, style.initialValues);
       _stopObservingProgress(tag, false);
       const animation = withStyleAnimation(currentAnimation);
 
@@ -51,10 +62,12 @@ runOnUI(() => {
           _stopObservingProgress(tag, finished);
         }
         style.callback && style.callback(finished);
-        if (type === 'entering') {
-          enteringAnimationForTag[tag] = null;
-        }
       };
+
+      if (backupColor) {
+        configs[tag].sv._value = { ...configs[tag].sv.value, ...backupColor };
+      }
+
       configs[tag].sv.value = animation;
       _startObservingProgress(tag, sv);
     },

package/src/reanimated2/layoutReanimation/animationBuilder/commonTypes.ts

@@ -14,32 +14,43 @@ export type LayoutAnimation = {
 
 export type AnimationFunction = (a?: any, b?: any, c?: any) => any; // this is just a temporary mock
 
-export interface EntryExitAnimationsValues {
-  originX: number;
-  originY: number;
-  width: number;
-  height: number;
-  globalOriginX: number;
-  globalOriginY: number;
+export interface EntryAnimationsValues {
+  targetOriginX: number;
+  targetOriginY: number;
+  targetWidth: number;
+  targetHeight: number;
+  targetGlobalOriginX: number;
+  targetGlobalOriginY: number;
+}
+
+export interface ExitAnimationsValues {
+  currentOriginX: number;
+  currentOriginY: number;
+  currentWidth: number;
+  currentHeight: number;
+  currentGlobalOriginX: number;
+  currentGlobalOriginY: number;
 }
 
 export type EntryExitAnimationFunction = (
-  targetValues: EntryExitAnimationsValues
+  targetValues: EntryAnimationsValues | ExitAnimationsValues
 ) => LayoutAnimation;
 
+export type AnimationConfigFunction<T> = (targetValues: T) => LayoutAnimation;
+
 export interface LayoutAnimationsValues {
-  originX: number;
-  originY: number;
-  width: number;
-  height: number;
-  globalOriginX: number;
-  globalOriginY: number;
-  boriginX: number;
-  boriginY: number;
-  bwidth: number;
-  bheight: number;
-  bglobalOriginX: number;
-  bglobalOriginY: number;
+  currentOriginX: number;
+  currentOriginY: number;
+  currentWidth: number;
+  currentHeight: number;
+  currentGlobalOriginX: number;
+  currentGlobalOriginY: number;
+  targetOriginX: number;
+  targetOriginY: number;
+  targetWidth: number;
+  targetHeight: number;
+  targetGlobalOriginX: number;
+  targetGlobalOriginY: number;
   windowWidth: number;
   windowHeight: number;
 }
@@ -76,3 +87,11 @@ export type LayoutAnimationAndConfig = [
 export interface IEntryExitAnimationBuilder {
   build: () => EntryExitAnimationFunction;
 }
+
+export interface IEntryAnimationBuilder {
+  build: () => AnimationConfigFunction<EntryAnimationsValues>;
+}
+
+export interface IExitAnimationBuilder {
+  build: () => AnimationConfigFunction<ExitAnimationsValues>;
+}

package/src/reanimated2/layoutReanimation/animationBuilder/index.ts

@@ -4,8 +4,12 @@ export { Keyframe } from './Keyframe';
 export {
   LayoutAnimation,
   AnimationFunction,
-  EntryExitAnimationsValues,
+  EntryAnimationsValues,
+  ExitAnimationsValues,
   EntryExitAnimationFunction,
+  AnimationConfigFunction,
+  IEntryAnimationBuilder,
+  IExitAnimationBuilder,
   LayoutAnimationsValues,
   LayoutAnimationFunction,
   ILayoutAnimationBuilder,