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

package/src/createAnimatedComponent.tsx

@@ -17,13 +17,21 @@ 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,
@@ -88,6 +96,16 @@ 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 has = <K extends string>(
   key: K,
   x: unknown
@@ -167,6 +185,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 +274,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 +404,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 +434,57 @@ 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 && 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 +496,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 +528,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/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/core.ts

@@ -385,3 +385,32 @@ if (!NativeReanimatedModule.useOnlyV1) {
       _setGlobalConsole(console);
     })();
 }
+
+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,
@@ -30,6 +31,7 @@ declare global {
       __reanimatedWorkletInit: (worklet: WorkletFunction) => void;
       _setGlobalConsole: (console?: ReanimatedConsole) => void;
       _log: (s: string) => void;
+      _setGestureState: () => void;
       _WORKLET: boolean;
       __reanimatedModuleProxy: NativeReanimated;
       _frameTimestamp: number | null;

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/defaultAnimations/Slide.ts

@@ -145,7 +145,7 @@ export class SlideInUp
           originY: delayFunction(delay, animation(values.originY, config)),
         },
         initialValues: {
-          originY: height,
+          originY: -height,
         },
         callback: callback,
       };

package/src/reanimated2/layoutReanimation/defaultTransitions/EntryExitTransition.ts

@@ -122,7 +122,7 @@ export class EntryExitTransition
                             transformProp as keyof TransformProperty
                           ]
                         : 0,
-                      { duration: 0 }
+                      { duration: exitingDuration }
                     ),
                     value[transformProp as keyof TransformProperty]
                   )
@@ -183,19 +183,19 @@ export class EntryExitTransition
         animations: {
           originX: delayFunction(
             delay + exitingDuration,
-            withTiming(values.originX, { duration: 0 })
+            withTiming(values.originX, { duration: exitingDuration })
           ),
           originY: delayFunction(
             delay + exitingDuration,
-            withTiming(values.originY, { duration: 0 })
+            withTiming(values.originY, { duration: exitingDuration })
           ),
           width: delayFunction(
             delay + exitingDuration,
-            withTiming(values.width, { duration: 0 })
+            withTiming(values.width, { duration: exitingDuration })
           ),
           height: delayFunction(
             delay + exitingDuration,
-            withTiming(values.height, { duration: 0 })
+            withTiming(values.height, { duration: exitingDuration })
           ),
           ...animations,
         },