react-native-reanimated 2.16.0 → 2.17.0

package/lib/reanimated2/interpolateColor.js

@@ -0,0 +1,157 @@
+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, options) => {
+    'worklet';
+    let h = 0;
+    const { useCorrectedHSVInterpolation = true } = options;
+    if (useCorrectedHSVInterpolation) {
+        // if the difference between hues in a range is > 180 deg
+        // then move the hue at the right end of the range +/- 360 deg
+        // and add the next point in the original place + 0.00001 with original hue
+        // to not break the next range
+        const correctedInputRange = [inputRange[0]];
+        const originalH = colors.h;
+        const correctedH = [originalH[0]];
+        for (let i = 1; i < originalH.length; ++i) {
+            const d = originalH[i] - originalH[i - 1];
+            if (originalH[i] > originalH[i - 1] && d > 0.5) {
+                correctedInputRange.push(inputRange[i]);
+                correctedInputRange.push(inputRange[i] + 0.00001);
+                correctedH.push(originalH[i] - 1);
+                correctedH.push(originalH[i]);
+            }
+            else if (originalH[i] < originalH[i - 1] && d < -0.5) {
+                correctedInputRange.push(inputRange[i]);
+                correctedInputRange.push(inputRange[i] + 0.00001);
+                correctedH.push(originalH[i] + 1);
+                correctedH.push(originalH[i]);
+            }
+            else {
+                correctedInputRange.push(inputRange[i]);
+                correctedH.push(originalH[i]);
+            }
+        }
+        h =
+            (interpolate(value, correctedInputRange, correctedH, Extrapolate.CLAMP) +
+                1) %
+                1;
+    }
+    else {
+        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);
+    const a = interpolate(value, inputRange, colors.a, Extrapolate.CLAMP);
+    return hsvToColor(h, s, v, a);
+};
+const toLinearSpace = (x, gamma) => {
+    'worklet';
+    return x.map((v) => Math.pow(v / 255, gamma));
+};
+const toGammaSpace = (x, gamma) => {
+    'worklet';
+    return Math.round(Math.pow(x, 1 / gamma) * 255);
+};
+const interpolateColorsRGB = (value, inputRange, colors, options) => {
+    'worklet';
+    const { gamma = 2.2 } = options;
+    let { r: outputR, g: outputG, b: outputB } = colors;
+    if (gamma !== 1) {
+        outputR = toLinearSpace(outputR, gamma);
+        outputG = toLinearSpace(outputG, gamma);
+        outputB = toLinearSpace(outputB, gamma);
+    }
+    const r = interpolate(value, inputRange, outputR, Extrapolate.CLAMP);
+    const g = interpolate(value, inputRange, outputG, Extrapolate.CLAMP);
+    const b = interpolate(value, inputRange, outputB, Extrapolate.CLAMP);
+    const a = interpolate(value, inputRange, colors.a, Extrapolate.CLAMP);
+    if (gamma === 1) {
+        return rgbaColor(r, g, b, a);
+    }
+    return rgbaColor(toGammaSpace(r, gamma), toGammaSpace(g, gamma), toGammaSpace(b, gamma), 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 processedColor = processColor(color);
+        // explicit check in case if processedColor is 0
+        if (processedColor !== null && processedColor !== undefined) {
+            r.push(red(processedColor));
+            g.push(green(processedColor));
+            b.push(blue(processedColor));
+            a.push(opacity(processedColor));
+        }
+    }
+    return { r, g, b, a };
+};
+const getInterpolateHSV = (colors) => {
+    'worklet';
+    const h = [];
+    const s = [];
+    const v = [];
+    const a = [];
+    for (let i = 0; i < colors.length; ++i) {
+        const color = colors[i];
+        const processedColor = processColor(color);
+        if (typeof processedColor === 'number') {
+            const processedHSVColor = RGBtoHSV(red(processedColor), green(processedColor), blue(processedColor));
+            h.push(processedHSVColor.h);
+            s.push(processedHSVColor.s);
+            v.push(processedHSVColor.v);
+            a.push(opacity(processedColor));
+        }
+    }
+    return { h, s, v, a };
+};
+export const interpolateColor = (value, inputRange, outputRange, colorSpace = 'RGB', options = {}) => {
+    'worklet';
+    if (colorSpace === 'HSV') {
+        return interpolateColorsHSV(value, inputRange, getInterpolateHSV(outputRange), options);
+    }
+    else if (colorSpace === 'RGB') {
+        return interpolateColorsRGB(value, inputRange, getInterpolateRGB(outputRange), options);
+    }
+    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, options = {}) {
+    return useSharedValue({
+        inputRange,
+        outputRange,
+        colorSpace,
+        cache: makeMutable(null),
+        options,
+    });
+}
+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, interpolateConfig.value.options);
+    }
+    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, interpolateConfig.value.options);
+    }
+    throw new Error(`Invalid color space provided: ${interpolateConfig.value.colorSpace}. Supported values are: ['RGB', 'HSV']`);
+};

package/lib/reanimated2/interpolation.js

@@ -0,0 +1,127 @@
+// @ts-ignore JS file
+import interpolateNode from '../reanimated1/derived/interpolate';
+export var Extrapolation;
+(function (Extrapolation) {
+    Extrapolation["IDENTITY"] = "identity";
+    Extrapolation["CLAMP"] = "clamp";
+    Extrapolation["EXTEND"] = "extend";
+})(Extrapolation || (Extrapolation = {}));
+function isNode(x) {
+    'worklet';
+    return x.__nodeId !== undefined;
+}
+function getVal(type, coef, val, leftEdgeOutput, rightEdgeOutput, x) {
+    'worklet';
+    switch (type) {
+        case Extrapolation.IDENTITY:
+            return x;
+        case Extrapolation.CLAMP:
+            if (coef * val < coef * leftEdgeOutput) {
+                return leftEdgeOutput;
+            }
+            return rightEdgeOutput;
+        case Extrapolation.EXTEND:
+        default:
+            return val;
+    }
+}
+function isExtrapolate(value) {
+    'worklet';
+    return (value === Extrapolation.EXTEND ||
+        value === Extrapolation.CLAMP ||
+        value === Extrapolation.IDENTITY);
+}
+// validates extrapolations type
+// if type is correct, converts it to ExtrapolationConfig
+function validateType(type) {
+    'worklet';
+    // initialize extrapolationConfig with default extrapolation
+    const extrapolationConfig = {
+        extrapolateLeft: Extrapolation.EXTEND,
+        extrapolateRight: Extrapolation.EXTEND,
+    };
+    if (!type) {
+        return extrapolationConfig;
+    }
+    if (typeof type === 'string') {
+        if (!isExtrapolate(type)) {
+            throw new Error(`Reanimated: not supported value for "interpolate" \nSupported values: ["extend", "clamp", "identity", Extrapolatation.CLAMP, Extrapolatation.EXTEND, Extrapolatation.IDENTITY]\n Valid example:
+        interpolate(value, [inputRange], [outputRange], "clamp")`);
+        }
+        extrapolationConfig.extrapolateLeft = type;
+        extrapolationConfig.extrapolateRight = type;
+        return extrapolationConfig;
+    }
+    // otherwise type is extrapolation config object
+    if ((type.extrapolateLeft && !isExtrapolate(type.extrapolateLeft)) ||
+        (type.extrapolateRight && !isExtrapolate(type.extrapolateRight))) {
+        throw new Error(`Reanimated: not supported value for "interpolate" \nSupported values: ["extend", "clamp", "identity", Extrapolatation.CLAMP, Extrapolatation.EXTEND, Extrapolatation.IDENTITY]\n Valid example:
+      interpolate(value, [inputRange], [outputRange], {
+        extrapolateLeft: Extrapolation.CLAMP,
+        extrapolateRight: Extrapolation.IDENTITY
+      }})`);
+    }
+    Object.assign(extrapolationConfig, type);
+    return extrapolationConfig;
+}
+function internalInterpolate(x, narrowedInput, extrapolationConfig) {
+    'worklet';
+    const { leftEdgeInput, rightEdgeInput, leftEdgeOutput, rightEdgeOutput } = narrowedInput;
+    if (rightEdgeInput - leftEdgeInput === 0)
+        return leftEdgeOutput;
+    const progress = (x - leftEdgeInput) / (rightEdgeInput - leftEdgeInput);
+    const val = leftEdgeOutput + progress * (rightEdgeOutput - leftEdgeOutput);
+    const coef = rightEdgeOutput >= leftEdgeOutput ? 1 : -1;
+    if (coef * val < coef * leftEdgeOutput) {
+        return getVal(extrapolationConfig.extrapolateLeft, coef, val, leftEdgeOutput, rightEdgeOutput, x);
+    }
+    else if (coef * val > coef * rightEdgeOutput) {
+        return getVal(extrapolationConfig.extrapolateRight, coef, val, leftEdgeOutput, rightEdgeOutput, x);
+    }
+    return val;
+}
+// TODO: support default values in worklets:
+// e.g. function interpolate(x, input, output, type = Extrapolatation.CLAMP)
+export function interpolate(x, input, output, type) {
+    'worklet';
+    if (input.length < 2 || output.length < 2) {
+        throw Error('Interpolation input and output should contain at least two values.');
+    }
+    const extrapolationConfig = validateType(type);
+    if (isNode(x)) {
+        console.warn(`interpolate() was renamed to interpolateNode() in Reanimated 2. Please use interpolateNode() instead`);
+        return interpolateNode(x, {
+            inputRange: input,
+            outputRange: output,
+            extrapolateLeft: extrapolationConfig.extrapolateLeft,
+            extrapolateRight: extrapolationConfig.extrapolateRight,
+        });
+    }
+    const length = input.length;
+    const narrowedInput = {
+        leftEdgeInput: input[0],
+        rightEdgeInput: input[1],
+        leftEdgeOutput: output[0],
+        rightEdgeOutput: output[1],
+    };
+    if (length > 2) {
+        if (x > input[length - 1]) {
+            narrowedInput.leftEdgeInput = input[length - 2];
+            narrowedInput.rightEdgeInput = input[length - 1];
+            narrowedInput.leftEdgeOutput = output[length - 2];
+            narrowedInput.rightEdgeOutput = output[length - 1];
+        }
+        else {
+            for (let i = 1; i < length; ++i) {
+                if (x <= input[i]) {
+                    narrowedInput.leftEdgeInput = input[i - 1];
+                    narrowedInput.rightEdgeInput = input[i];
+                    narrowedInput.leftEdgeOutput = output[i - 1];
+                    narrowedInput.rightEdgeOutput = output[i];
+                    break;
+                }
+            }
+        }
+    }
+    return internalInterpolate(x, narrowedInput, extrapolationConfig);
+}

package/lib/reanimated2/jestUtils.js

@@ -0,0 +1,175 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { jestResetJsReanimatedModule } from './core';
+let config = {
+    fps: 60,
+};
+const isAnimatedStyle = (style) => {
+    return !!style.animatedStyle;
+};
+const getAnimatedStyleFromObject = (style) => {
+    return style.animatedStyle.current.value;
+};
+const getCurrentStyle = (received) => {
+    const styleObject = received.props.style;
+    let currentStyle = {};
+    if (Array.isArray(styleObject)) {
+        received.props.style.forEach((style) => {
+            if (isAnimatedStyle(style)) {
+                currentStyle = Object.assign(Object.assign({}, currentStyle), getAnimatedStyleFromObject(style));
+            }
+            else {
+                currentStyle = Object.assign(Object.assign({}, currentStyle), style);
+            }
+        });
+    }
+    else {
+        if (isAnimatedStyle(styleObject)) {
+            currentStyle = getAnimatedStyleFromObject(styleObject);
+        }
+        else {
+            currentStyle = Object.assign(Object.assign({}, styleObject), received.props.animatedStyle.value);
+        }
+    }
+    return currentStyle;
+};
+const checkEqual = (currentStyle, expectStyle) => {
+    if (Array.isArray(expectStyle)) {
+        if (expectStyle.length !== currentStyle.length)
+            return false;
+        for (let i = 0; i < currentStyle.length; i++) {
+            if (!checkEqual(currentStyle[i], expectStyle[i])) {
+                return false;
+            }
+        }
+    }
+    else if (typeof currentStyle === 'object' && currentStyle) {
+        for (const property in expectStyle) {
+            if (!checkEqual(currentStyle[property], expectStyle[property])) {
+                return false;
+            }
+        }
+    }
+    else {
+        return currentStyle === expectStyle;
+    }
+    return true;
+};
+const findStyleDiff = (current, expect, requireAllMatch) => {
+    const diffs = [];
+    let isEqual = true;
+    for (const property in expect) {
+        if (!checkEqual(current[property], expect[property])) {
+            isEqual = false;
+            diffs.push({
+                property: property,
+                current: current[property],
+                expect: expect[property],
+            });
+        }
+    }
+    if (requireAllMatch &&
+        Object.keys(current).length !== Object.keys(expect).length) {
+        isEqual = false;
+        for (const property in current) {
+            if (expect[property] === undefined) {
+                diffs.push({
+                    property: property,
+                    current: current[property],
+                    expect: expect[property],
+                });
+            }
+        }
+    }
+    return { isEqual, diffs };
+};
+const compareStyle = (received, expectedStyle, config) => {
+    if (!received.props.style) {
+        return { message: () => message, pass: false };
+    }
+    const { exact } = config;
+    const currentStyle = getCurrentStyle(received);
+    const { isEqual, diffs } = findStyleDiff(currentStyle, expectedStyle, exact);
+    if (isEqual) {
+        return { message: () => 'ok', pass: true };
+    }
+    const currentStyleStr = JSON.stringify(currentStyle);
+    const expectedStyleStr = JSON.stringify(expectedStyle);
+    const differences = diffs
+        .map((diff) => `- '${diff.property}' should be ${JSON.stringify(diff.expect)}, but is ${JSON.stringify(diff.current)}`)
+        .join('\n');
+    return {
+        message: () => `Expected: ${expectedStyleStr}\nReceived: ${currentStyleStr}\n\nDifferences:\n${differences}`,
+        pass: false,
+    };
+};
+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;
+    global.ReanimatedDataMock = {
+        now: () => currentTimestamp,
+    };
+    currentTimestamp = 0;
+    jest.useFakeTimers();
+};
+const afterTest = () => {
+    jest.useRealTimers();
+    global.requestAnimationFrame = requestAnimationFrameCopy;
+};
+const tickTravel = () => {
+    currentTimestamp += frameTime;
+    jest.advanceTimersByTime(frameTime);
+};
+export const withReanimatedTimer = (animationTest) => {
+    beforeTest();
+    animationTest();
+    afterTest();
+};
+export const advanceAnimationByTime = (time = frameTime) => {
+    for (let i = 0; i <= Math.ceil(time / frameTime); i++) {
+        tickTravel();
+    }
+    jest.advanceTimersByTime(frameTime);
+};
+export const advanceAnimationByFrame = (count) => {
+    for (let i = 0; i <= count; i++) {
+        tickTravel();
+    }
+    jest.advanceTimersByTime(frameTime);
+};
+export const setUpTests = (userConfig = {}) => {
+    let expect = global.expect;
+    if (expect === undefined) {
+        const expectModule = require('expect');
+        expect = expectModule;
+        // Starting from Jest 28, "expect" package uses named exports instead of default export.
+        // So, requiring "expect" package doesn't give direct access to "expect" function anymore.
+        // It gives access to the module object instead.
+        // We use this info to detect if the project uses Jest 28 or higher.
+        if (typeof expect === 'object') {
+            const jestGlobals = require('@jest/globals');
+            expect = jestGlobals.expect;
+        }
+        if (expect === undefined || expect.extend === undefined) {
+            expect = expectModule.default;
+        }
+    }
+    require('setimmediate');
+    frameTime = Math.round(1000 / config.fps);
+    config = Object.assign(Object.assign({}, config), userConfig);
+    expect.extend({
+        toHaveAnimatedStyle(received, expectedStyle, config = {}) {
+            return compareStyle(received, expectedStyle, config);
+        },
+    });
+};
+export const getAnimatedStyle = (received) => {
+    return getCurrentStyle(received);
+};

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

@@ -0,0 +1,106 @@
+import MapperRegistry from './MapperRegistry';
+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);
+        this._valueSetter = undefined;
+        this._renderRequested = false;
+        this._mapperRegistry = new MapperRegistry(this);
+        this._frames = [];
+        if (isJest()) {
+            this.timeProvider = { now: () => global.ReanimatedDataMock.now() };
+        }
+        else {
+            this.timeProvider = { now: () => window.performance.now() };
+        }
+    }
+    pushFrame(frame) {
+        this._frames.push(frame);
+        this.maybeRequestRender();
+    }
+    getTimestamp() {
+        return this.timeProvider.now();
+    }
+    maybeRequestRender() {
+        if (!this._renderRequested) {
+            this._renderRequested = true;
+            requestAnimationFrame((_timestampMs) => {
+                this._renderRequested = false;
+                this._onRender(this.getTimestamp());
+            });
+        }
+    }
+    _onRender(timestampMs) {
+        this._mapperRegistry.execute();
+        const frames = [...this._frames];
+        this._frames = [];
+        for (let i = 0, len = frames.length; i < len; ++i) {
+            frames[i](timestampMs);
+        }
+        if (this._mapperRegistry.needRunOnRender) {
+            this._mapperRegistry.execute();
+        }
+    }
+    installCoreFunctions(valueSetter) {
+        this._valueSetter = valueSetter;
+    }
+    makeShareable(value) {
+        return value;
+    }
+    makeMutable(value) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return new MutableValue(value, this._valueSetter);
+    }
+    makeRemote(object = {}) {
+        return object;
+    }
+    startMapper(mapper, inputs = [], outputs = []) {
+        const instance = new Mapper(this, mapper, inputs, outputs);
+        const mapperId = this._mapperRegistry.startMapper(instance);
+        this.maybeRequestRender();
+        return mapperId;
+    }
+    stopMapper(mapperId) {
+        this._mapperRegistry.stopMapper(mapperId);
+    }
+    registerEventHandler(_, __) {
+        // noop
+        return '';
+    }
+    unregisterEventHandler(_) {
+        // noop
+    }
+    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.');
+        }
+    }
+    subscribeForKeyboardEvents(_) {
+        console.warn('[Reanimated] useAnimatedKeyboard is not available on web yet.');
+        return -1;
+    }
+    unsubscribeFromKeyboardEvents(_) {
+        // noop
+    }
+}

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

@@ -0,0 +1,43 @@
+import MutableValue from './MutableValue';
+export default class Mapper {
+    constructor(module, mapper, inputs = [], outputs = []) {
+        this.dirty = true;
+        this.id = Mapper.MAPPER_ID++;
+        this.inputs = this.extractMutablesFromArray(inputs);
+        this.outputs = this.extractMutablesFromArray(outputs);
+        this.mapper = mapper;
+        const markDirty = () => {
+            this.dirty = true;
+            module.maybeRequestRender();
+        };
+        this.inputs.forEach((input) => {
+            input.addListener(markDirty);
+        });
+    }
+    execute() {
+        this.dirty = false;
+        this.mapper();
+    }
+    extractMutablesFromArray(array) {
+        const res = [];
+        function extractMutables(value) {
+            if (value == null) {
+                // return;
+            }
+            else if (value instanceof MutableValue) {
+                res.push(value);
+            }
+            else if (Array.isArray(value)) {
+                value.forEach((v) => extractMutables(v));
+            }
+            else if (typeof value === 'object') {
+                Object.keys(value).forEach((key) => {
+                    extractMutables(value[key]);
+                });
+            }
+        }
+        extractMutables(array);
+        return res;
+    }
+}
+Mapper.MAPPER_ID = 1;