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

package/lib/reanimated2/Easing.js

@@ -149,6 +149,10 @@ function bezier(x1, y1, x2, y2) {
         },
     };
 }
+function bezierFn(x1, y1, x2, y2) {
+    'worklet';
+    return Bezier(x1, y1, x2, y2);
+}
 /**
  * Runs an easing function forwards.
  */
@@ -194,6 +198,7 @@ const EasingObject = {
     back,
     bounce,
     bezier,
+    bezierFn,
     in: in_,
     out,
     inOut,

package/lib/reanimated2/NativeMethods.js

@@ -1,12 +1,21 @@
 import { findNodeHandle } from 'react-native';
-import { isChromeDebugger } from './PlatformChecker';
+import { shouldBeUseWeb } from './PlatformChecker';
 export function getTag(view) {
     return findNodeHandle(view);
 }
+const isNativeIndefined = shouldBeUseWeb();
 export function measure(animatedRef) {
     'worklet';
-    if (!_WORKLET && !isChromeDebugger()) {
-        throw new Error('(measure) method cannot be used on RN side!');
+    if (!_WORKLET || isNativeIndefined) {
+        console.warn('[reanimated.measure] method cannot be used for web or Chrome Debugger');
+        return {
+            x: NaN,
+            y: NaN,
+            width: NaN,
+            height: NaN,
+            pageX: NaN,
+            pageY: NaN,
+        };
     }
     const viewTag = animatedRef();
     const result = _measure(viewTag);
@@ -17,7 +26,7 @@ export function measure(animatedRef) {
 }
 export function scrollTo(animatedRef, x, y, animated) {
     'worklet';
-    if (!_WORKLET && !isChromeDebugger()) {
+    if (!_WORKLET || isNativeIndefined) {
         return;
     }
     const viewTag = animatedRef();
@@ -25,8 +34,9 @@ export function scrollTo(animatedRef, x, y, animated) {
 }
 export function setGestureState(handlerTag, newState) {
     'worklet';
-    if (!_WORKLET && !isChromeDebugger()) {
+    if (!_WORKLET || isNativeIndefined) {
         console.warn('[Reanimated] You can not use setGestureState in non-worklet function.');
+        return;
     }
     _setGestureState(handlerTag, newState);
 }

package/lib/reanimated2/NativeReanimated/index.js

@@ -1,9 +1,9 @@
 import reanimatedJS from '../js-reanimated';
-import { nativeShouldBeMock } from '../PlatformChecker';
+import { shouldBeUseWeb } from '../PlatformChecker';
 import { Platform } from 'react-native';
 import { NativeReanimated } from './NativeReanimated';
 let exportedModule;
-if (nativeShouldBeMock()) {
+if (shouldBeUseWeb()) {
     exportedModule = reanimatedJS;
 }
 else {

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;
 };
@@ -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,7 +275,13 @@ if (!NativeReanimatedModule.useOnlyV1) {
                 info: runOnJS(capturableConsole.info),
             };
             _setGlobalConsole(console);
+            if (global.performance == null) {
+                global.performance = {
+                    now: global._chronoNow,
+                };
+            }
         })();
+    }
 }
 let featuresConfig = {
     enableLayoutAnimations: false,

package/lib/reanimated2/globals.d.ts

@@ -26,6 +26,7 @@ declare global {
     y: number,
     animated: boolean
   ) => void;
+  const _chronoNow: () => number;
   namespace NodeJS {
     interface Global {
       __reanimatedWorkletInit: (worklet: WorkletFunction) => void;
@@ -37,6 +38,8 @@ declare global {
       _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/hook/useAnimatedGestureHandler.js

@@ -1,4 +1,3 @@
-import { isWeb } from '../PlatformChecker';
 import { useEvent, useHandler } from './Hooks';
 export var EventType;
 (function (EventType) {
@@ -43,7 +42,7 @@ export function useAnimatedGestureHandler(handlers, dependencies) {
             handlers.onFinish(event, context, event.state === EventType.CANCELLED || event.state === EventType.FAILED);
         }
     };
-    if (isWeb()) {
+    if (useWeb) {
         return handler;
     }
     return useEvent(handler, ['onGestureHandlerStateChange', 'onGestureHandlerEvent'], doDependenciesDiffer);

package/lib/reanimated2/hook/useAnimatedStyle.js

@@ -164,7 +164,11 @@ function styleUpdater(viewDescriptors, updater, state, maybeViewRef, animationsA
     else {
         state.isAnimationCancelled = true;
         state.animations = [];
-        updateProps(viewDescriptors, newValues, maybeViewRef);
+        const diff = styleDiff(oldValues, newValues);
+        state.last = Object.assign({}, oldValues, newValues);
+        if (diff) {
+            updateProps(viewDescriptors, newValues, maybeViewRef);
+        }
     }
 }
 function jestStyleUpdater(viewDescriptors, updater, state, maybeViewRef, animationsActive, animatedStyle, adapters = []) {
@@ -305,10 +309,10 @@ export function useAnimatedStyle(updater, dependencies, adapters) {
     const maybeViewRef = NativeReanimatedModule.native ? undefined : viewsRef;
     useEffect(() => {
         let fun;
-        let upadterFn = updater;
+        let updaterFn = updater;
         let optimalization = updater.__optimalization;
         if (adapters) {
-            upadterFn = () => {
+            updaterFn = () => {
                 'worklet';
                 const newValues = updater();
                 adaptersArray.forEach((adapter) => {
@@ -317,27 +321,40 @@ export function useAnimatedStyle(updater, dependencies, adapters) {
                 return newValues;
             };
         }
-        if (canApplyOptimalisation(upadterFn) && !shouldBeUseWeb()) {
-            if (hasColorProps(upadterFn())) {
-                upadterFn = () => {
+        if (canApplyOptimalisation(updaterFn) && !shouldBeUseWeb()) {
+            if (hasColorProps(updaterFn())) {
+                updaterFn = () => {
+                    'worklet';
+                    const newValues = updaterFn();
+                    const oldValues = remoteState.last;
+                    const diff = styleDiff(oldValues, newValues);
+                    remoteState.last = Object.assign({}, oldValues, newValues);
+                    parseColors(diff);
+                    return diff;
+                };
+            }
+            else {
+                updaterFn = () => {
                     'worklet';
-                    const style = upadterFn();
-                    parseColors(style);
-                    return style;
+                    const newValues = updaterFn();
+                    const oldValues = remoteState.last;
+                    const diff = styleDiff(oldValues, newValues);
+                    remoteState.last = Object.assign({}, oldValues, newValues);
+                    return diff;
                 };
             }
         }
         else if (!shouldBeUseWeb()) {
             optimalization = 0;
-            upadterFn = () => {
+            updaterFn = () => {
                 'worklet';
-                const style = upadterFn();
+                const style = updaterFn();
                 parseColors(style);
                 return style;
             };
         }
         if (typeof updater.__optimalization !== undefined) {
-            upadterFn.__optimalization = optimalization;
+            updaterFn.__optimalization = optimalization;
         }
         if (isJest()) {
             fun = () => {
@@ -348,10 +365,10 @@ export function useAnimatedStyle(updater, dependencies, adapters) {
         else {
             fun = () => {
                 'worklet';
-                styleUpdater(sharableViewDescriptors, upadterFn, remoteState, maybeViewRef, animationsActive);
+                styleUpdater(sharableViewDescriptors, updaterFn, remoteState, maybeViewRef, animationsActive);
             };
         }
-        const mapperId = startMapper(fun, inputs, [], upadterFn, 
+        const mapperId = startMapper(fun, inputs, [], updaterFn, 
         // TODO fix this
         sharableViewDescriptors);
         return () => {

package/lib/reanimated2/hook/utils.js

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { processColor } from '../Colors';
 import { makeRemote } from '../core';
-import { isWeb } from '../PlatformChecker';
+import { isWeb, isJest } from '../PlatformChecker';
 import { colorProps } from '../UpdateProps';
 import WorkletEventHandler from '../WorkletEventHandler';
 export function useEvent(handler, eventNames = [], rebuild = false) {
@@ -36,7 +36,7 @@ export function useHandler(handlers, dependencies) {
     dependencies = buildDependencies(dependencies, handlers);
     const doDependenciesDiffer = !areDependenciesEqual(dependencies, savedDependencies);
     initRef.current.savedDependencies = dependencies;
-    const useWeb = isWeb();
+    const useWeb = isWeb() || isJest();
     return { context, doDependenciesDiffer, useWeb };
 }
 // builds one big hash from multiple worklets' hashes
@@ -95,7 +95,12 @@ export function parseColors(updates) {
     'worklet';
     for (const key in updates) {
         if (colorProps.indexOf(key) !== -1) {
-            updates[key] = processColor(updates[key]);
+            // value could be an animation in which case processColor will recognize it and will return undefined
+            // -> in such a case we don't want to override style of that key
+            const processedColor = processColor(updates[key]);
+            if (processedColor !== undefined) {
+                updates[key] = processedColor;
+            }
         }
     }
 }
@@ -132,24 +137,22 @@ export function isAnimated(prop) {
 export function styleDiff(oldStyle, newStyle) {
     'worklet';
     const diff = {};
-    Object.keys(oldStyle).forEach((key) => {
+    for (const key in oldStyle) {
         if (newStyle[key] === undefined) {
             diff[key] = null;
         }
-    });
-    Object.keys(newStyle).forEach((key) => {
+    }
+    for (const key in newStyle) {
         const value = newStyle[key];
         const oldValue = oldStyle[key];
         if (isAnimated(value)) {
             // do nothing
-            return;
+            continue;
         }
-        if (oldValue !== value &&
-            JSON.stringify(oldValue) !== JSON.stringify(value)) {
-            // I'd use deep equal here but that'd take additional work and this was easier
+        if (oldValue !== value) {
             diff[key] = value;
         }
-    });
+    }
     return diff;
 }
 export function getStyleWithoutAnimations(newStyle) {

package/lib/reanimated2/index.js

@@ -2,9 +2,11 @@ export * from './core';
 export * from './hook';
 export * from './animation';
 export * from './interpolation';
+export * from './interpolateColor';
 export * from './Easing';
 export * from './NativeMethods';
 export * from './Colors';
 export * from './PropAdapters';
 export * from './layoutReanimation';
 export * from './utils';
+export * from './commonTypes';

package/lib/reanimated2/interpolateColor.js

@@ -0,0 +1,98 @@
+import { hsvToColor, RGBtoHSV, rgbaColor, processColor, red, green, blue, opacity, } from './Colors';
+import { makeMutable } from './core';
+import { interpolate } from './interpolation';
+// @ts-ignore JS file
+import { Extrapolate } from '../reanimated1/derived';
+import { useSharedValue } from './hook/useSharedValue';
+const interpolateColorsHSV = (value, inputRange, colors) => {
+    'worklet';
+    const h = interpolate(value, inputRange, colors.h, Extrapolate.CLAMP);
+    const s = interpolate(value, inputRange, colors.s, Extrapolate.CLAMP);
+    const v = interpolate(value, inputRange, colors.v, Extrapolate.CLAMP);
+    return hsvToColor(h, s, v);
+};
+const interpolateColorsRGB = (value, inputRange, colors) => {
+    'worklet';
+    const r = interpolate(value, inputRange, colors.r, Extrapolate.CLAMP);
+    const g = interpolate(value, inputRange, colors.g, Extrapolate.CLAMP);
+    const b = interpolate(value, inputRange, colors.b, Extrapolate.CLAMP);
+    const a = interpolate(value, inputRange, colors.a, Extrapolate.CLAMP);
+    return rgbaColor(r, g, b, a);
+};
+const getInterpolateRGB = (colors) => {
+    'worklet';
+    const r = [];
+    const g = [];
+    const b = [];
+    const a = [];
+    for (let i = 0; i < colors.length; ++i) {
+        const color = colors[i];
+        const proocessedColor = processColor(color);
+        // explicit check in case if processedColor is 0
+        if (proocessedColor !== null && proocessedColor !== undefined) {
+            r.push(red(proocessedColor));
+            g.push(green(proocessedColor));
+            b.push(blue(proocessedColor));
+            a.push(opacity(proocessedColor));
+        }
+    }
+    return { r, g, b, a };
+};
+const getInterpolateHSV = (colors) => {
+    'worklet';
+    const h = [];
+    const s = [];
+    const v = [];
+    for (let i = 0; i < colors.length; ++i) {
+        const color = colors[i];
+        const proocessedColor = RGBtoHSV(processColor(color));
+        if (proocessedColor) {
+            h.push(proocessedColor.h);
+            s.push(proocessedColor.s);
+            v.push(proocessedColor.v);
+        }
+    }
+    return { h, s, v };
+};
+export const interpolateColor = (value, inputRange, outputRange, colorSpace = 'RGB') => {
+    'worklet';
+    if (colorSpace === 'HSV') {
+        return interpolateColorsHSV(value, inputRange, getInterpolateHSV(outputRange));
+    }
+    else if (colorSpace === 'RGB') {
+        return interpolateColorsRGB(value, inputRange, getInterpolateRGB(outputRange));
+    }
+    throw new Error(`Invalid color space provided: ${colorSpace}. Supported values are: ['RGB', 'HSV']`);
+};
+export var ColorSpace;
+(function (ColorSpace) {
+    ColorSpace[ColorSpace["RGB"] = 0] = "RGB";
+    ColorSpace[ColorSpace["HSV"] = 1] = "HSV";
+})(ColorSpace || (ColorSpace = {}));
+export function useInterpolateConfig(inputRange, outputRange, colorSpace = ColorSpace.RGB) {
+    return useSharedValue({
+        inputRange,
+        outputRange,
+        colorSpace,
+        cache: makeMutable(null),
+    });
+}
+export const interpolateSharableColor = (value, interpolateConfig) => {
+    'worklet';
+    let colors = interpolateConfig.value.cache.value;
+    if (interpolateConfig.value.colorSpace === ColorSpace.RGB) {
+        if (!colors) {
+            colors = getInterpolateRGB(interpolateConfig.value.outputRange);
+            interpolateConfig.value.cache.value = colors;
+        }
+        return interpolateColorsRGB(value, interpolateConfig.value.inputRange, colors);
+    }
+    else if (interpolateConfig.value.colorSpace === ColorSpace.HSV) {
+        if (!colors) {
+            colors = getInterpolateHSV(interpolateConfig.value.outputRange);
+            interpolateConfig.value.cache.value = colors;
+        }
+        return interpolateColorsHSV(value, interpolateConfig.value.inputRange, colors);
+    }
+    throw new Error(`Invalid color space provided: ${interpolateConfig.value.colorSpace}. Supported values are: ['RGB', 'HSV']`);
+};

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

@@ -1,6 +1,6 @@
 import MapperRegistry from './MapperRegistry';
-import MutableValue from './MutableValue';
 import Mapper from './Mapper';
+import MutableValue from './MutableValue';
 import { NativeReanimated } from '../NativeReanimated/NativeReanimated';
 export default class JSReanimated extends NativeReanimated {
     constructor() {

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

@@ -0,0 +1 @@
+export {};

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