react-native-reanimated 2.16.0 → 2.17.0

package/lib/reanimated2/Easing.js

@@ -0,0 +1,248 @@
+// spread and rest parameters can't be used in worklets right now
+/* eslint-disable prefer-rest-params */
+/* eslint-disable prefer-spread */
+/* global _WORKLET */
+// @ts-ignore reanimated1/Easing is JS file
+import EasingNode from '../reanimated1/Easing';
+import { Bezier } from './Bezier';
+/**
+ * A linear function, `f(t) = t`. Position correlates to elapsed time one to
+ * one.
+ *
+ * http://cubic-bezier.com/#0,0,1,1
+ */
+function linear(t) {
+    'worklet';
+    return t;
+}
+/**
+ * A simple inertial interaction, similar to an object slowly accelerating to
+ * speed.
+ *
+ * http://cubic-bezier.com/#.42,0,1,1
+ */
+function ease(t) {
+    'worklet';
+    return Bezier(0.42, 0, 1, 1)(t);
+}
+/**
+ * A quadratic function, `f(t) = t * t`. Position equals the square of elapsed
+ * time.
+ *
+ * http://easings.net/#easeInQuad
+ */
+function quad(t) {
+    'worklet';
+    return t * t;
+}
+/**
+ * A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed
+ * time.
+ *
+ * http://easings.net/#easeInCubic
+ */
+function cubic(t) {
+    'worklet';
+    return t * t * t;
+}
+/**
+ * A power function. Position is equal to the Nth power of elapsed time.
+ *
+ * n = 4: http://easings.net/#easeInQuart
+ * n = 5: http://easings.net/#easeInQuint
+ */
+function poly(n) {
+    'worklet';
+    return (t) => {
+        'worklet';
+        return Math.pow(t, n);
+    };
+}
+/**
+ * A sinusoidal function.
+ *
+ * http://easings.net/#easeInSine
+ */
+function sin(t) {
+    'worklet';
+    return 1 - Math.cos((t * Math.PI) / 2);
+}
+/**
+ * A circular function.
+ *
+ * http://easings.net/#easeInCirc
+ */
+function circle(t) {
+    'worklet';
+    return 1 - Math.sqrt(1 - t * t);
+}
+/**
+ * An exponential function.
+ *
+ * http://easings.net/#easeInExpo
+ */
+function exp(t) {
+    'worklet';
+    return Math.pow(2, 10 * (t - 1));
+}
+/**
+ * A simple elastic interaction, similar to a spring oscillating back and
+ * forth.
+ *
+ * Default bounciness is 1, which overshoots a little bit once. 0 bounciness
+ * doesn't overshoot at all, and bounciness of N > 1 will overshoot about N
+ * times.
+ *
+ * http://easings.net/#easeInElastic
+ */
+function elastic(bounciness = 1) {
+    'worklet';
+    const p = bounciness * Math.PI;
+    return (t) => {
+        'worklet';
+        return 1 - Math.pow(Math.cos((t * Math.PI) / 2), 3) * Math.cos(t * p);
+    };
+}
+/**
+ * Use with `Animated.parallel()` to create a simple effect where the object
+ * animates back slightly as the animation starts.
+ *
+ * Wolfram Plot:
+ *
+ * - http://tiny.cc/back_default (s = 1.70158, default)
+ */
+function back(s = 1.70158) {
+    'worklet';
+    return (t) => {
+        'worklet';
+        return t * t * ((s + 1) * t - s);
+    };
+}
+/**
+ * Provides a simple bouncing effect.
+ *
+ * http://easings.net/#easeInBounce
+ */
+function bounce(t) {
+    'worklet';
+    if (t < 1 / 2.75) {
+        return 7.5625 * t * t;
+    }
+    if (t < 2 / 2.75) {
+        const t2 = t - 1.5 / 2.75;
+        return 7.5625 * t2 * t2 + 0.75;
+    }
+    if (t < 2.5 / 2.75) {
+        const t2 = t - 2.25 / 2.75;
+        return 7.5625 * t2 * t2 + 0.9375;
+    }
+    const t2 = t - 2.625 / 2.75;
+    return 7.5625 * t2 * t2 + 0.984375;
+}
+/**
+ * Provides a cubic bezier curve, equivalent to CSS Transitions'
+ * `transition-timing-function`.
+ *
+ * A useful tool to visualize cubic bezier curves can be found at
+ * http://cubic-bezier.com/
+ */
+function bezier(x1, y1, x2, y2) {
+    'worklet';
+    return {
+        factory: () => {
+            'worklet';
+            return Bezier(x1, y1, x2, y2);
+        },
+    };
+}
+function bezierFn(x1, y1, x2, y2) {
+    'worklet';
+    return Bezier(x1, y1, x2, y2);
+}
+/**
+ * Runs an easing function forwards.
+ */
+function in_(easing) {
+    'worklet';
+    return easing;
+}
+/**
+ * Runs an easing function backwards.
+ */
+function out(easing) {
+    'worklet';
+    return (t) => {
+        'worklet';
+        return 1 - easing(1 - t);
+    };
+}
+/**
+ * Makes any easing function symmetrical. The easing function will run
+ * forwards for half of the duration, then backwards for the rest of the
+ * duration.
+ */
+function inOut(easing) {
+    'worklet';
+    return (t) => {
+        'worklet';
+        if (t < 0.5) {
+            return easing(t * 2) / 2;
+        }
+        return 1 - easing((1 - t) * 2) / 2;
+    };
+}
+const EasingObject = {
+    linear,
+    ease,
+    quad,
+    cubic,
+    poly,
+    sin,
+    circle,
+    exp,
+    elastic,
+    back,
+    bounce,
+    bezier,
+    bezierFn,
+    in: in_,
+    out,
+    inOut,
+};
+// TODO type worklets
+function createChecker(worklet, workletName, prevArgs) {
+    /* should return Animated.Value or worklet */
+    function checkIfReaOne() {
+        'worklet';
+        if (arguments && !_WORKLET) {
+            for (let i = 0; i < arguments.length; i++) {
+                const arg = arguments[i];
+                if (arg && arg.__nodeID) {
+                    console.warn(`Easing was renamed to EasingNode in Reanimated 2. Please use EasingNode instead`);
+                    if (prevArgs) {
+                        return EasingNode[workletName]
+                            .apply(undefined, prevArgs)
+                            .apply(undefined, arguments);
+                    }
+                    return EasingNode[workletName].apply(undefined, arguments);
+                }
+            }
+        }
+        // @ts-ignore this is implicitly any - TODO
+        const res = worklet.apply(this, arguments);
+        if (!_WORKLET && res && typeof res === 'function' && res.__workletHash) {
+            return createChecker(res, workletName, arguments);
+        }
+        return res;
+    }
+    // use original worklet on UI side
+    checkIfReaOne._closure = worklet._closure;
+    checkIfReaOne.asString = worklet.asString;
+    checkIfReaOne.__workletHash = worklet.__workletHash;
+    checkIfReaOne.__location = worklet.__location;
+    return checkIfReaOne;
+}
+Object.keys(EasingObject).forEach((key) => {
+    EasingObject[key] = createChecker(EasingObject[key], key);
+});
+export const Easing = EasingObject;

package/lib/reanimated2/NativeMethods.js

@@ -0,0 +1,94 @@
+import { findNodeHandle } from 'react-native';
+import { isChromeDebugger, isWeb, shouldBeUseWeb } from './PlatformChecker';
+export function getTag(view) {
+    return findNodeHandle(view);
+}
+const isNative = !shouldBeUseWeb();
+export let measure;
+if (isWeb()) {
+    measure = (animatedRef) => {
+        const element = animatedRef(); // TODO: fix typing of animated refs on web
+        const viewportOffset = element.getBoundingClientRect();
+        return {
+            width: element.offsetWidth,
+            height: element.offsetHeight,
+            x: element.offsetLeft,
+            y: element.offsetTop,
+            pageX: viewportOffset.left,
+            pageY: viewportOffset.top,
+        };
+    };
+}
+else if (isChromeDebugger()) {
+    measure = (_animatedRef) => {
+        console.warn('[Reanimated] measure() cannot be used with Chrome Debugger.');
+        return null;
+    };
+}
+else {
+    measure = (animatedRef) => {
+        'worklet';
+        if (!_WORKLET) {
+            console.warn('[Reanimated] measure() was called from the main JS context. Measure is ' +
+                'only available in the UI runtime. This may also happen if measure() ' +
+                'was called by a worklet in the useAnimatedStyle hook, because useAnimatedStyle ' +
+                'calls the given worklet on the JS runtime during render. If you want to ' +
+                'prevent this warning then wrap the call with `if (_WORKLET)`. Then it will ' +
+                'only be called on the UI runtime after the render has been completed.');
+            return null;
+        }
+        const viewTag = animatedRef();
+        if (viewTag === -1) {
+            console.warn(`[Reanimated] The view with tag ${viewTag} is not a valid argument for measure(). This may be because the view is not currently rendered, which may not be a bug (e.g. an off-screen FlatList item).`);
+            return null;
+        }
+        const measured = _measure(viewTag);
+        if (measured === null) {
+            console.warn(`[Reanimated] The view with tag ${viewTag} has some undefined, not-yet-computed or meaningless value of \`LayoutMetrics\` type. This may be because the view is not currently rendered, which may not be a bug (e.g. an off-screen FlatList item).`);
+            return null;
+        }
+        else if (measured.x === -1234567) {
+            console.warn(`[Reanimated] The view with tag ${viewTag} returned an invalid measurement response.`);
+            return null;
+        }
+        else if (isNaN(measured.x)) {
+            console.warn(`[Reanimated] The view with tag ${viewTag} gets view-flattened on Android. To disable view-flattening, set \`collapsable={false}\` on this component.`);
+            return null;
+        }
+        else {
+            return measured;
+        }
+    };
+}
+export let scrollTo;
+if (isWeb()) {
+    scrollTo = (animatedRef, x, y, animated) => {
+        'worklet';
+        const element = animatedRef();
+        // @ts-ignore same call as in react-native-web
+        element.scrollTo({ x, y, animated });
+    };
+}
+else if (isNative) {
+    scrollTo = (animatedRef, x, y, animated) => {
+        'worklet';
+        if (!_WORKLET) {
+            return;
+        }
+        const viewTag = animatedRef();
+        _scrollTo(viewTag, x, y, animated);
+    };
+}
+else {
+    scrollTo = (_animatedRef, _x, _y) => {
+        // no-op
+    };
+}
+export function setGestureState(handlerTag, newState) {
+    'worklet';
+    if (!_WORKLET || !isNative) {
+        console.warn('[Reanimated] You can not use setGestureState in non-worklet function.');
+        return;
+    }
+    _setGestureState(handlerTag, newState);
+}

package/lib/reanimated2/NativeReanimated/NativeReanimated.js

@@ -0,0 +1,60 @@
+import { NativeModules } from 'react-native';
+import { checkVersion } from '../platform-specific/checkVersion';
+export class NativeReanimated {
+    constructor(native = true) {
+        if (global.__reanimatedModuleProxy === undefined && native) {
+            const { ReanimatedModule } = NativeModules;
+            ReanimatedModule === null || ReanimatedModule === void 0 ? void 0 : ReanimatedModule.installTurboModule();
+        }
+        this.InnerNativeModule = global.__reanimatedModuleProxy;
+        this.native = native;
+        if (native) {
+            checkVersion();
+        }
+    }
+    installCoreFunctions(valueSetter) {
+        return this.InnerNativeModule.installCoreFunctions(valueSetter);
+    }
+    makeShareable(value) {
+        return this.InnerNativeModule.makeShareable(value);
+    }
+    makeMutable(value) {
+        return this.InnerNativeModule.makeMutable(value);
+    }
+    makeRemote(object = {}) {
+        return this.InnerNativeModule.makeRemote(object);
+    }
+    registerSensor(sensorType, interval, sensorData) {
+        return this.InnerNativeModule.registerSensor(sensorType, interval, sensorData);
+    }
+    unregisterSensor(sensorId) {
+        return this.InnerNativeModule.unregisterSensor(sensorId);
+    }
+    startMapper(mapper, inputs = [], outputs = [], updater, viewDescriptors) {
+        return this.InnerNativeModule.startMapper(mapper, inputs, outputs, updater, viewDescriptors);
+    }
+    stopMapper(mapperId) {
+        return this.InnerNativeModule.stopMapper(mapperId);
+    }
+    registerEventHandler(eventHash, eventHandler) {
+        return this.InnerNativeModule.registerEventHandler(eventHash, eventHandler);
+    }
+    unregisterEventHandler(id) {
+        return this.InnerNativeModule.unregisterEventHandler(id);
+    }
+    getViewProp(viewTag, propName, callback) {
+        return this.InnerNativeModule.getViewProp(viewTag, propName, callback);
+    }
+    enableLayoutAnimations(flag) {
+        this.InnerNativeModule.enableLayoutAnimations(flag);
+    }
+    configureProps(uiProps, nativeProps) {
+        this.InnerNativeModule.configureProps(uiProps, nativeProps);
+    }
+    subscribeForKeyboardEvents(keyboardEventData) {
+        return this.InnerNativeModule.subscribeForKeyboardEvents(keyboardEventData);
+    }
+    unsubscribeFromKeyboardEvents(listenerId) {
+        this.InnerNativeModule.unsubscribeFromKeyboardEvents(listenerId);
+    }
+}

package/lib/reanimated2/NativeReanimated/index.js

@@ -0,0 +1,11 @@
+import reanimatedJS from '../js-reanimated';
+import { shouldBeUseWeb } from '../PlatformChecker';
+import { NativeReanimated } from './NativeReanimated';
+let exportedModule;
+if (shouldBeUseWeb()) {
+    exportedModule = reanimatedJS;
+}
+else {
+    exportedModule = new NativeReanimated();
+}
+export default exportedModule;

package/lib/reanimated2/PlatformChecker.js

@@ -0,0 +1,16 @@
+import { Platform } from 'react-native';
+export function isJest() {
+    return !!process.env.JEST_WORKER_ID;
+}
+export function isChromeDebugger() {
+    return !global.nativeCallSyncHook || global.__REMOTEDEV__;
+}
+export function isWeb() {
+    return Platform.OS === 'web';
+}
+export function shouldBeUseWeb() {
+    return isJest() || isChromeDebugger() || isWeb();
+}
+export function nativeShouldBeMock() {
+    return isJest() || isChromeDebugger();
+}

package/lib/reanimated2/PropAdapters.js

@@ -0,0 +1,55 @@
+import { addWhitelistedNativeProps } from '../ConfigHelper';
+export function createAnimatedPropAdapter(adapter, nativeProps) {
+    const nativePropsToAdd = {};
+    // eslint-disable-next-line no-unused-expressions
+    nativeProps === null || nativeProps === void 0 ? void 0 : nativeProps.forEach((prop) => {
+        nativePropsToAdd[prop] = true;
+    });
+    addWhitelistedNativeProps(nativePropsToAdd);
+    return adapter;
+}
+// ADAPTERS
+export const SVGAdapter = createAnimatedPropAdapter((props) => {
+    'worklet';
+    var _a, _b;
+    const keys = Object.keys(props);
+    // transform
+    if (keys.includes('transform')) {
+        if (Array.isArray(props.transform)) {
+            // case of array with 6 values => https://github.com/react-native-svg/react-native-svg/blob/b2e2c355204ff4b10973d3afce1495f7e4167ff7/src/elements/Shape.tsx#L200
+            if (props.transform.length !== 6) {
+                throw new Error(`invalid transform length of ${props.transform.length}, should be 6`);
+            }
+            const transform = props.transform;
+            const x = (_a = props.x) !== null && _a !== void 0 ? _a : 0;
+            const y = (_b = props.y) !== null && _b !== void 0 ? _b : 0;
+            props.transform = [
+                { translateX: transform[0] * x + transform[2] * y + transform[4] },
+                { translateY: transform[1] * x + transform[3] * y + transform[5] },
+            ];
+        }
+        else if (typeof props.transform === 'string') {
+            // case of string 'translate(translateX translateY)'
+            // todo: handle other cases of transform string like here https://github.com/react-native-svg/react-native-svg/blob/b2e2c355204ff4b10973d3afce1495f7e4167ff7/src/lib/extract/extractTransform.ts#L184
+            const transform = props.transform;
+            const arr = transform
+                .replace('translate(', '')
+                .replace(')', '')
+                .split(' ');
+            props.transform = [
+                { translateX: parseFloat(arr[0]) },
+                { translateY: parseFloat(arr[1]) },
+            ];
+        }
+    }
+    // todo: other props
+});
+export const TextInputAdapter = createAnimatedPropAdapter((props) => {
+    'worklet';
+    const keys = Object.keys(props);
+    // convert text to value like RN does here: https://github.com/facebook/react-native/blob/f2c6279ca497b34d5a2bfbb6f2d33dc7a7bea02a/Libraries/Components/TextInput/TextInput.js#L878
+    if (keys.includes('value')) {
+        props.text = props.value;
+        delete props.value;
+    }
+}, ['text']);

package/lib/reanimated2/UpdateProps.js

@@ -0,0 +1,55 @@
+import { processColor } from './Colors';
+import { makeShareable, isConfigured } from './core';
+import { _updatePropsJS } from './js-reanimated';
+import { shouldBeUseWeb } from './PlatformChecker';
+// copied from react-native/Libraries/Components/View/ReactNativeStyleAttributes
+export const colorProps = [
+    'backgroundColor',
+    'borderBottomColor',
+    'borderColor',
+    'borderLeftColor',
+    'borderRightColor',
+    'borderTopColor',
+    'borderStartColor',
+    'borderEndColor',
+    'color',
+    'shadowColor',
+    'textDecorationColor',
+    'tintColor',
+    'textShadowColor',
+    'overlayColor',
+];
+export const ColorProperties = !isConfigured() ? [] : makeShareable(colorProps);
+let updatePropsByPlatform;
+if (shouldBeUseWeb()) {
+    updatePropsByPlatform = (_, updates, maybeViewRef) => {
+        'worklet';
+        if (maybeViewRef) {
+            maybeViewRef.items.forEach((item, _) => {
+                _updatePropsJS(updates, item);
+            });
+        }
+    };
+}
+else {
+    updatePropsByPlatform = (viewDescriptors, updates, _) => {
+        'worklet';
+        for (const key in updates) {
+            if (ColorProperties.indexOf(key) !== -1) {
+                updates[key] = processColor(updates[key]);
+            }
+        }
+        viewDescriptors.value.forEach((viewDescriptor) => {
+            _updateProps(viewDescriptor.tag, viewDescriptor.name || 'RCTView', updates);
+        });
+    };
+}
+export const updateProps = updatePropsByPlatform;
+export const updatePropsJestWrapper = (viewDescriptors, updates, maybeViewRef, animatedStyle, adapters) => {
+    adapters.forEach((adapter) => {
+        adapter(updates);
+    });
+    animatedStyle.current.value = Object.assign(Object.assign({}, animatedStyle.current.value), updates);
+    updateProps(viewDescriptors, updates, maybeViewRef);
+};
+export default updateProps;

package/lib/reanimated2/ViewDescriptorsSet.js

@@ -0,0 +1,75 @@
+import { useRef } from 'react';
+import { makeMutable } from './core';
+import { shouldBeUseWeb } from './PlatformChecker';
+const scheduleUpdates = shouldBeUseWeb() ? requestAnimationFrame : setImmediate;
+export function makeViewDescriptorsSet() {
+    const ref = useRef(null);
+    if (ref.current === null) {
+        const data = {
+            batchToRemove: new Set(),
+            tags: new Set(),
+            waitForInsertSync: false,
+            waitForRemoveSync: false,
+            sharableViewDescriptors: makeMutable([]),
+            items: [],
+            add: (item) => {
+                if (data.tags.has(item.tag)) {
+                    return;
+                }
+                data.tags.add(item.tag);
+                data.items.push(item);
+                if (!data.waitForInsertSync) {
+                    data.waitForInsertSync = true;
+                    scheduleUpdates(() => {
+                        data.sharableViewDescriptors.value = data.items;
+                        data.waitForInsertSync = false;
+                    });
+                }
+            },
+            remove: (viewTag) => {
+                data.batchToRemove.add(viewTag);
+                if (!data.waitForRemoveSync) {
+                    data.waitForRemoveSync = true;
+                    scheduleUpdates(() => {
+                        const items = [];
+                        for (const item of data.items) {
+                            if (data.batchToRemove.has(item.tag)) {
+                                data.tags.delete(item.tag);
+                            }
+                            else {
+                                items.push(item);
+                            }
+                        }
+                        data.items = items;
+                        data.sharableViewDescriptors.value = items;
+                        data.batchToRemove = new Set();
+                        data.waitForRemoveSync = false;
+                    });
+                }
+            },
+            rebuildsharableViewDescriptors: (sharableViewDescriptors) => {
+                data.sharableViewDescriptors = sharableViewDescriptors;
+            },
+        };
+        ref.current = data;
+    }
+    return ref.current;
+}
+export function makeViewsRefSet() {
+    const ref = useRef(null);
+    if (ref.current === null) {
+        const data = {
+            items: new Set(),
+            add: (item) => {
+                if (data.items.has(item))
+                    return;
+                data.items.add(item);
+            },
+            remove: (item) => {
+                data.items.delete(item);
+            },
+        };
+        ref.current = data;
+    }
+    return ref.current;
+}

package/lib/reanimated2/WorkletEventHandler.js

@@ -0,0 +1,37 @@
+import NativeReanimatedModule from './NativeReanimated';
+function jsListener(eventName, handler) {
+    return (evt) => {
+        handler(Object.assign(Object.assign({}, evt.nativeEvent), { eventName }));
+    };
+}
+export default class WorkletEventHandler {
+    constructor(worklet, eventNames = []) {
+        this.worklet = worklet;
+        this.eventNames = eventNames;
+        this.reattachNeeded = false;
+        this.listeners = {};
+        this.viewTag = undefined;
+        this.registrations = [];
+        if (!NativeReanimatedModule.native) {
+            this.listeners = eventNames.reduce((acc, eventName) => {
+                acc[eventName] = jsListener(eventName, worklet);
+                return acc;
+            }, {});
+        }
+    }
+    updateWorklet(newWorklet) {
+        this.worklet = newWorklet;
+        this.reattachNeeded = true;
+    }
+    registerForEvents(viewTag, fallbackEventName) {
+        this.viewTag = viewTag;
+        this.registrations = this.eventNames.map((eventName) => NativeReanimatedModule.registerEventHandler(viewTag + eventName, this.worklet));
+        if (this.registrations.length === 0 && fallbackEventName) {
+            this.registrations.push(NativeReanimatedModule.registerEventHandler(viewTag + fallbackEventName, this.worklet));
+        }
+    }
+    unregisterFromEvents() {
+        this.registrations.forEach((id) => NativeReanimatedModule.unregisterEventHandler(id));
+        this.registrations = [];
+    }
+}

package/lib/reanimated2/__mocks__/MutableValue.js

@@ -0,0 +1,13 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+export default class MutableValue {
+    constructor(value) {
+        this._value = value;
+    }
+    get value() {
+        return this._value;
+    }
+    set value(nextValue) {
+        this._value = nextValue;
+    }
+}

package/lib/reanimated2/__mocks__/NativeReanimated.js

@@ -0,0 +1,20 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import MutableValue from './MutableValue';
+global._setGlobalConsole = (_val) => {
+    // noop
+};
+const NOOP = () => {
+    // noop
+};
+export default {
+    installCoreFunctions: NOOP,
+    makeShareable: (worklet) => worklet,
+    makeMutable: (init) => new MutableValue(init),
+    makeRemote: NOOP,
+    startMapper: NOOP,
+    stopMapper: NOOP,
+    registerEventHandler: NOOP,
+    unregisterEventHandler: NOOP,
+    getViewProp: NOOP,
+};

package/lib/reanimated2/animation/commonTypes.js

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