react-native-reanimated 2.16.0 → 2.17.0

package/lib/reanimated2/hook/useAnimatedStyle.js

@@ -0,0 +1,402 @@
+/* global _frameTimestamp */
+import { useEffect, useRef } from 'react';
+import { startMapper, stopMapper, makeRemote, requestFrame, getTimestamp, makeMutable, } from '../core';
+import updateProps, { updatePropsJestWrapper } from '../UpdateProps';
+import { initialUpdaterRun } from '../animation';
+import NativeReanimatedModule from '../NativeReanimated';
+import { useSharedValue } from './useSharedValue';
+import { buildWorkletsHash, canApplyOptimalisation, getStyleWithoutAnimations, hasColorProps, isAnimated, parseColors, styleDiff, validateAnimatedStyles, } from './utils';
+import { makeViewDescriptorsSet, makeViewsRefSet, } from '../ViewDescriptorsSet';
+import { isJest, shouldBeUseWeb } from '../PlatformChecker';
+function prepareAnimation(animatedProp, lastAnimation, lastValue) {
+    'worklet';
+    if (Array.isArray(animatedProp)) {
+        animatedProp.forEach((prop, index) => prepareAnimation(prop, lastAnimation && lastAnimation[index], lastValue && lastValue[index]));
+        // return animatedProp;
+    }
+    if (typeof animatedProp === 'object' && animatedProp.onFrame) {
+        const animation = animatedProp;
+        let value = animation.current;
+        if (lastValue !== undefined) {
+            if (typeof lastValue === 'object') {
+                if (lastValue.value !== undefined) {
+                    // previously it was a shared value
+                    value = lastValue.value;
+                }
+                else if (lastValue.onFrame !== undefined) {
+                    if ((lastAnimation === null || lastAnimation === void 0 ? void 0 : lastAnimation.current) !== undefined) {
+                        // it was an animation before, copy its state
+                        value = lastAnimation.current;
+                    }
+                    else if ((lastValue === null || lastValue === void 0 ? void 0 : lastValue.current) !== undefined) {
+                        // it was initialized
+                        value = lastValue.current;
+                    }
+                }
+            }
+            else {
+                // previously it was a plain value, just set it as starting point
+                value = lastValue;
+            }
+        }
+        animation.callStart = (timestamp) => {
+            animation.onStart(animation, value, timestamp, lastAnimation);
+        };
+        animation.callStart(getTimestamp());
+        animation.callStart = null;
+    }
+    else if (typeof animatedProp === 'object') {
+        // it is an object
+        Object.keys(animatedProp).forEach((key) => prepareAnimation(animatedProp[key], lastAnimation && lastAnimation[key], lastValue && lastValue[key]));
+    }
+}
+function runAnimations(animation, timestamp, key, result, animationsActive) {
+    'worklet';
+    if (!animationsActive.value) {
+        return true;
+    }
+    if (Array.isArray(animation)) {
+        result[key] = [];
+        let allFinished = true;
+        animation.forEach((entry, index) => {
+            if (!runAnimations(entry, timestamp, index, result[key], animationsActive)) {
+                allFinished = false;
+            }
+        });
+        return allFinished;
+    }
+    else if (typeof animation === 'object' && animation.onFrame) {
+        let finished = true;
+        if (!animation.finished) {
+            if (animation.callStart) {
+                animation.callStart(timestamp);
+                animation.callStart = null;
+            }
+            finished = animation.onFrame(animation, timestamp);
+            animation.timestamp = timestamp;
+            if (finished) {
+                animation.finished = true;
+                animation.callback && animation.callback(true /* finished */);
+            }
+        }
+        result[key] = animation.current;
+        return finished;
+    }
+    else if (typeof animation === 'object') {
+        result[key] = {};
+        let allFinished = true;
+        Object.keys(animation).forEach((k) => {
+            if (!runAnimations(animation[k], timestamp, k, result[key], animationsActive)) {
+                allFinished = false;
+            }
+        });
+        return allFinished;
+    }
+    else {
+        result[key] = animation;
+        return true;
+    }
+}
+function styleUpdater(viewDescriptors, updater, state, maybeViewRef, animationsActive) {
+    'worklet';
+    var _a, _b;
+    const animations = (_a = state.animations) !== null && _a !== void 0 ? _a : {};
+    const newValues = (_b = updater()) !== null && _b !== void 0 ? _b : {};
+    const oldValues = state.last;
+    let hasAnimations = false;
+    for (const key in newValues) {
+        const value = newValues[key];
+        if (isAnimated(value)) {
+            prepareAnimation(value, animations[key], oldValues[key]);
+            animations[key] = value;
+            hasAnimations = true;
+        }
+        else {
+            delete animations[key];
+        }
+    }
+    if (hasAnimations) {
+        const frame = (timestamp) => {
+            const { animations, last, isAnimationCancelled } = state;
+            if (isAnimationCancelled) {
+                state.isAnimationRunning = false;
+                return;
+            }
+            const updates = {};
+            let allFinished = true;
+            for (const propName in animations) {
+                const finished = runAnimations(animations[propName], timestamp, propName, updates, animationsActive);
+                if (finished) {
+                    last[propName] = updates[propName];
+                    delete animations[propName];
+                }
+                else {
+                    allFinished = false;
+                }
+            }
+            if (updates) {
+                updateProps(viewDescriptors, updates, maybeViewRef);
+            }
+            if (!allFinished) {
+                requestFrame(frame);
+            }
+            else {
+                state.isAnimationRunning = false;
+            }
+        };
+        state.animations = animations;
+        if (!state.isAnimationRunning) {
+            state.isAnimationCancelled = false;
+            state.isAnimationRunning = true;
+            if (_frameTimestamp) {
+                frame(_frameTimestamp);
+            }
+            else {
+                requestFrame(frame);
+            }
+        }
+        state.last = Object.assign({}, oldValues, newValues);
+        const style = getStyleWithoutAnimations(state.last);
+        if (style) {
+            updateProps(viewDescriptors, style, maybeViewRef);
+        }
+    }
+    else {
+        state.isAnimationCancelled = true;
+        state.animations = [];
+        const diff = styleDiff(oldValues, newValues);
+        state.last = Object.assign({}, oldValues, newValues);
+        if (diff) {
+            updateProps(viewDescriptors, newValues, maybeViewRef);
+        }
+    }
+}
+function jestStyleUpdater(viewDescriptors, updater, state, maybeViewRef, animationsActive, animatedStyle, adapters = []) {
+    'worklet';
+    var _a, _b;
+    const animations = (_a = state.animations) !== null && _a !== void 0 ? _a : {};
+    const newValues = (_b = updater()) !== null && _b !== void 0 ? _b : {};
+    const oldValues = state.last;
+    // extract animated props
+    let hasAnimations = false;
+    Object.keys(animations).forEach((key) => {
+        const value = newValues[key];
+        if (!isAnimated(value)) {
+            delete animations[key];
+        }
+    });
+    Object.keys(newValues).forEach((key) => {
+        const value = newValues[key];
+        if (isAnimated(value)) {
+            prepareAnimation(value, animations[key], oldValues[key]);
+            animations[key] = value;
+            hasAnimations = true;
+        }
+    });
+    function frame(timestamp) {
+        const { animations, last, isAnimationCancelled } = state;
+        if (isAnimationCancelled) {
+            state.isAnimationRunning = false;
+            return;
+        }
+        const updates = {};
+        let allFinished = true;
+        Object.keys(animations).forEach((propName) => {
+            const finished = runAnimations(animations[propName], timestamp, propName, updates, animationsActive);
+            if (finished) {
+                last[propName] = updates[propName];
+                delete animations[propName];
+            }
+            else {
+                allFinished = false;
+            }
+        });
+        if (Object.keys(updates).length) {
+            updatePropsJestWrapper(viewDescriptors, updates, maybeViewRef, animatedStyle, adapters);
+        }
+        if (!allFinished) {
+            requestFrame(frame);
+        }
+        else {
+            state.isAnimationRunning = false;
+        }
+    }
+    if (hasAnimations) {
+        state.animations = animations;
+        if (!state.isAnimationRunning) {
+            state.isAnimationCancelled = false;
+            state.isAnimationRunning = true;
+            if (_frameTimestamp) {
+                frame(_frameTimestamp);
+            }
+            else {
+                requestFrame(frame);
+            }
+        }
+    }
+    else {
+        state.isAnimationCancelled = true;
+        state.animations = [];
+    }
+    // calculate diff
+    const diff = styleDiff(oldValues, newValues);
+    state.last = Object.assign({}, oldValues, newValues);
+    if (Object.keys(diff).length !== 0) {
+        updatePropsJestWrapper(viewDescriptors, diff, maybeViewRef, animatedStyle, adapters);
+    }
+}
+// check for invalid usage of shared values in returned object
+function checkSharedValueUsage(prop, currentKey) {
+    if (Array.isArray(prop)) {
+        // if it's an array (i.ex. transform) validate all its elements
+        for (const element of prop) {
+            checkSharedValueUsage(element, currentKey);
+        }
+    }
+    else if (typeof prop === 'object' && prop.value === undefined) {
+        // if it's a nested object, run validation for all its props
+        for (const key of Object.keys(prop)) {
+            checkSharedValueUsage(prop[key], key);
+        }
+    }
+    else if (currentKey !== undefined &&
+        typeof prop === 'object' &&
+        prop.value !== undefined) {
+        // if shared value is passed insted of its value, throw an error
+        throw new Error(`invalid value passed to \`${currentKey}\`, maybe you forgot to use \`.value\`?`);
+    }
+}
+export function useAnimatedStyle(updater, dependencies, adapters) {
+    var _a, _b;
+    const viewsRef = makeViewsRefSet();
+    const viewDescriptors = makeViewDescriptorsSet();
+    const initRef = useRef();
+    let inputs = Object.values((_a = updater._closure) !== null && _a !== void 0 ? _a : {});
+    if (shouldBeUseWeb()) {
+        if (!inputs.length && (dependencies === null || dependencies === void 0 ? void 0 : dependencies.length)) {
+            // let web work without a Babel/SWC plugin
+            inputs = dependencies;
+        }
+        if (__DEV__ && !inputs.length && !dependencies && !updater.__workletHash) {
+            console.error(`useAnimatedStyle was used without a dependency array or Babel plugin. Please explicitly pass a dependency array, or enable the Babel/SWC plugin. For more, see the docs: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/web-support#web-without-a-babel-plugin`);
+        }
+    }
+    const adaptersArray = adapters
+        ? Array.isArray(adapters)
+            ? adapters
+            : [adapters]
+        : [];
+    const adaptersHash = adapters ? buildWorkletsHash(adaptersArray) : null;
+    const animationsActive = useSharedValue(true);
+    const animatedStyle = useRef({});
+    // build dependencies
+    if (!dependencies) {
+        dependencies = [...inputs, updater.__workletHash];
+    }
+    else {
+        dependencies.push(updater.__workletHash);
+    }
+    adaptersHash && dependencies.push(adaptersHash);
+    if (!initRef.current) {
+        const initialStyle = initialUpdaterRun(updater);
+        validateAnimatedStyles(initialStyle);
+        initRef.current = {
+            initial: {
+                value: initialStyle,
+                updater: updater,
+            },
+            remoteState: makeRemote({ last: initialStyle }),
+            sharableViewDescriptors: makeMutable([]),
+        };
+        viewDescriptors.rebuildsharableViewDescriptors(
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        initRef.current.sharableViewDescriptors);
+    }
+    dependencies.push((_b = initRef.current) === null || _b === void 0 ? void 0 : _b.sharableViewDescriptors.value);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const { initial, remoteState, sharableViewDescriptors } = initRef.current;
+    const maybeViewRef = NativeReanimatedModule.native ? undefined : viewsRef;
+    useEffect(() => {
+        let fun;
+        let updaterFn = updater;
+        let optimalization = updater.__optimalization;
+        if (adapters) {
+            updaterFn = () => {
+                'worklet';
+                const newValues = updater();
+                adaptersArray.forEach((adapter) => {
+                    adapter(newValues);
+                });
+                return newValues;
+            };
+        }
+        if (canApplyOptimalisation(updaterFn) && !shouldBeUseWeb()) {
+            if (hasColorProps(updaterFn())) {
+                updaterFn = () => {
+                    'worklet';
+                    const newValues = updaterFn();
+                    const oldValues = remoteState.last;
+                    const diff = styleDiff(oldValues, newValues);
+                    remoteState.last = Object.assign({}, oldValues, newValues);
+                    parseColors(diff);
+                    return diff;
+                };
+            }
+            else {
+                updaterFn = () => {
+                    'worklet';
+                    const newValues = updaterFn();
+                    const oldValues = remoteState.last;
+                    const diff = styleDiff(oldValues, newValues);
+                    remoteState.last = Object.assign({}, oldValues, newValues);
+                    return diff;
+                };
+            }
+        }
+        else if (!shouldBeUseWeb()) {
+            optimalization = 0;
+            updaterFn = () => {
+                'worklet';
+                const style = updaterFn();
+                parseColors(style);
+                return style;
+            };
+        }
+        if (typeof updater.__optimalization !== undefined) {
+            updaterFn.__optimalization = optimalization;
+        }
+        if (isJest()) {
+            fun = () => {
+                'worklet';
+                jestStyleUpdater(sharableViewDescriptors, updater, remoteState, maybeViewRef, animationsActive, animatedStyle, adaptersArray);
+            };
+        }
+        else {
+            fun = () => {
+                'worklet';
+                styleUpdater(sharableViewDescriptors, updaterFn, remoteState, maybeViewRef, animationsActive);
+            };
+        }
+        const mapperId = startMapper(fun, inputs, [], updaterFn, 
+        // TODO fix this
+        sharableViewDescriptors);
+        return () => {
+            stopMapper(mapperId);
+        };
+    }, dependencies);
+    useEffect(() => {
+        animationsActive.value = true;
+        return () => {
+            // initRef.current = null;
+            // viewsRef = null;
+            animationsActive.value = false;
+        };
+    }, []);
+    checkSharedValueUsage(initial.value);
+    if (process.env.JEST_WORKER_ID) {
+        return { viewDescriptors, initial: initial, viewsRef, animatedStyle };
+    }
+    else {
+        return { viewDescriptors, initial: initial, viewsRef };
+    }
+}

package/lib/reanimated2/hook/useDerivedValue.js

@@ -0,0 +1,43 @@
+import { useEffect, useRef } from 'react';
+import { initialUpdaterRun } from '../animation';
+import { makeMutable, startMapper, stopMapper } from '../core';
+import { shouldBeUseWeb } from '../PlatformChecker';
+export function useDerivedValue(processor, dependencies) {
+    var _a;
+    const initRef = useRef(null);
+    let inputs = Object.values((_a = processor._closure) !== null && _a !== void 0 ? _a : {});
+    if (shouldBeUseWeb()) {
+        if (!inputs.length && (dependencies === null || dependencies === void 0 ? void 0 : dependencies.length)) {
+            // let web work without a Babel/SWC plugin
+            inputs = dependencies;
+        }
+    }
+    // build dependencies
+    if (dependencies === undefined) {
+        dependencies = [...inputs, processor.__workletHash];
+    }
+    else {
+        dependencies.push(processor.__workletHash);
+    }
+    if (initRef.current === null) {
+        initRef.current = makeMutable(initialUpdaterRun(processor));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const sharedValue = initRef.current;
+    useEffect(() => {
+        const fun = () => {
+            'worklet';
+            sharedValue.value = processor();
+        };
+        const mapperId = startMapper(fun, inputs, [sharedValue]);
+        return () => {
+            stopMapper(mapperId);
+        };
+    }, dependencies);
+    useEffect(() => {
+        return () => {
+            initRef.current = null;
+        };
+    }, []);
+    return sharedValue;
+}

package/lib/reanimated2/hook/useFrameCallback.js

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react';
+import FrameCallbackRegistryJS from '../frameCallback/FrameCallbackRegistryJS';
+const frameCallbackRegistry = new FrameCallbackRegistryJS();
+export function useFrameCallback(callback, autostart = true) {
+    const ref = useRef({
+        setActive: (isActive) => {
+            frameCallbackRegistry.manageStateFrameCallback(ref.current.callbackId, isActive);
+            ref.current.isActive = isActive;
+        },
+        isActive: autostart,
+        callbackId: -1,
+    });
+    useEffect(() => {
+        ref.current.callbackId =
+            frameCallbackRegistry.registerFrameCallback(callback);
+        ref.current.setActive(ref.current.isActive);
+        return () => {
+            frameCallbackRegistry.unregisterFrameCallback(ref.current.callbackId);
+            ref.current.callbackId = -1;
+        };
+    }, [callback, autostart]);
+    return ref.current;
+}

package/lib/reanimated2/hook/useScrollViewOffset.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+import { findNodeHandle } from 'react-native';
+import { useEvent } from './utils';
+import { useSharedValue } from './useSharedValue';
+const subscribeForEvents = [
+    'onScroll',
+    'onScrollBeginDrag',
+    'onScrollEndDrag',
+    'onMomentumScrollBegin',
+    'onMomentumScrollEnd',
+];
+export function useScrollViewOffset(aref) {
+    const offsetRef = useRef(useSharedValue(0));
+    const event = useEvent((event) => {
+        'worklet';
+        offsetRef.current.value =
+            event.contentOffset.x === 0
+                ? event.contentOffset.y
+                : event.contentOffset.x;
+    }, subscribeForEvents);
+    useEffect(() => {
+        var _a;
+        const viewTag = findNodeHandle(aref.current);
+        (_a = event.current) === null || _a === void 0 ? void 0 : _a.registerForEvents(viewTag);
+    }, [aref.current]);
+    return offsetRef.current;
+}

package/lib/reanimated2/hook/useSharedValue.js

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+import { cancelAnimation } from '../animation';
+import { makeMutable } from '../core';
+export function useSharedValue(init) {
+    const ref = useRef(makeMutable(init));
+    if (ref.current === null) {
+        ref.current = makeMutable(init);
+    }
+    useEffect(() => {
+        return () => {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            cancelAnimation(ref.current);
+        };
+    }, []);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return ref.current;
+}

package/lib/reanimated2/hook/utils.js

@@ -0,0 +1,165 @@
+import { useEffect, useRef } from 'react';
+import { processColor } from '../Colors';
+import { makeRemote } from '../core';
+import { isWeb, isJest } from '../PlatformChecker';
+import { colorProps } from '../UpdateProps';
+import WorkletEventHandler from '../WorkletEventHandler';
+export function useEvent(handler, eventNames = [], rebuild = false) {
+    const initRef = useRef(null);
+    if (initRef.current === null) {
+        initRef.current = new WorkletEventHandler(handler, eventNames);
+    }
+    else if (rebuild) {
+        initRef.current.updateWorklet(handler);
+    }
+    return initRef;
+}
+export function useHandler(handlers, dependencies) {
+    const initRef = useRef(null);
+    if (initRef.current === null) {
+        initRef.current = {
+            context: makeRemote({}),
+            savedDependencies: [],
+        };
+    }
+    useEffect(() => {
+        return () => {
+            initRef.current = null;
+        };
+    }, []);
+    const { context, savedDependencies } = initRef.current;
+    dependencies = buildDependencies(dependencies, handlers);
+    const doDependenciesDiffer = !areDependenciesEqual(dependencies, savedDependencies);
+    initRef.current.savedDependencies = dependencies;
+    const useWeb = isWeb() || isJest();
+    return { context, doDependenciesDiffer, useWeb };
+}
+// builds one big hash from multiple worklets' hashes
+export function buildWorkletsHash(handlers) {
+    return Object.values(handlers).reduce((acc, worklet) => 
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    acc + worklet.__workletHash.toString(), '');
+}
+// builds dependencies array for gesture handlers
+export function buildDependencies(dependencies, handlers) {
+    const handlersList = Object.values(handlers).filter((handler) => handler !== undefined);
+    if (!dependencies) {
+        dependencies = handlersList.map((handler) => {
+            return {
+                workletHash: handler.__workletHash,
+                closure: handler._closure,
+            };
+        });
+    }
+    else {
+        dependencies.push(buildWorkletsHash(handlersList));
+    }
+    return dependencies;
+}
+// this is supposed to work as useEffect comparison
+export function areDependenciesEqual(nextDeps, prevDeps) {
+    function is(x, y) {
+        /* eslint-disable no-self-compare */
+        return (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y);
+        /* eslint-enable no-self-compare */
+    }
+    const objectIs = typeof Object.is === 'function' ? Object.is : is;
+    function areHookInputsEqual(nextDeps, prevDeps) {
+        if (!nextDeps || !prevDeps || prevDeps.length !== nextDeps.length) {
+            return false;
+        }
+        for (let i = 0; i < prevDeps.length; ++i) {
+            if (!objectIs(nextDeps[i], prevDeps[i])) {
+                return false;
+            }
+        }
+        return true;
+    }
+    return areHookInputsEqual(nextDeps, prevDeps);
+}
+export function hasColorProps(updates) {
+    const colorPropsSet = new Set(colorProps);
+    for (const key in updates) {
+        if (colorPropsSet.has(key)) {
+            return true;
+        }
+    }
+    return false;
+}
+export function parseColors(updates) {
+    'worklet';
+    for (const key in updates) {
+        if (colorProps.indexOf(key) !== -1) {
+            // 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;
+            }
+        }
+    }
+}
+export function canApplyOptimalisation(upadterFn) {
+    const FUNCTIONLESS_FLAG = 0b00000001;
+    const STATEMENTLESS_FLAG = 0b00000010;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const optimalization = upadterFn.__optimalization;
+    return (optimalization & FUNCTIONLESS_FLAG && optimalization & STATEMENTLESS_FLAG);
+}
+export function isAnimated(prop) {
+    'worklet';
+    if (Array.isArray(prop)) {
+        return prop.some(isAnimated);
+    }
+    else if (typeof prop === 'object') {
+        if (prop.onFrame !== undefined) {
+            return true;
+        }
+        else {
+            return Object.values(prop).some(isAnimated);
+        }
+    }
+    return false;
+}
+export function styleDiff(oldStyle, newStyle) {
+    'worklet';
+    const diff = {};
+    for (const key in oldStyle) {
+        if (newStyle[key] === undefined) {
+            diff[key] = null;
+        }
+    }
+    for (const key in newStyle) {
+        const value = newStyle[key];
+        const oldValue = oldStyle[key];
+        if (isAnimated(value)) {
+            // do nothing
+            continue;
+        }
+        if (oldValue !== value) {
+            diff[key] = value;
+        }
+    }
+    return diff;
+}
+export function getStyleWithoutAnimations(newStyle) {
+    'worklet';
+    const diff = {};
+    for (const key in newStyle) {
+        const value = newStyle[key];
+        if (isAnimated(value)) {
+            continue;
+        }
+        diff[key] = value;
+    }
+    return diff;
+}
+export const validateAnimatedStyles = (styles) => {
+    'worklet';
+    if (typeof styles !== 'object') {
+        throw new Error(`useAnimatedStyle has to return an object, found ${typeof styles} instead`);
+    }
+    else if (Array.isArray(styles)) {
+        throw new Error('useAnimatedStyle has to return an object and cannot return static styles combined with dynamic ones. Please do merging where a component receives props.');
+    }
+};

package/lib/reanimated2/index.js

@@ -0,0 +1,12 @@
+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';