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

package/lib/Animated.js

@@ -1,4 +1,4 @@
-import { Image, ScrollView, Text, View } from 'react-native';
+import { Image, ScrollView, Text, View, LogBox } from 'react-native';
 import createAnimatedComponent from './createAnimatedComponent';
 import {
   addWhitelistedNativeProps,
@@ -23,3 +23,11 @@ const Animated = {
 export * from './reanimated2';
 export * from './reanimated1';
 export default Animated;
+
+// I think we can ignore this message as long as Gesture Handler doesn't
+// try to load the Reanimated module. I figured it should be here instead of
+// RNGH because this prevents the message from being displayed for all
+// versions of RNGH.
+LogBox.ignoreLogs([
+  'RCTBridge required dispatch_sync to load RNGestureHandlerModule. This may lead to deadlocks',
+]);

package/lib/createAnimatedComponent.js

@@ -15,9 +15,9 @@ 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';
 const NODE_MAPPING = new Map();
 function listener(data) {
@@ -58,6 +58,14 @@ function flattenArray(array) {
     _flattenArray(array);
     return resultArr;
 }
+function onlyAnimatedStyles(styles) {
+    return styles.filter((style) => style === null || style === void 0 ? void 0 : style.viewDescriptors);
+}
+function isSameAnimatedStyle(style1, style2) {
+    // We cannot use equality check to compare useAnimatedStyle outputs directly.
+    // Instead, we can compare its viewsRefs.
+    return style1.viewsRef === style2.viewsRef;
+}
 const has = (key, x) => {
     if (typeof x === 'function' || typeof x === 'object') {
         if (x === null || x === undefined) {
@@ -111,6 +119,9 @@ export default function createAnimatedComponent(Component, options) {
                     const tag = findNodeHandle(ref);
                     if ((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
@@ -213,9 +224,7 @@ export default function createAnimatedComponent(Component, options) {
             }
             else if (this._viewTag !== -1 && this._styles !== null) {
                 for (const style of this._styles) {
-                    if (style === null || style === void 0 ? void 0 : style.viewDescriptors) {
-                        style.viewDescriptors.remove(this._viewTag);
-                    }
+                    style.viewDescriptors.remove(this._viewTag);
                 }
                 if ((_a = this.props.animatedProps) === null || _a === void 0 ? void 0 : _a.viewDescriptors) {
                     this.props.animatedProps.viewDescriptors.remove(this._viewTag);
@@ -309,8 +318,13 @@ export default function createAnimatedComponent(Component, options) {
         }
         _attachAnimatedStyles() {
             var _a, _b, _c;
-            const styles = flattenArray((_a = this.props.style) !== null && _a !== void 0 ? _a : []);
+            const styles = this.props.style
+                ? onlyAnimatedStyles(flattenArray(this.props.style))
+                : [];
+            const prevStyles = this._styles;
             this._styles = styles;
+            const prevAnimatedProps = this._animatedProps;
+            this._animatedProps = this.props.animatedProps;
             let viewTag;
             let viewName;
             if (Platform.OS === 'web') {
@@ -329,30 +343,47 @@ export default function createAnimatedComponent(Component, options) {
                  * RN uses viewConfig for components for storing different properties of the component(example: https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/ScrollViewViewConfig.js#L16).
                  * The name we're looking for is in the field named uiViewClassName.
                  */
-                viewName = (_b = hostInstance === null || hostInstance === void 0 ? void 0 : hostInstance.viewConfig) === null || _b === void 0 ? void 0 : _b.uiViewClassName;
+                viewName = (_a = hostInstance === null || hostInstance === void 0 ? void 0 : hostInstance.viewConfig) === null || _a === void 0 ? void 0 : _a.uiViewClassName;
                 // update UI props whitelist for this view
-                if (hostInstance &&
-                    this._hasReanimated2Props(styles) &&
-                    hostInstance.viewConfig) {
+                const hasReanimated2Props = ((_b = this.props.animatedProps) === null || _b === void 0 ? void 0 : _b.viewDescriptors) || styles.length;
+                if (hasReanimated2Props && (hostInstance === null || hostInstance === void 0 ? void 0 : hostInstance.viewConfig)) {
                     adaptViewConfig(hostInstance.viewConfig);
                 }
             }
             this._viewTag = viewTag;
-            styles.forEach((style) => {
-                if (style === null || style === void 0 ? void 0 : 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 = Object.assign(Object.assign({}, 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 = Object.assign(Object.assign({}, this.animatedStyle.value), style.initial.value);
+                    style.animatedStyle.current = this.animatedStyle;
+                }
             });
+            // detach old animatedProps
+            if (prevAnimatedProps && prevAnimatedProps !== this.props.animatedProps) {
+                prevAnimatedProps.viewDescriptors.remove(viewTag);
+            }
             // attach animatedProps property
             if ((_c = this.props.animatedProps) === null || _c === void 0 ? void 0 : _c.viewDescriptors) {
                 this.props.animatedProps.viewDescriptors.add({
@@ -363,21 +394,6 @@ export default function createAnimatedComponent(Component, options) {
                 });
             }
         }
-        _hasReanimated2Props(flattenStyles) {
-            var _a;
-            if ((_a = this.props.animatedProps) === null || _a === void 0 ? void 0 : _a.viewDescriptors) {
-                return true;
-            }
-            if (this.props.style) {
-                for (const style of flattenStyles) {
-                    // eslint-disable-next-line no-prototype-builtins
-                    if (style === null || style === void 0 ? void 0 : style.hasOwnProperty('viewDescriptors')) {
-                        return true;
-                    }
-                }
-            }
-            return false;
-        }
         _detachPropUpdater() {
             const viewTag = findNodeHandle(this);
             NODE_MAPPING.delete(viewTag);

package/lib/index.js

@@ -1,4 +1,4 @@
-import { Image, ScrollView, Text, View } from 'react-native';
+import { Image, ScrollView, Text, View, LogBox } from 'react-native';
 import createAnimatedComponent from './createAnimatedComponent';
 import {
   addWhitelistedNativeProps,
@@ -23,3 +23,11 @@ const Animated = {
 export * from './reanimated2';
 export * from './reanimated1';
 export default Animated;
+
+// I think we can ignore this message as long as Gesture Handler doesn't
+// try to load the Reanimated module. I figured it should be here instead of
+// RNGH because this prevents the message from being displayed for all
+// versions of RNGH.
+LogBox.ignoreLogs([
+  'RCTBridge required dispatch_sync to load RNGestureHandlerModule. This may lead to deadlocks',
+]);

package/lib/reanimated2/NativeMethods.js

@@ -23,3 +23,10 @@ export function scrollTo(animatedRef, x, y, animated) {
     const viewTag = animatedRef();
     _scrollTo(viewTag, x, y, animated);
 }
+export function setGestureState(handlerTag, newState) {
+    'worklet';
+    if (!_WORKLET && !isChromeDebugger()) {
+        console.warn('[Reanimated] You can not use setGestureState in non-worklet function.');
+    }
+    _setGestureState(handlerTag, newState);
+}

package/lib/reanimated2/NativeReanimated/NativeReanimated.js

@@ -31,4 +31,7 @@ export class NativeReanimated {
     getViewProp(viewTag, propName, callback) {
         return InnerNativeModule.getViewProp(viewTag, propName, callback);
     }
+    enableLayoutAnimations(flag) {
+        InnerNativeModule.enableLayoutAnimations(flag);
+    }
 }

package/lib/reanimated2/UpdateProps.js

@@ -19,7 +19,7 @@ export const colorProps = [
     'textShadowColor',
     'overlayColor',
 ];
-const ColorProperties = !isConfigured() ? [] : makeShareable(colorProps);
+export const ColorProperties = !isConfigured() ? [] : makeShareable(colorProps);
 let updatePropsByPlatform;
 if (shouldBeUseWeb()) {
     updatePropsByPlatform = (_, updates, maybeViewRef) => {

package/lib/reanimated2/ViewDescriptorsSet.js

@@ -1,5 +1,7 @@
 import { useRef } from 'react';
 import { makeMutable } from './core';
+import { Platform } from 'react-native';
+const scheduleUpdates = Platform.OS === 'web' ? requestAnimationFrame : setImmediate;
 export function makeViewDescriptorsSet() {
     const ref = useRef(null);
     if (ref.current === null) {
@@ -18,7 +20,7 @@ export function makeViewDescriptorsSet() {
                 data.items.push(item);
                 if (!data.waitForInsertSync) {
                     data.waitForInsertSync = true;
-                    setImmediate(() => {
+                    scheduleUpdates(() => {
                         data.sharableViewDescriptors.value = data.items;
                         data.waitForInsertSync = false;
                     });
@@ -28,7 +30,7 @@ export function makeViewDescriptorsSet() {
                 data.batchToRemove.add(viewTag);
                 if (!data.waitForRemoveSync) {
                     data.waitForRemoveSync = true;
-                    setImmediate(() => {
+                    scheduleUpdates(() => {
                         const items = [];
                         for (const item of data.items) {
                             if (data.batchToRemove.has(item.tag)) {

package/lib/reanimated2/animation/styleAnimation.js

@@ -1,5 +1,7 @@
 import { defineAnimation } from './util';
 import { withTiming } from './timing';
+import { ColorProperties } from '../UpdateProps';
+import { processColor } from '../Colors';
 // resolves path to value for nested objects
 // if path cannot be resolved returns undefined
 export function resolvePath(obj, path) {
@@ -79,6 +81,9 @@ export function withStyleAnimation(styleAnimations) {
                     else {
                         stillGoing = true;
                     }
+                    if (ColorProperties.includes(currentEntry.path[0])) {
+                        currentStyleAnimation.current = processColor(currentStyleAnimation.current);
+                    }
                     setPath(animation.current, currentEntry.path, currentStyleAnimation.current);
                 }
             }

package/lib/reanimated2/core.js

@@ -277,3 +277,21 @@ if (!NativeReanimatedModule.useOnlyV1) {
             _setGlobalConsole(console);
         })();
 }
+let featuresConfig = {
+    enableLayoutAnimations: false,
+    setByUser: false,
+};
+export function enableLayoutAnimations(flag, isCallByUser = true) {
+    if (isCallByUser) {
+        featuresConfig = {
+            enableLayoutAnimations: flag,
+            setByUser: true,
+        };
+        NativeReanimatedModule.enableLayoutAnimations(flag);
+    }
+    else if (!featuresConfig.setByUser &&
+        featuresConfig.enableLayoutAnimations !== flag) {
+        featuresConfig.enableLayoutAnimations = flag;
+        NativeReanimatedModule.enableLayoutAnimations(flag);
+    }
+}

package/lib/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/lib/reanimated2/js-reanimated/JSReanimated.js

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

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

@@ -21,7 +21,10 @@ export default class Mapper {
     extractMutablesFromArray(array) {
         const res = [];
         function extractMutables(value) {
-            if (value instanceof MutableValue) {
+            if (value == null) {
+                // return;
+            }
+            else if (value instanceof MutableValue) {
                 res.push(value);
             }
             else if (Array.isArray(value)) {

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

@@ -20,6 +20,9 @@ if (shouldBeUseWeb()) {
     global._scrollTo = () => {
         console.warn("[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 = (updates, viewRef) => {
     if (viewRef._component) {

package/lib/reanimated2/layoutReanimation/LayoutAnimationRepository.js

@@ -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';
     const configs = {};
@@ -34,12 +36,19 @@ runOnUI(() => {
                 for (const key in layoutAnimation) {
                     currentAnimation[key] = layoutAnimation[key];
                 }
-                enteringAnimationForTag[tag] = null;
             }
             const sv = configs[tag].sv;
             _stopObservingProgress(tag, false);
             _startObservingProgress(tag, sv);
-            sv._value = Object.assign({}, sv._value, style.initialValues);
+            const backupColor = {};
+            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);
             animation.callback = (finished) => {
@@ -47,10 +56,10 @@ runOnUI(() => {
                     _stopObservingProgress(tag, finished);
                 }
                 style.callback && style.callback(finished);
-                if (type === 'entering') {
-                    enteringAnimationForTag[tag] = null;
-                }
             };
+            if (backupColor) {
+                configs[tag].sv._value = Object.assign(Object.assign({}, configs[tag].sv.value), backupColor);
+            }
             configs[tag].sv.value = animation;
             _startObservingProgress(tag, sv);
         },

package/lib/reanimated2/layoutReanimation/defaultAnimations/Slide.js

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

package/lib/reanimated2/layoutReanimation/defaultTransitions/EntryExitTransition.js

@@ -60,7 +60,7 @@ export class EntryExitTransition extends BaseAnimationBuilder {
                                 (_a = animations.transform) === null || _a === void 0 ? void 0 : _a.push({
                                     [transformProp]: delayFunction(delay + exitingDuration, withSequence(withTiming(enteringValues.initialValues.transform
                                         ? enteringValues.initialValues.transform[index][transformProp]
-                                        : 0, { duration: 0 }), value[transformProp])),
+                                        : 0, { duration: exitingDuration }), value[transformProp])),
                                 });
                             }
                         });
@@ -97,7 +97,7 @@ export class EntryExitTransition extends BaseAnimationBuilder {
                 }));
                 return {
                     initialValues: Object.assign(Object.assign({}, exitingValues.initialValues), { originX: values.boriginX, originY: values.boriginY, width: values.bwidth, height: values.bheight, transform: mergedTransform }),
-                    animations: Object.assign({ originX: delayFunction(delay + exitingDuration, withTiming(values.originX, { duration: 0 })), originY: delayFunction(delay + exitingDuration, withTiming(values.originY, { duration: 0 })), width: delayFunction(delay + exitingDuration, withTiming(values.width, { duration: 0 })), height: delayFunction(delay + exitingDuration, withTiming(values.height, { duration: 0 })) }, animations),
+                    animations: Object.assign({ originX: delayFunction(delay + exitingDuration, withTiming(values.originX, { duration: exitingDuration })), originY: delayFunction(delay + exitingDuration, withTiming(values.originY, { duration: exitingDuration })), width: delayFunction(delay + exitingDuration, withTiming(values.width, { duration: exitingDuration })), height: delayFunction(delay + exitingDuration, withTiming(values.height, { duration: exitingDuration })) }, animations),
                     callback: callback,
                 };
             };

package/mock.js

@@ -86,7 +86,7 @@ function createTransitioningComponent(Component) {
     }
 
     render() {
-      return <Component {...this.props} />;
+      return React.createElement(Component, this.props);
     }
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.3.0-beta.3",
+  "version": "2.3.0-beta.4",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
@@ -115,7 +115,7 @@
     "lint-staged": "^11.2.0",
     "prettier": "^2.2.1",
     "react": "17.0.2",
-    "react-native": "0.66.0",
+    "react-native": "0.67.0-rc.3",
     "react-native-codegen": "^0.0.7",
     "react-native-gesture-handler": "^1.6.1",
     "react-test-renderer": "17.0.2",

package/plugin.js

@@ -69,6 +69,7 @@ const globals = new Set([
   'global',
   '_measure',
   '_scrollTo',
+  '_setGestureState',
   '_getCurrentTime',
   '_eventTimestamp',
   '_frameTimestamp',
@@ -145,16 +146,21 @@ const gestureHandlerGestureObjects = new Set([
   'LongPress',
   'ForceTouch',
   'Native',
+  'Custom',
   'Race',
   'Simultaneous',
   'Exclusive',
 ]);
 
-const gestureHandlerCallbackMethods = new Set([
-  'onBegan',
+const gestureHandlerBuilderMethods = new Set([
+  'onBegin',
   'onStart',
   'onEnd',
   'onUpdate',
+  'onTouchesDown',
+  'onTouchesMove',
+  'onTouchesUp',
+  'onTouchesCancelled',
 ]);
 
 class ClosureGenerator {
@@ -652,7 +658,7 @@ function isGestureObjectEventCallbackMethod(t, node) {
   return (
     t.isMemberExpression(node) &&
     t.isIdentifier(node.property) &&
-    gestureHandlerCallbackMethods.has(node.property.name) &&
+    gestureHandlerBuilderMethods.has(node.property.name) &&
     containsGestureObject(t, node.object)
   );
 }

package/react-native-reanimated.d.ts

@@ -1071,4 +1071,5 @@ declare module 'react-native-reanimated' {
   export const SpringUtils: typeof Animated.SpringUtils;
   export const useValue: typeof Animated.useValue;
   export const ReverseAnimation: typeof Animated.ReverseAnimation;
+  export function enableLayoutAnimations(flag: boolean): void;
 }

package/src/Animated.js

@@ -1,4 +1,4 @@
-import { Image, ScrollView, Text, View } from 'react-native';
+import { Image, ScrollView, Text, View, LogBox } from 'react-native';
 import createAnimatedComponent from './createAnimatedComponent';
 import {
   addWhitelistedNativeProps,
@@ -23,3 +23,11 @@ const Animated = {
 export * from './reanimated2';
 export * from './reanimated1';
 export default Animated;
+
+// I think we can ignore this message as long as Gesture Handler doesn't
+// try to load the Reanimated module. I figured it should be here instead of
+// RNGH because this prevents the message from being displayed for all
+// versions of RNGH.
+LogBox.ignoreLogs([
+  'RCTBridge required dispatch_sync to load RNGestureHandlerModule. This may lead to deadlocks',
+]);