react-native-reanimated 2.3.0-alpha.3 → 2.3.0-beta.4

package/lib/reanimated2/interpolation.js

@@ -1,119 +1,127 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import interpolateNode, { Extrapolate, } from '../reanimated1/derived/interpolate';
-function getVal(config) {
+// @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';
-    const { type, coef, val, ll, rr, x } = config;
     switch (type) {
-        case Extrapolate.IDENTITY:
+        case Extrapolation.IDENTITY:
             return x;
-        case Extrapolate.CLAMP:
-            if (coef * val < coef * ll) {
-                return ll;
+        case Extrapolation.CLAMP:
+            if (coef * val < coef * leftEdgeOutput) {
+                return leftEdgeOutput;
             }
-            return rr;
-        case Extrapolate.EXTEND:
+            return rightEdgeOutput;
+        case Extrapolation.EXTEND:
         default:
             return val;
     }
 }
 function isExtrapolate(value) {
     'worklet';
-    return (value === Extrapolate.EXTEND ||
-        value === Extrapolate.CLAMP ||
-        value === Extrapolate.IDENTITY);
+    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';
-    const EXTRAPOLATE_ERROR_MSG = `Reanimated: config object is not valid, please provide valid config, for example:
-    interpolate(value, [inputRange], [outputRange], {
-    extrapolateLeft: 'clamp',
-    extrapolateRight: 'extend',
-  })`;
-    const EXTRAPOLATE_ERROR = (extrapolate) => `Reanimated: not supported value for "${extrapolate}" \nSupported values: ["extend", "clamp", "identity"]\n Valid example:
-    interpolate(value, [inputRange], [outputRange], {
-      ${extrapolate}: 'clamp',
-  })`;
-    type = type !== null && type !== void 0 ? type : 'extend';
-    // eslint-disable-next-line no-prototype-builtins
-    const hasExtrapolateLeft = type.hasOwnProperty('extrapolateLeft');
-    // eslint-disable-next-line no-prototype-builtins
-    const hasExtrapolateRight = type.hasOwnProperty('extrapolateRight');
-    if (typeof type === 'object' &&
-        ((Object.keys(type).length === 2 &&
-            !(hasExtrapolateLeft && hasExtrapolateRight)) ||
-            (Object.keys(type).length === 1 &&
-                !(hasExtrapolateLeft || hasExtrapolateRight)) ||
-            Object.keys(type).length > 2)) {
-        throw new Error(EXTRAPOLATE_ERROR_MSG);
+    // initialize extrapolationConfig with default extrapolation
+    const extrapolationConfig = {
+        extrapolateLeft: Extrapolation.EXTEND,
+        extrapolateRight: Extrapolation.EXTEND,
+    };
+    if (!type) {
+        return extrapolationConfig;
     }
-    if (typeof type === 'object') {
-        if (hasExtrapolateLeft && !isExtrapolate(type.extrapolateLeft)) {
-            throw new Error(EXTRAPOLATE_ERROR('extrapolateLeft'));
-        }
-        if (hasExtrapolateRight && !isExtrapolate(type.extrapolateRight)) {
-            throw new Error(EXTRAPOLATE_ERROR('extrapolateRight'));
+    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;
     }
-    if (typeof type === 'string' && !isExtrapolate(type)) {
-        throw new Error(`Reanimated: not supported value for "interpolate" \nSupported values: ["extend", "clamp", "identity"]\n Valid example:
-       interpolate(value, [inputRange], [outputRange], "clamp")`);
+    // 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;
 }
-// TODO: support default values in worklets:
-// e.g. function interpolate(x, input, output, type = Extrapolate.CLAMP)
-function internalInterpolate(x, l, r, ll, rr, type) {
+function internalInterpolate(x, narrowedInput, extrapolationConfig) {
     'worklet';
-    if (r - l === 0)
-        return ll;
-    const progress = (x - l) / (r - l);
-    const val = ll + progress * (rr - ll);
-    const coef = rr >= ll ? 1 : -1;
-    const config = { type, coef, val, ll, rr, x };
-    if (global.__DEV__) {
-        validateType(type);
-    }
-    if (typeof type === 'object') {
-        if (coef * val < coef * ll) {
-            return getVal(Object.assign(config, { type: type.extrapolateLeft }));
-        }
-        else if (coef * val > coef * ll) {
-            return getVal(Object.assign(config, { type: type.extrapolateRight }));
-        }
+    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);
     }
-    if (coef * val < coef * ll || coef * val > coef * rr) {
-        return getVal(config);
+    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 (x && x.__nodeID) {
+    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`);
-        // we can't use rest parameters in worklets at the moment
-        // eslint-disable-next-line prefer-spread, prefer-rest-params
-        return interpolateNode.apply(undefined, arguments);
+        return interpolateNode(x, {
+            inputRange: input,
+            outputRange: output,
+            extrapolateLeft: extrapolationConfig.extrapolateLeft,
+            extrapolateRight: extrapolationConfig.extrapolateRight,
+        });
     }
     const length = input.length;
-    let narrowedInput = [];
-    if (x < input[0]) {
-        narrowedInput = [input[0], input[1], output[0], output[1]];
-    }
-    else if (x > input[length - 1]) {
-        narrowedInput = [
-            input[length - 2],
-            input[length - 1],
-            output[length - 2],
-            output[length - 1],
-        ];
-    }
-    else {
-        for (let i = 1; i < length; ++i) {
-            if (x <= input[i]) {
-                narrowedInput = [input[i - 1], input[i], output[i - 1], output[i]];
-                break;
+    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.apply({}, [x].concat(narrowedInput).concat(type));
+    return internalInterpolate(x, narrowedInput, extrapolationConfig);
 }

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

@@ -1,21 +1,19 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import MapperRegistry from './MapperRegistry';
 import MutableValue from './MutableValue';
 import Mapper from './Mapper';
-export default class JSReanimated {
+import { NativeReanimated } from '../NativeReanimated/NativeReanimated';
+export default class JSReanimated extends NativeReanimated {
     constructor() {
-        this.native = false;
+        super(false);
         this._valueSetter = undefined;
         this._renderRequested = false;
         this._mapperRegistry = new MapperRegistry(this);
         this._frames = [];
-        this.timeProvider = {};
         if (process.env.JEST_WORKER_ID) {
-            this.timeProvider.now = () => Date.now();
+            this.timeProvider = { now: () => Date.now() };
         }
         else {
-            this.timeProvider.now = () => window.performance.now();
+            this.timeProvider = { now: () => window.performance.now() };
         }
     }
     pushFrame(frame) {
@@ -52,9 +50,10 @@ export default class JSReanimated {
         return value;
     }
     makeMutable(value) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         return new MutableValue(value, this._valueSetter);
     }
-    makeRemote(object) {
+    makeRemote(object = {}) {
         return object;
     }
     startMapper(mapper, inputs = [], outputs = []) {
@@ -66,10 +65,14 @@ export default class JSReanimated {
     stopMapper(mapperId) {
         this._mapperRegistry.stopMapper(mapperId);
     }
-    registerEventHandler(_eventHash, _eventHandler) {
+    registerEventHandler(_, __) {
         // noop
+        return '';
     }
-    unregisterEventHandler(_registrationId) {
+    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,34 +1,65 @@
 /* global _stopObservingProgress, _startObservingProgress */
 import { runOnUI } from '../core';
 import { withStyleAnimation } from '../animation/styleAnimation';
+import { ColorProperties } from '../UpdateProps';
+import { processColor } from '../Colors';
 runOnUI(() => {
     'worklet';
     const configs = {};
+    const enteringAnimationForTag = {};
     global.LayoutAnimationRepository = {
         configs,
         registerConfig(tag, config) {
             configs[tag] = config;
+            enteringAnimationForTag[tag] = null;
         },
         removeConfig(tag) {
             delete configs[tag];
+            delete enteringAnimationForTag[tag];
         },
         startAnimationForTag(tag, type, yogaValues) {
             if (configs[tag] == null) {
                 return; // :(
             }
             const style = configs[tag][type](yogaValues);
+            let currentAnimation = style.animations;
+            if (type === 'entering') {
+                enteringAnimationForTag[tag] = style;
+            }
+            else if (type === 'layout' && enteringAnimationForTag[tag] !== null) {
+                const entryAniamtion = enteringAnimationForTag[tag].animations;
+                const layoutAnimation = style.animations;
+                currentAnimation = {};
+                for (const key in entryAniamtion) {
+                    currentAnimation[key] = entryAniamtion[key];
+                }
+                for (const key in layoutAnimation) {
+                    currentAnimation[key] = layoutAnimation[key];
+                }
+            }
             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(style.animations);
+            const animation = withStyleAnimation(currentAnimation);
             animation.callback = (finished) => {
                 if (finished) {
                     _stopObservingProgress(tag, finished);
                 }
                 style.callback && style.callback(finished);
             };
+            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/animationBuilder/BaseAnimationBuilder.js

@@ -1,6 +1,7 @@
-import { withDelay, withTiming, withSpring } from '../../animation';
+import { withDelay } from '../../animation';
 export class BaseAnimationBuilder {
     constructor() {
+        this.randomizeDelay = false;
         this.build = () => {
             throw Error('Unimplemented method in child class.');
         };
@@ -13,14 +14,6 @@ export class BaseAnimationBuilder {
         this.durationV = durationMs;
         return this;
     }
-    static easing(easingFunction) {
-        const instance = this.createInstance();
-        return instance.easing(easingFunction);
-    }
-    easing(easingFunction) {
-        this.easingV = easingFunction;
-        return this;
-    }
     static delay(delayMs) {
         const instance = this.createInstance();
         return instance.delay(delayMs);
@@ -29,138 +22,48 @@ export class BaseAnimationBuilder {
         this.delayV = delayMs;
         return this;
     }
-    static rotate(degree) {
-        const instance = this.createInstance();
-        return instance.rotate(degree);
-    }
-    rotate(degree) {
-        this.rotateV = degree;
-        return this;
-    }
-    static springify() {
-        const instance = this.createInstance();
-        return instance.springify();
-    }
-    springify() {
-        this.type = withSpring;
-        return this;
-    }
-    static damping(damping) {
-        const instance = this.createInstance();
-        return instance.damping(damping);
-    }
-    damping(damping) {
-        this.dampingV = damping;
-        return this;
-    }
-    static mass(mass) {
-        const instance = this.createInstance();
-        return instance.mass(mass);
-    }
-    mass(mass) {
-        this.massV = mass;
-        return this;
-    }
-    static stiffness(stiffness) {
-        const instance = this.createInstance();
-        return instance.stiffness(stiffness);
-    }
-    stiffness(stiffness) {
-        this.stiffnessV = stiffness;
-        return this;
-    }
-    static overshootClamping(overshootClamping) {
-        const instance = this.createInstance();
-        return instance.overshootClamping(overshootClamping);
-    }
-    overshootClamping(overshootClamping) {
-        this.overshootClampingV = overshootClamping;
-        return this;
-    }
-    static restDisplacementThreshold(restDisplacementThreshold) {
+    static withCallback(callback) {
         const instance = this.createInstance();
-        return instance.restDisplacementThreshold(restDisplacementThreshold);
+        return instance.withCallback(callback);
     }
-    restDisplacementThreshold(restDisplacementThreshold) {
-        this.restDisplacementThresholdV = restDisplacementThreshold;
+    withCallback(callback) {
+        this.callbackV = callback;
         return this;
     }
-    static restSpeedThreshold(restSpeedThreshold) {
-        const instance = this.createInstance();
-        return instance.restSpeedThreshold(restSpeedThreshold);
+    // 300ms is the default animation duration. If any animation has different default has to override this method.
+    static getDuration() {
+        return 300;
     }
-    restSpeedThreshold(restSpeedThreshold) {
-        this.restSpeedThresholdV = restSpeedThreshold;
-        return this;
+    getDuration() {
+        var _a;
+        return (_a = this.durationV) !== null && _a !== void 0 ? _a : 300;
     }
-    static withCallback(callback) {
+    static randomDelay() {
         const instance = this.createInstance();
-        return instance.withCallback(callback);
+        return instance.randomDelay();
     }
-    withCallback(callback) {
-        this.callbackV = callback;
+    randomDelay() {
+        this.randomizeDelay = true;
         return this;
     }
-    static build() {
-        const instance = this.createInstance();
-        return instance.build();
+    // when randomizeDelay is set to true, randomize delay between 0 and provided value (or 1000ms if delay is not provided)
+    getDelay() {
+        var _a, _b;
+        return this.randomizeDelay
+            ? Math.random() * ((_a = this.delayV) !== null && _a !== void 0 ? _a : 1000)
+            : (_b = this.delayV) !== null && _b !== void 0 ? _b : 0;
     }
     getDelayFunction() {
-        const delay = this.delayV;
-        return delay
+        const isDelayProvided = this.randomizeDelay || this.delayV;
+        return isDelayProvided
             ? withDelay
             : (_, animation) => {
                 'worklet';
                 return animation;
             };
     }
-    getAnimationAndConfig() {
-        const duration = this.durationV;
-        const easing = this.easingV;
-        const rotate = this.rotateV;
-        const type = this.type ? this.type : withTiming;
-        const damping = this.dampingV;
-        const mass = this.massV;
-        const stiffness = this.stiffnessV;
-        const overshootClamping = this.overshootClampingV;
-        const restDisplacementThreshold = this.restDisplacementThresholdV;
-        const restSpeedThreshold = this.restSpeedThresholdV;
-        const animation = type;
-        const config = {};
-        if (type === withTiming) {
-            if (easing) {
-                config.easing = easing;
-            }
-            if (duration) {
-                config.duration = duration;
-            }
-            if (rotate) {
-                config.rotate = rotate;
-            }
-        }
-        else {
-            if (damping) {
-                config.damping = damping;
-            }
-            if (mass) {
-                config.mass = mass;
-            }
-            if (stiffness) {
-                config.stiffness = stiffness;
-            }
-            if (overshootClamping) {
-                config.overshootClamping = overshootClamping;
-            }
-            if (restDisplacementThreshold) {
-                config.restDisplacementThreshold = restDisplacementThreshold;
-            }
-            if (restSpeedThreshold) {
-                config.restSpeedThreshold = restSpeedThreshold;
-            }
-            if (rotate) {
-                config.rotate = rotate;
-            }
-        }
-        return [animation, config];
+    static build() {
+        const instance = this.createInstance();
+        return instance.build();
     }
 }