react-native-reanimated 2.3.0-beta.2 → 2.3.1

package/lib/index.js

@@ -1,17 +1,15 @@
-import { Image, ScrollView, Text, View } from 'react-native';
+import { LogBox } from 'react-native';
 import createAnimatedComponent from './createAnimatedComponent';
 import {
   addWhitelistedNativeProps,
   addWhitelistedUIProps,
 } from './ConfigHelper';
 import * as reanimated1 from './reanimated1';
+import ReanimatedComponents from './reanimated2/component';
 
 const Animated = {
   // components
-  View: createAnimatedComponent(View),
-  Text: createAnimatedComponent(Text),
-  Image: createAnimatedComponent(Image),
-  ScrollView: createAnimatedComponent(ScrollView),
+  ...ReanimatedComponents,
   createAnimatedComponent,
   // configuration
   addWhitelistedNativeProps,
@@ -23,3 +21,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/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/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/PropAdapters.js

@@ -1,4 +1,3 @@
-// @ts-ignore JS file
 import { addWhitelistedNativeProps } from '../ConfigHelper';
 export function createAnimatedPropAdapter(adapter, nativeProps) {
     const nativePropsToAdd = {};

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/spring.js

@@ -73,6 +73,8 @@ export function withSpring(toValue, userConfig, callback) {
                     animation.velocity = 0;
                     animation.current = toValue;
                 }
+                // clear lastTimestamp to avoid using stale value by the next spring animation that starts after this one
+                animation.lastTimestamp = 0;
                 return true;
             }
             return false;

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) {
@@ -15,7 +17,6 @@ export function resolvePath(obj, path) {
         return undefined;
     }, obj);
 }
-// set value at given path
 export function setPath(obj, path, value) {
     'worklet';
     const keys = Array.isArray(path) ? path : [path];
@@ -80,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/animation/util.js

@@ -107,12 +107,35 @@ function decorateAnimation(animation) {
         animation.current = toRGBA(res);
         return finished;
     };
+    const arrayOnStart = (animation, value, timestamp, previousAnimation) => {
+        value.forEach((v, i) => {
+            animation[i] = Object.assign({}, animationCopy);
+            animation[i].current = v;
+            animation[i].toValue = animation.toValue[i];
+            animation[i].onStart(animation[i], v, timestamp, previousAnimation ? previousAnimation[i] : undefined);
+        });
+        animation.current = value;
+    };
+    const arrayOnFrame = (animation, timestamp) => {
+        let finished = true;
+        animation.current.forEach((v, i) => {
+            // @ts-ignore: disable-next-line
+            finished &= animation[i].onFrame(animation[i], timestamp);
+            animation.current[i] = animation[i].current;
+        });
+        return finished;
+    };
     animation.onStart = (animation, value, timestamp, previousAnimation) => {
         if (isColor(value)) {
             colorOnStart(animation, value, timestamp, previousAnimation);
             animation.onFrame = colorOnFrame;
             return;
         }
+        else if (Array.isArray(value)) {
+            arrayOnStart(animation, value, timestamp, previousAnimation);
+            animation.onFrame = arrayOnFrame;
+            return;
+        }
         else if (typeof value === 'string') {
             prefNumberSuffOnStart(animation, value, timestamp, previousAnimation);
             animation.onFrame = prefNumberSuffOnFrame;

package/lib/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/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/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/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;
 };
@@ -135,7 +135,9 @@ function workletValueSetter(value) {
         (value !== null &&
             typeof value === 'object' &&
             value.onFrame !== undefined)) {
-        const animation = typeof value === 'function' ? value() : value;
+        const animation = typeof value === 'function'
+            ? value()
+            : value;
         // prevent setting again to the same value
         // and triggering the mappers that treat this value as an input
         // this happens when the animation's target value(stored in animation.current until animation.onStart is called) is set to the same value as a current one(this._value)
@@ -196,7 +198,9 @@ function workletValueSetterJS(value) {
             typeof value === 'object' &&
             value.onFrame)) {
         // animated set
-        const animation = typeof value === 'function' ? value() : value;
+        const animation = typeof value === 'function'
+            ? value()
+            : value;
         let initializeAnimation = (timestamp) => {
             animation.onStart(animation, this.value, timestamp, previousAnimation);
         };
@@ -256,9 +260,11 @@ export function runOnJS(fun) {
     }
 }
 if (!NativeReanimatedModule.useOnlyV1) {
-    NativeReanimatedModule.installCoreFunctions(NativeReanimatedModule.native ? workletValueSetter : workletValueSetterJS);
-    const capturableConsole = console;
-    isConfigured() &&
+    NativeReanimatedModule.installCoreFunctions(NativeReanimatedModule.native
+        ? workletValueSetter
+        : workletValueSetterJS);
+    if (!isWeb() && isConfigured()) {
+        const capturableConsole = console;
         runOnUI(() => {
             'worklet';
             const console = {
@@ -269,5 +275,27 @@ if (!NativeReanimatedModule.useOnlyV1) {
                 info: runOnJS(capturableConsole.info),
             };
             _setGlobalConsole(console);
+            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/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,13 +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/js-reanimated/JSReanimated.js

@@ -50,6 +50,7 @@ export default class JSReanimated extends NativeReanimated {
         return value;
     }
     makeMutable(value) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         return new MutableValue(value, this._valueSetter);
     }
     makeRemote(object = {}) {
@@ -71,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

@@ -1,5 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import MutableValue from './MutableValue';
 export default class Mapper {
     constructor(module, mapper, inputs = [], outputs = []) {
@@ -23,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/MapperRegistry.js

@@ -1,5 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 export default class MapperRegistry {
     constructor(module) {
         this.sortedMappers = [];
@@ -78,7 +76,8 @@ export default class MapperRegistry {
         while (nodes.length)
             dfs(nodes[0]);
         const postArray = Object.keys(post).map((key) => {
-            return [key, post[key]];
+            const num = parseInt(key);
+            return [num, post[num]];
         });
         postArray.sort((a, b) => {
             return b[1] - a[1];
@@ -95,9 +94,7 @@ export default class MapperRegistry {
     }
 }
 class Node {
-    constructor(mapper, _parents = [], children = []) {
-        this.mapper = null;
-        this.children = [];
+    constructor(mapper, children = []) {
         this.mapper = mapper;
         this.children = children;
     }

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

@@ -1,5 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 export default class MutableValue {
     constructor(value, setter) {
         this._animation = null;

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

@@ -1,5 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import JSReanimated from './JSReanimated';
 import { shouldBeUseWeb } from '../PlatformChecker';
 const reanimatedJS = new JSReanimated();
@@ -22,25 +20,29 @@ 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 === null || viewRef === void 0 ? void 0 : viewRef._component) {
+    if (viewRef._component) {
+        const component = viewRef._component;
         const [rawStyles] = Object.keys(updates).reduce((acc, key) => {
             const value = updates[key];
             const index = typeof value === 'function' ? 1 : 0;
             acc[index][key] = value;
             return acc;
         }, [{}, {}]);
-        if (typeof viewRef._component.setNativeProps === 'function') {
-            setNativeProps(viewRef._component, rawStyles);
+        if (typeof component.setNativeProps === 'function') {
+            setNativeProps(component, rawStyles);
         }
-        else if (Object.keys(viewRef._component.props).length > 0) {
-            Object.keys(viewRef._component.props).forEach((key) => {
+        else if (Object.keys(component.props).length > 0) {
+            Object.keys(component.props).forEach((key) => {
                 if (!rawStyles[key]) {
                     return;
                 }
                 const dashedKey = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
-                viewRef._component._touchableNode.setAttribute(dashedKey, rawStyles[key]);
+                component._touchableNode.setAttribute(dashedKey, rawStyles[key]);
             });
         }
         else {

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/Default.js

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

package/lib/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)),
                             },
                         ],
                     },