react-native-reanimated 2.3.3 → 2.5.0

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

@@ -66,7 +66,7 @@ function validateType(type) {
 }
 function internalInterpolate(x, narrowedInput, extrapolationConfig) {
     'worklet';
-    const { leftEdgeInput, rightEdgeInput, leftEdgeOutput, rightEdgeOutput, } = narrowedInput;
+    const { leftEdgeInput, rightEdgeInput, leftEdgeOutput, rightEdgeOutput } = narrowedInput;
     if (rightEdgeInput - leftEdgeInput === 0)
         return leftEdgeOutput;
     const progress = (x - leftEdgeInput) / (rightEdgeInput - leftEdgeInput);

package/lib/reanimated2/jestUtils.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
-const MockDate = require('mockdate');
+import { jestResetJsReanimatedModule } from './core';
 let config = {
     fps: 60,
 };
@@ -105,22 +105,26 @@ const compareStyle = (received, expectedStyle, config) => {
 };
 let frameTime = 1000 / config.fps;
 let requestAnimationFrameCopy;
+let currentTimestamp = 0;
 const requestAnimationFrame = (callback) => {
     setTimeout(callback, frameTime);
 };
 const beforeTest = () => {
+    jestResetJsReanimatedModule();
     requestAnimationFrameCopy = global.requestAnimationFrame;
     global.requestAnimationFrame = requestAnimationFrame;
-    MockDate.set(0);
+    global.ReanimatedDataMock = {
+        now: () => currentTimestamp,
+    };
+    currentTimestamp = 0;
     jest.useFakeTimers();
 };
 const afterTest = () => {
-    MockDate.reset();
     jest.useRealTimers();
     global.requestAnimationFrame = requestAnimationFrameCopy;
 };
 const tickTravel = () => {
-    MockDate.set(new Date(Date.now() + frameTime));
+    currentTimestamp += frameTime;
     jest.advanceTimersByTime(frameTime);
 };
 export const withReanimatedTimer = (animatonTest) => {
@@ -142,6 +146,7 @@ export const advanceAnimationByFrame = (count) => {
 };
 export const setUpTests = (userConfig = {}) => {
     const expect = require('expect');
+    require('setimmediate');
     frameTime = Math.round(1000 / config.fps);
     config = Object.assign(Object.assign({}, config), userConfig);
     expect.extend({

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

@@ -1,7 +1,8 @@
 import MapperRegistry from './MapperRegistry';
-import MutableValue from './MutableValue';
 import Mapper from './Mapper';
+import MutableValue from './MutableValue';
 import { NativeReanimated } from '../NativeReanimated/NativeReanimated';
+import { isJest } from '../PlatformChecker';
 export default class JSReanimated extends NativeReanimated {
     constructor() {
         super(false);
@@ -9,8 +10,8 @@ export default class JSReanimated extends NativeReanimated {
         this._renderRequested = false;
         this._mapperRegistry = new MapperRegistry(this);
         this._frames = [];
-        if (process.env.JEST_WORKER_ID) {
-            this.timeProvider = { now: () => Date.now() };
+        if (isJest()) {
+            this.timeProvider = { now: () => global.ReanimatedDataMock.now() };
         }
         else {
             this.timeProvider = { now: () => window.performance.now() };
@@ -75,4 +76,24 @@ export default class JSReanimated extends NativeReanimated {
     enableLayoutAnimations() {
         console.warn('[Reanimated] enableLayoutAnimations is not available for WEB yet');
     }
+    registerSensor() {
+        console.warn('[Reanimated] useAnimatedSensor is not available on web yet.');
+        return -1;
+    }
+    unregisterSensor() {
+        // noop
+    }
+    jestResetModule() {
+        if (isJest()) {
+            /**
+             * If someone used timers to stop animation before the end,
+             * then _renderRequested was set as true
+             * and any new update from another test wasn't applied.
+             */
+            this._renderRequested = false;
+        }
+        else {
+            throw Error('This method can be only use in Jest testing.');
+        }
+    }
 }

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

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

package/lib/reanimated2/layoutReanimation/animationBuilder/ComplexAnimationBuilder.js

@@ -73,6 +73,14 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
         this.restSpeedThresholdV = restSpeedThreshold;
         return this;
     }
+    static withInitialValues(values) {
+        const instance = this.createInstance();
+        return instance.withInitialValues(values);
+    }
+    withInitialValues(values) {
+        this.initialValues = values;
+        return this;
+    }
     getAnimationAndConfig() {
         const duration = this.durationV;
         const easing = this.easingV;

package/lib/reanimated2/layoutReanimation/animationBuilder/Keyframe.js

@@ -109,7 +109,8 @@ export class Keyframe {
             if (styleProp === 'transform') {
                 (_a = initialValues[styleProp]) === null || _a === void 0 ? void 0 : _a.forEach((transformStyle, index) => {
                     Object.keys(transformStyle).forEach((transformProp) => {
-                        parsedKeyframes[index.toString() + '_transform:' + transformProp] = [];
+                        parsedKeyframes[index.toString() + '_transform:' + transformProp] =
+                            [];
                     });
                 });
             }

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

@@ -1,8 +1,8 @@
 import { withSequence, withTiming } from '../../animation';
 import { Dimensions } from 'react-native';
-import { BaseAnimationBuilder } from '../animationBuilder/BaseAnimationBuilder';
+import { ComplexAnimationBuilder } from '../animationBuilder/ComplexAnimationBuilder';
 const { width, height } = Dimensions.get('window');
-export class BounceIn extends BaseAnimationBuilder {
+export class BounceIn extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
@@ -10,6 +10,7 @@ export class BounceIn extends BaseAnimationBuilder {
             const delay = this.getDelay();
             const duration = this.getDuration();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -20,9 +21,7 @@ export class BounceIn extends BaseAnimationBuilder {
                             },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ scale: 0 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ scale: 0 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -39,7 +38,7 @@ export class BounceIn extends BaseAnimationBuilder {
         return (_a = this.durationV) !== null && _a !== void 0 ? _a : 600;
     }
 }
-export class BounceInDown extends BaseAnimationBuilder {
+export class BounceInDown extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
@@ -47,6 +46,7 @@ export class BounceInDown extends BaseAnimationBuilder {
             const delay = this.getDelay();
             const duration = this.getDuration();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -57,13 +57,11 @@ export class BounceInDown extends BaseAnimationBuilder {
                             },
                         ],
                     },
-                    initialValues: {
-                        transform: [
+                    initialValues: Object.assign({ transform: [
                             {
                                 translateY: height,
                             },
-                        ],
-                    },
+                        ] }, initialValues),
                     callback: callback,
                 };
             };
@@ -80,7 +78,7 @@ export class BounceInDown extends BaseAnimationBuilder {
         return (_a = this.durationV) !== null && _a !== void 0 ? _a : 600;
     }
 }
-export class BounceInUp extends BaseAnimationBuilder {
+export class BounceInUp extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
@@ -88,6 +86,7 @@ export class BounceInUp extends BaseAnimationBuilder {
             const delay = this.getDelay();
             const duration = this.getDuration();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -98,9 +97,7 @@ export class BounceInUp extends BaseAnimationBuilder {
                             },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ translateY: -height }],
-                    },
+                    initialValues: Object.assign({ transform: [{ translateY: -height }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -117,7 +114,7 @@ export class BounceInUp extends BaseAnimationBuilder {
         return (_a = this.durationV) !== null && _a !== void 0 ? _a : 600;
     }
 }
-export class BounceInLeft extends BaseAnimationBuilder {
+export class BounceInLeft extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
@@ -125,6 +122,7 @@ export class BounceInLeft extends BaseAnimationBuilder {
             const delay = this.getDelay();
             const duration = this.getDuration();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -135,9 +133,7 @@ export class BounceInLeft extends BaseAnimationBuilder {
                             },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ translateX: -width }],
-                    },
+                    initialValues: Object.assign({ transform: [{ translateX: -width }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -154,7 +150,7 @@ export class BounceInLeft extends BaseAnimationBuilder {
         return (_a = this.durationV) !== null && _a !== void 0 ? _a : 600;
     }
 }
-export class BounceInRight extends BaseAnimationBuilder {
+export class BounceInRight extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
@@ -162,6 +158,7 @@ export class BounceInRight extends BaseAnimationBuilder {
             const delay = this.getDelay();
             const duration = this.getDuration();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -172,9 +169,7 @@ export class BounceInRight extends BaseAnimationBuilder {
                             },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ translateX: width }],
-                    },
+                    initialValues: Object.assign({ transform: [{ translateX: width }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -191,7 +186,7 @@ export class BounceInRight extends BaseAnimationBuilder {
         return (_a = this.durationV) !== null && _a !== void 0 ? _a : 600;
     }
 }
-export class BounceOut extends BaseAnimationBuilder {
+export class BounceOut extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
@@ -199,6 +194,7 @@ export class BounceOut extends BaseAnimationBuilder {
             const delay = this.getDelay();
             const duration = this.getDuration();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -209,9 +205,7 @@ export class BounceOut extends BaseAnimationBuilder {
                             },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ scale: 1 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ scale: 1 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -228,7 +222,7 @@ export class BounceOut extends BaseAnimationBuilder {
         return (_a = this.durationV) !== null && _a !== void 0 ? _a : 600;
     }
 }
-export class BounceOutDown extends BaseAnimationBuilder {
+export class BounceOutDown extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
@@ -236,6 +230,7 @@ export class BounceOutDown extends BaseAnimationBuilder {
             const delay = this.getDelay();
             const duration = this.getDuration();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -248,9 +243,7 @@ export class BounceOutDown extends BaseAnimationBuilder {
                             },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ translateY: 0 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ translateY: 0 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -267,7 +260,7 @@ export class BounceOutDown extends BaseAnimationBuilder {
         return (_a = this.durationV) !== null && _a !== void 0 ? _a : 600;
     }
 }
-export class BounceOutUp extends BaseAnimationBuilder {
+export class BounceOutUp extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
@@ -275,6 +268,7 @@ export class BounceOutUp extends BaseAnimationBuilder {
             const delay = this.getDelay();
             const duration = this.getDuration();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -287,9 +281,7 @@ export class BounceOutUp extends BaseAnimationBuilder {
                             },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ translateY: 0 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ translateY: 0 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -306,7 +298,7 @@ export class BounceOutUp extends BaseAnimationBuilder {
         return (_a = this.durationV) !== null && _a !== void 0 ? _a : 600;
     }
 }
-export class BounceOutLeft extends BaseAnimationBuilder {
+export class BounceOutLeft extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
@@ -314,6 +306,7 @@ export class BounceOutLeft extends BaseAnimationBuilder {
             const delay = this.getDelay();
             const duration = this.getDuration();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -326,9 +319,7 @@ export class BounceOutLeft extends BaseAnimationBuilder {
                             },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ translateX: 0 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ translateX: 0 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -345,7 +336,7 @@ export class BounceOutLeft extends BaseAnimationBuilder {
         return (_a = this.durationV) !== null && _a !== void 0 ? _a : 600;
     }
 }
-export class BounceOutRight extends BaseAnimationBuilder {
+export class BounceOutRight extends ComplexAnimationBuilder {
     constructor() {
         super(...arguments);
         this.build = () => {
@@ -353,6 +344,7 @@ export class BounceOutRight extends BaseAnimationBuilder {
             const delay = this.getDelay();
             const duration = this.getDuration();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -365,9 +357,7 @@ export class BounceOutRight extends BaseAnimationBuilder {
                             },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ translateX: 0 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ translateX: 0 }] }, initialValues),
                     callback: callback,
                 };
             };