react-native-reanimated 2.3.0-alpha.1 → 2.3.0-beta.2

package/lib/reanimated2/hook/useAnimatedGestureHandler.js

@@ -0,0 +1,50 @@
+import { isWeb } from '../PlatformChecker';
+import { useEvent, useHandler } from './Hooks';
+export var EventType;
+(function (EventType) {
+    EventType[EventType["UNDETERMINED"] = 0] = "UNDETERMINED";
+    EventType[EventType["FAILED"] = 1] = "FAILED";
+    EventType[EventType["BEGAN"] = 2] = "BEGAN";
+    EventType[EventType["CANCELLED"] = 3] = "CANCELLED";
+    EventType[EventType["ACTIVE"] = 4] = "ACTIVE";
+    EventType[EventType["END"] = 5] = "END";
+})(EventType || (EventType = {}));
+export function useAnimatedGestureHandler(handlers, dependencies) {
+    const { context, doDependenciesDiffer, useWeb } = useHandler(handlers, dependencies);
+    const handler = (e) => {
+        'worklet';
+        const event = useWeb ? e.nativeEvent : e;
+        if (event.state === EventType.BEGAN && handlers.onStart) {
+            handlers.onStart(event, context);
+        }
+        if (event.state === EventType.ACTIVE && handlers.onActive) {
+            handlers.onActive(event, context);
+        }
+        if (event.oldState === EventType.ACTIVE &&
+            event.state === EventType.END &&
+            handlers.onEnd) {
+            handlers.onEnd(event, context);
+        }
+        if (event.oldState === EventType.BEGAN &&
+            event.state === EventType.FAILED &&
+            handlers.onFail) {
+            handlers.onFail(event, context);
+        }
+        if (event.oldState === EventType.ACTIVE &&
+            event.state === EventType.CANCELLED &&
+            handlers.onCancel) {
+            handlers.onCancel(event, context);
+        }
+        if ((event.oldState === EventType.BEGAN ||
+            event.oldState === EventType.ACTIVE) &&
+            event.state !== EventType.BEGAN &&
+            event.state !== EventType.ACTIVE &&
+            handlers.onFinish) {
+            handlers.onFinish(event, context, event.state === EventType.CANCELLED || event.state === EventType.FAILED);
+        }
+    };
+    if (isWeb()) {
+        return handler;
+    }
+    return useEvent(handler, ['onGestureHandlerStateChange', 'onGestureHandlerEvent'], doDependenciesDiffer);
+}

package/lib/reanimated2/hook/useAnimatedReaction.js

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+import { startMapper, stopMapper } from '../core';
+import { useSharedValue } from './useSharedValue';
+/**
+ * @param prepare - worklet used for data preparation for the second parameter
+ * @param react - worklet which takes data prepared by the one in the first parameter and performs certain actions
+ * the first worklet defines the inputs, in other words on which shared values change will it be called.
+ * the second one can modify any shared values but those which are mentioned in the first worklet. Beware of that, because this may result in endless loop and high cpu usage.
+ */
+export function useAnimatedReaction(prepare, react, dependencies) {
+    var _a, _b;
+    const previous = useSharedValue(null);
+    if (dependencies === undefined) {
+        dependencies = [
+            Object.values((_a = prepare._closure) !== null && _a !== void 0 ? _a : {}),
+            Object.values((_b = react._closure) !== null && _b !== void 0 ? _b : {}),
+            prepare.__workletHash,
+            react.__workletHash,
+        ];
+    }
+    else {
+        dependencies.push(prepare.__workletHash, react.__workletHash);
+    }
+    useEffect(() => {
+        var _a;
+        const fun = () => {
+            'worklet';
+            const input = prepare();
+            react(input, previous.value);
+            previous.value = input;
+        };
+        const mapperId = startMapper(fun, Object.values((_a = prepare._closure) !== null && _a !== void 0 ? _a : {}), []);
+        return () => {
+            stopMapper(mapperId);
+        };
+    }, dependencies);
+}

package/lib/reanimated2/hook/useAnimatedRef.js

@@ -0,0 +1,25 @@
+import { useRef } from 'react';
+import { getTag } from '../NativeMethods';
+import { useSharedValue } from './useSharedValue';
+export function useAnimatedRef() {
+    const tag = useSharedValue(-1);
+    const ref = useRef();
+    if (!ref.current) {
+        const fun = ((component) => {
+            'worklet';
+            // enters when ref is set by attaching to a component
+            if (component) {
+                tag.value = getTag(component);
+                fun.current = component;
+            }
+            return tag.value;
+        });
+        Object.defineProperty(fun, 'current', {
+            value: null,
+            writable: true,
+            enumerable: false,
+        });
+        ref.current = fun;
+    }
+    return ref.current;
+}

package/lib/reanimated2/hook/useAnimatedScrollHandler.js

@@ -0,0 +1,41 @@
+import { useEvent, useHandler } from './Hooks';
+export function useAnimatedScrollHandler(handlers, dependencies) {
+    // case when handlers is a function
+    const scrollHandlers = typeof handlers === 'function' ? { onScroll: handlers } : handlers;
+    const { context, doDependenciesDiffer } = useHandler(scrollHandlers, dependencies);
+    // build event subscription array
+    const subscribeForEvents = ['onScroll'];
+    if (scrollHandlers.onBeginDrag !== undefined) {
+        subscribeForEvents.push('onScrollBeginDrag');
+    }
+    if (scrollHandlers.onEndDrag !== undefined) {
+        subscribeForEvents.push('onScrollEndDrag');
+    }
+    if (scrollHandlers.onMomentumBegin !== undefined) {
+        subscribeForEvents.push('onMomentumScrollBegin');
+    }
+    if (scrollHandlers.onMomentumEnd !== undefined) {
+        subscribeForEvents.push('onMomentumScrollEnd');
+    }
+    return useEvent((event) => {
+        'worklet';
+        const { onScroll, onBeginDrag, onEndDrag, onMomentumBegin, onMomentumEnd, } = scrollHandlers;
+        if (onScroll && event.eventName.endsWith('onScroll')) {
+            onScroll(event, context);
+        }
+        else if (onBeginDrag && event.eventName.endsWith('onScrollBeginDrag')) {
+            onBeginDrag(event, context);
+        }
+        else if (onEndDrag && event.eventName.endsWith('onScrollEndDrag')) {
+            onEndDrag(event, context);
+        }
+        else if (onMomentumBegin &&
+            event.eventName.endsWith('onMomentumScrollBegin')) {
+            onMomentumBegin(event, context);
+        }
+        else if (onMomentumEnd &&
+            event.eventName.endsWith('onMomentumScrollEnd')) {
+            onMomentumEnd(event, context);
+        }
+    }, subscribeForEvents, doDependenciesDiffer);
+}

package/lib/reanimated2/hook/useAnimatedStyle.js

@@ -0,0 +1,376 @@
+/* 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 = [];
+        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();
+    const inputs = Object.values((_a = updater._closure) !== null && _a !== void 0 ? _a : {});
+    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 upadterFn = updater;
+        let optimalization = updater.__optimalization;
+        if (adapters) {
+            upadterFn = () => {
+                'worklet';
+                const newValues = updater();
+                adaptersArray.forEach((adapter) => {
+                    adapter(newValues);
+                });
+                return newValues;
+            };
+        }
+        if (canApplyOptimalisation(upadterFn) && !shouldBeUseWeb()) {
+            if (hasColorProps(upadterFn())) {
+                upadterFn = () => {
+                    'worklet';
+                    const style = upadterFn();
+                    parseColors(style);
+                    return style;
+                };
+            }
+        }
+        else if (!shouldBeUseWeb()) {
+            optimalization = 0;
+            upadterFn = () => {
+                'worklet';
+                const style = upadterFn();
+                parseColors(style);
+                return style;
+            };
+        }
+        if (typeof updater.__optimalization !== undefined) {
+            upadterFn.__optimalization = optimalization;
+        }
+        if (isJest()) {
+            fun = () => {
+                'worklet';
+                jestStyleUpdater(sharableViewDescriptors, updater, remoteState, maybeViewRef, animationsActive, animatedStyle, adaptersArray);
+            };
+        }
+        else {
+            fun = () => {
+                'worklet';
+                styleUpdater(sharableViewDescriptors, upadterFn, remoteState, maybeViewRef, animationsActive);
+            };
+        }
+        const mapperId = startMapper(fun, inputs, [], upadterFn, 
+        // 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,36 @@
+import { useEffect, useRef } from 'react';
+import { initialUpdaterRun } from '../animation';
+import { makeMutable, startMapper, stopMapper } from '../core';
+export function useDerivedValue(processor, dependencies) {
+    var _a;
+    const initRef = useRef(null);
+    const inputs = Object.values((_a = processor._closure) !== null && _a !== void 0 ? _a : {});
+    // 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/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;
+}