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

package/lib/{reanimated1 → 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/lib/{reanimated2 → src/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 → src/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 → src/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 → src/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 → src/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/src/reanimated2/component/FlatList.js

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { FlatList } from 'react-native';
+import WrappedComponents from './WrappedComponents';
+import createAnimatedComponent from '../../createAnimatedComponent';
+const AnimatedFlatList = createAnimatedComponent(FlatList);
+const createCellRenderer = (itemLayoutAnimation) => {
+    const cellRenderer = (props) => {
+        return (<WrappedComponents.View layout={itemLayoutAnimation} onLayout={props.onLayout}>
+        {props.children}
+      </WrappedComponents.View>);
+    };
+    return cellRenderer;
+};
+const ReanimatedFlatlist = (_a) => {
+    var { itemLayoutAnimation } = _a, restProps = __rest(_a, ["itemLayoutAnimation"]);
+    const cellRenderer = React.useMemo(() => createCellRenderer(itemLayoutAnimation), []);
+    return (<AnimatedFlatList {...restProps} CellRendererComponent={cellRenderer}/>);
+};
+export default ReanimatedFlatlist;

package/lib/src/reanimated2/component/WrappedComponents.js

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

package/lib/src/reanimated2/component/index.js

@@ -0,0 +1,4 @@
+import ReanimatedFlatlist from './FlatList';
+import WrappedComponents from './WrappedComponents';
+const ReanimatedComponents = Object.assign(Object.assign({}, WrappedComponents), { FlatList: ReanimatedFlatlist });
+export default ReanimatedComponents;

package/lib/{reanimated2 → src/reanimated2}/core.js

@@ -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';
 global.__reanimatedWorkletInit = function (worklet) {
     worklet.__worklet = true;
 };
@@ -263,8 +263,8 @@ if (!NativeReanimatedModule.useOnlyV1) {
     NativeReanimatedModule.installCoreFunctions(NativeReanimatedModule.native
         ? workletValueSetter
         : workletValueSetterJS);
-    const capturableConsole = console;
-    isConfigured() &&
+    if (!isWeb() && isConfigured()) {
+        const capturableConsole = console;
         runOnUI(() => {
             'worklet';
             const console = {
@@ -275,5 +275,29 @@ if (!NativeReanimatedModule.useOnlyV1) {
                 info: runOnJS(capturableConsole.info),
             };
             _setGlobalConsole(console);
+            if (global.performance == null) {
+                global.performance = {
+                    now: global._chronoNow,
+                };
+            }
         })();
+    }
+}
+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 → 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/lib/{reanimated2 → src/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 → src/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 → src/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 → src/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/src/reanimated2/layoutReanimation/defaultAnimations/Default.js

@@ -0,0 +1,36 @@
+export const DefaultLayout = (values) => {
+    'worklet';
+    return {
+        initialValues: {
+            originX: values.targetOriginX,
+            originY: values.targetOriginY,
+            width: values.targetWidth,
+            height: values.targetHeight,
+        },
+        animations: {},
+    };
+};
+export const DefaultEntering = (values) => {
+    'worklet';
+    return {
+        initialValues: {
+            originX: values.targetOriginX,
+            originY: values.targetOriginY,
+            width: values.targetWidth,
+            height: values.targetHeight,
+        },
+        animations: {},
+    };
+};
+export const DefaultExiting = (values) => {
+    'worklet';
+    return {
+        initialValues: {
+            originX: values.currentOriginX,
+            originY: values.currentOriginY,
+            width: values.currentWidth,
+            height: values.currentHeight,
+        },
+        animations: {},
+    };
+};

package/lib/{reanimated2 → src/reanimated2}/layoutReanimation/defaultAnimations/Flip.js

@@ -14,7 +14,7 @@ export class FlipInXUp extends ComplexAnimationBuilder {
                         transform: [
                             { perspective: 500 },
                             { rotateX: '90deg' },
-                            { translateY: -targetValues.height },
+                            { translateY: -targetValues.targetHeight },
                         ],
                     },
                     animations: {
@@ -48,7 +48,7 @@ export class FlipInYLeft extends ComplexAnimationBuilder {
                         transform: [
                             { perspective: 500 },
                             { rotateY: '-90deg' },
-                            { translateX: -targetValues.width },
+                            { translateX: -targetValues.targetWidth },
                         ],
                     },
                     animations: {
@@ -82,7 +82,7 @@ export class FlipInXDown extends ComplexAnimationBuilder {
                         transform: [
                             { perspective: 500 },
                             { rotateX: '-90deg' },
-                            { translateY: targetValues.height },
+                            { translateY: targetValues.targetHeight },
                         ],
                     },
                     animations: {
@@ -116,7 +116,7 @@ export class FlipInYRight extends ComplexAnimationBuilder {
                         transform: [
                             { perspective: 500 },
                             { rotateY: '90deg' },
-                            { translateX: targetValues.width },
+                            { translateX: targetValues.targetWidth },
                         ],
                     },
                     animations: {
@@ -216,7 +216,7 @@ export class FlipOutXUp extends ComplexAnimationBuilder {
                             { perspective: delayFunction(delay, animation(500, config)) },
                             { rotateX: delayFunction(delay, animation('90deg', config)) },
                             {
-                                translateY: delayFunction(delay, animation(-targetValues.height, config)),
+                                translateY: delayFunction(delay, animation(-targetValues.currentHeight, config)),
                             },
                         ],
                     },
@@ -252,7 +252,7 @@ export class FlipOutYLeft extends ComplexAnimationBuilder {
                             { perspective: delayFunction(delay, animation(500, config)) },
                             { rotateY: delayFunction(delay, animation('-90deg', config)) },
                             {
-                                translateX: delayFunction(delay, animation(-targetValues.width, config)),
+                                translateX: delayFunction(delay, animation(-targetValues.currentWidth, config)),
                             },
                         ],
                     },
@@ -288,7 +288,7 @@ export class FlipOutXDown extends ComplexAnimationBuilder {
                             { perspective: delayFunction(delay, animation(500, config)) },
                             { rotateX: delayFunction(delay, animation('-90deg', config)) },
                             {
-                                translateY: delayFunction(delay, animation(targetValues.height, config)),
+                                translateY: delayFunction(delay, animation(targetValues.currentHeight, config)),
                             },
                         ],
                     },
@@ -324,7 +324,7 @@ export class FlipOutYRight extends ComplexAnimationBuilder {
                             { perspective: delayFunction(delay, animation(500, config)) },
                             { rotateY: delayFunction(delay, animation('90deg', config)) },
                             {
-                                translateX: delayFunction(delay, animation(targetValues.width, config)),
+                                translateX: delayFunction(delay, animation(targetValues.currentWidth, config)),
                             },
                         ],
                     },