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

package/lib/reanimated2/NativeReanimated/index.js

@@ -0,0 +1,15 @@
+import reanimatedJS from '../js-reanimated';
+import { nativeShouldBeMock } from '../PlatformChecker';
+import { Platform } from 'react-native';
+import { NativeReanimated } from './NativeReanimated';
+let exportedModule;
+if (nativeShouldBeMock()) {
+    exportedModule = reanimatedJS;
+}
+else {
+    exportedModule = new NativeReanimated();
+    if (exportedModule.useOnlyV1 && Platform.OS === 'android') {
+        console.warn(`If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/installation`);
+    }
+}
+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

@@ -1,6 +1,15 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import { createAnimatedPropAdapter } from './core';
+// @ts-ignore JS file
+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;
@@ -23,7 +32,8 @@ export const SVGAdapter = createAnimatedPropAdapter((props) => {
         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 arr = props.transform
+            const transform = props.transform;
+            const arr = transform
                 .replace('translate(', '')
                 .replace(')', '')
                 .split(' ');

package/lib/reanimated2/UpdateProps.js

@@ -1,10 +1,7 @@
-/* global _updateProps */
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import { processColor } from './Colors';
 import { makeShareable, isConfigured } from './core';
-import { Platform } from 'react-native';
 import { _updatePropsJS } from './js-reanimated';
+import { shouldBeUseWeb } from './PlatformChecker';
 // copied from react-native/Libraries/Components/View/ReactNativeStyleAttributes
 export const colorProps = [
     'backgroundColor',
@@ -24,29 +21,35 @@ export const colorProps = [
 ];
 const ColorProperties = !isConfigured() ? [] : makeShareable(colorProps);
 let updatePropsByPlatform;
-if (Platform.OS === 'web' || process.env.JEST_WORKER_ID) {
-    updatePropsByPlatform = (viewDescriptor, updates, maybeViewRef) => {
+if (shouldBeUseWeb()) {
+    updatePropsByPlatform = (_, updates, maybeViewRef) => {
         'worklet';
-        _updatePropsJS(viewDescriptor.value.tag, null, updates, maybeViewRef);
+        if (maybeViewRef) {
+            maybeViewRef.items.forEach((item, _) => {
+                _updatePropsJS(updates, item);
+            });
+        }
     };
 }
 else {
-    updatePropsByPlatform = (viewDescriptor, updates, _) => {
+    updatePropsByPlatform = (viewDescriptors, updates, _) => {
         'worklet';
         for (const key in updates) {
             if (ColorProperties.indexOf(key) !== -1) {
                 updates[key] = processColor(updates[key]);
             }
         }
-        _updateProps(viewDescriptor.value.tag, viewDescriptor.value.name || 'RCTView', updates);
+        viewDescriptors.value.forEach((viewDescriptor) => {
+            _updateProps(viewDescriptor.tag, viewDescriptor.name || 'RCTView', updates);
+        });
     };
 }
 export const updateProps = updatePropsByPlatform;
-export const updatePropsJestWrapper = (viewDescriptor, updates, maybeViewRef, animatedStyle, adapters) => {
+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(viewDescriptor, updates, maybeViewRef);
+    updateProps(viewDescriptors, updates, maybeViewRef);
 };
 export default updateProps;

package/lib/reanimated2/ViewDescriptorsSet.js

@@ -0,0 +1,73 @@
+import { useRef } from 'react';
+import { makeMutable } from './core';
+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;
+                    setImmediate(() => {
+                        data.sharableViewDescriptors.value = data.items;
+                        data.waitForInsertSync = false;
+                    });
+                }
+            },
+            remove: (viewTag) => {
+                data.batchToRemove.add(viewTag);
+                if (!data.waitForRemoveSync) {
+                    data.waitForRemoveSync = true;
+                    setImmediate(() => {
+                        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

@@ -1,15 +1,18 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import NativeModule from './NativeReanimated';
-const jsListener = (eventName, handler) => (evt) => {
-    handler(Object.assign(Object.assign({}, evt.nativeEvent), { eventName }));
-};
+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;
-        if (!NativeModule.native) {
+        this.listeners = {};
+        this.viewTag = undefined;
+        this.registrations = [];
+        if (!NativeReanimatedModule.native) {
             this.listeners = eventNames.reduce((acc, eventName) => {
                 acc[eventName] = jsListener(eventName, worklet);
                 return acc;
@@ -20,16 +23,15 @@ export default class WorkletEventHandler {
         this.worklet = newWorklet;
         this.reattachNeeded = true;
     }
-    registerForEvents(viewTag, fallbackEventName = undefined) {
+    registerForEvents(viewTag, fallbackEventName) {
         this.viewTag = viewTag;
-        this.registrations = this.eventNames.map((eventName) => NativeModule.registerEventHandler(viewTag + eventName, this.worklet));
+        this.registrations = this.eventNames.map((eventName) => NativeReanimatedModule.registerEventHandler(viewTag + eventName, this.worklet));
         if (this.registrations.length === 0 && fallbackEventName) {
-            this.registrations.push(NativeModule.registerEventHandler(viewTag + fallbackEventName, this.worklet));
+            this.registrations.push(NativeReanimatedModule.registerEventHandler(viewTag + fallbackEventName, this.worklet));
         }
     }
     unregisterFromEvents() {
-        this.registrations &&
-            this.registrations.forEach((id) => NativeModule.unregisterEventHandler(id));
-        this.registrations = undefined;
+        this.registrations.forEach((id) => NativeReanimatedModule.unregisterEventHandler(id));
+        this.registrations = [];
     }
 }

package/lib/reanimated2/animation/commonTypes.js

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

package/lib/reanimated2/animation/decay.js

@@ -0,0 +1,71 @@
+import { defineAnimation } from './util';
+import { Platform } from 'react-native';
+export function withDecay(userConfig, callback) {
+    'worklet';
+    return defineAnimation(0, () => {
+        'worklet';
+        var _a;
+        const config = {
+            deceleration: 0.998,
+            velocityFactor: Platform.OS !== 'web' ? 1 : 1000,
+            velocity: 0,
+        };
+        if (userConfig) {
+            Object.keys(userConfig).forEach((key) => (config[key] = userConfig[key]));
+        }
+        const VELOCITY_EPS = Platform.OS !== 'web' ? 1 : 1 / 20;
+        const SLOPE_FACTOR = 0.1;
+        function decay(animation, now) {
+            const { lastTimestamp, startTimestamp, initialVelocity, current, velocity, } = animation;
+            const deltaTime = Math.min(now - lastTimestamp, 64);
+            const v = velocity *
+                Math.exp(-(1 - config.deceleration) * (now - startTimestamp) * SLOPE_FACTOR);
+            animation.current =
+                current + (v * config.velocityFactor * deltaTime) / 1000; // /1000 because time is in ms not in s
+            animation.velocity = v;
+            animation.lastTimestamp = now;
+            if (config.clamp) {
+                if (initialVelocity < 0 && animation.current <= config.clamp[0]) {
+                    animation.current = config.clamp[0];
+                    return true;
+                }
+                else if (initialVelocity > 0 &&
+                    animation.current >= config.clamp[1]) {
+                    animation.current = config.clamp[1];
+                    return true;
+                }
+            }
+            return Math.abs(v) < VELOCITY_EPS;
+        }
+        function validateConfig() {
+            if (config.clamp) {
+                if (!Array.isArray(config.clamp)) {
+                    throw Error(`config.clamp must be an array but is ${typeof config.clamp}`);
+                }
+                if (config.clamp.length !== 2) {
+                    throw Error(`clamp array must contain 2 items but is given ${config.clamp.length}`);
+                }
+            }
+            if (config.velocityFactor <= 0) {
+                throw Error(`config.velocityFactor must be greather then 0 but is ${config.velocityFactor}`);
+            }
+        }
+        function onStart(animation, value, now) {
+            animation.current = value;
+            animation.lastTimestamp = now;
+            animation.startTimestamp = now;
+            animation.initialVelocity = config.velocity;
+            validateConfig();
+        }
+        return {
+            onFrame: decay,
+            onStart,
+            callback,
+            velocity: (_a = config.velocity) !== null && _a !== void 0 ? _a : 0,
+            initialVelocity: 0,
+            current: 0,
+            lastTimestamp: 0,
+            startTimestamp: 0,
+        };
+    });
+}

package/lib/reanimated2/animation/delay.js

@@ -0,0 +1,64 @@
+import { defineAnimation } from './util';
+export function withDelay(delayMs, _nextAnimation) {
+    'worklet';
+    return defineAnimation(_nextAnimation, () => {
+        'worklet';
+        const nextAnimation = typeof _nextAnimation === 'function' ? _nextAnimation() : _nextAnimation;
+        function delay(animation, now) {
+            const { startTime, started, previousAnimation } = animation;
+            if (now - startTime > delayMs) {
+                if (!started) {
+                    nextAnimation.onStart(nextAnimation, animation.current, now, previousAnimation);
+                    animation.previousAnimation = null;
+                    animation.started = true;
+                }
+                const finished = nextAnimation.onFrame(nextAnimation, now);
+                animation.current = nextAnimation.current;
+                return finished;
+            }
+            else if (previousAnimation) {
+                const finished = previousAnimation.finished ||
+                    previousAnimation.onFrame(previousAnimation, now);
+                animation.current = previousAnimation.current;
+                if (finished) {
+                    animation.previousAnimation = null;
+                }
+            }
+            return false;
+        }
+        function onStart(animation, value, now, previousAnimation) {
+            animation.startTime = now;
+            animation.started = false;
+            animation.current = value;
+            if (previousAnimation === animation) {
+                animation.previousAnimation = previousAnimation.previousAnimation;
+            }
+            else {
+                animation.previousAnimation = previousAnimation;
+            }
+        }
+        const callback = (finished) => {
+            if (nextAnimation.callback) {
+                nextAnimation.callback(finished);
+            }
+        };
+        return {
+            isHigherOrder: true,
+            onFrame: delay,
+            onStart,
+            current: nextAnimation.current,
+            callback,
+            previousAnimation: null,
+            startTime: 0,
+            started: false,
+        };
+    });
+}
+/**
+ * @deprecated Kept for backward compatibility. Will be removed soon.
+ */
+export function delay(delayMs, _nextAnimation) {
+    'worklet';
+    console.warn('Method `delay` is deprecated. Please use `withDelay` instead');
+    return withDelay(delayMs, _nextAnimation);
+}

package/lib/reanimated2/animation/index.js

@@ -0,0 +1,8 @@
+export { cancelAnimation, defineAnimation, initialUpdaterRun } from './util';
+export { withTiming } from './timing';
+export { withSpring } from './spring';
+export { withDecay } from './decay';
+export { withDelay } from './delay';
+export { withRepeat } from './repeat';
+export { withSequence } from './sequence';
+export { withStyleAnimation } from './styleAnimation';

package/lib/reanimated2/animation/repeat.js

@@ -0,0 +1,69 @@
+import { defineAnimation } from './util';
+export function withRepeat(_nextAnimation, numberOfReps = 2, reverse = false, callback) {
+    'worklet';
+    return defineAnimation(_nextAnimation, () => {
+        'worklet';
+        const nextAnimation = typeof _nextAnimation === 'function' ? _nextAnimation() : _nextAnimation;
+        function repeat(animation, now) {
+            const finished = nextAnimation.onFrame(nextAnimation, now);
+            animation.current = nextAnimation.current;
+            if (finished) {
+                animation.reps += 1;
+                // call inner animation's callback on every repetition
+                // as the second argument the animation's current value is passed
+                if (nextAnimation.callback) {
+                    nextAnimation.callback(true /* finished */, animation.current);
+                }
+                if (numberOfReps > 0 && animation.reps >= numberOfReps) {
+                    return true;
+                }
+                const startValue = reverse
+                    ? nextAnimation.current
+                    : animation.startValue;
+                if (reverse) {
+                    nextAnimation.toValue = animation.startValue;
+                    animation.startValue = startValue;
+                }
+                nextAnimation.onStart(nextAnimation, startValue, now, nextAnimation.previousAnimation);
+                return false;
+            }
+            return false;
+        }
+        const repCallback = (finished) => {
+            if (callback) {
+                callback(finished);
+            }
+            // when cancelled call inner animation's callback
+            if (!finished && nextAnimation.callback) {
+                nextAnimation.callback(false /* finished */);
+            }
+        };
+        function onStart(animation, value, now, previousAnimation) {
+            animation.startValue = value;
+            animation.reps = 0;
+            nextAnimation.onStart(nextAnimation, value, now, previousAnimation);
+        }
+        return {
+            isHigherOrder: true,
+            onFrame: repeat,
+            onStart,
+            reps: 0,
+            current: nextAnimation.current,
+            callback: repCallback,
+            startValue: 0,
+        };
+    });
+}
+/**
+ * @deprecated Kept for backward compatibility. Will be removed soon.
+ */
+export function repeat(_nextAnimation, numberOfReps = 2, reverse = false, callback) {
+    'worklet';
+    console.warn('Method `repeat` is deprecated. Please use `withRepeat` instead');
+    return withRepeat(_nextAnimation, numberOfReps, reverse, callback);
+}
+export function loop(nextAnimation, numberOfLoops = 1) {
+    'worklet';
+    console.warn('Method `loop` is deprecated. Please use `withRepeat` instead');
+    return repeat(nextAnimation, Math.round(numberOfLoops * 2), true);
+}

package/lib/reanimated2/animation/sequence.js

@@ -0,0 +1,72 @@
+import { defineAnimation } from './util';
+export function withSequence(..._animations) {
+    'worklet';
+    return defineAnimation(_animations[0], () => {
+        'worklet';
+        const animations = _animations.map((a) => {
+            const result = typeof a === 'function' ? a() : a;
+            result.finished = false;
+            return result;
+        });
+        const firstAnimation = animations[0];
+        const callback = (finished) => {
+            if (finished) {
+                // we want to call the callback after every single animation
+                // not after all of them
+                return;
+            }
+            // this is going to be called only if sequence has been cancelled
+            animations.forEach((animation) => {
+                if (typeof animation.callback === 'function' && !animation.finished) {
+                    animation.callback(finished);
+                }
+            });
+        };
+        function sequence(animation, now) {
+            const currentAnim = animations[animation.animationIndex];
+            const finished = currentAnim.onFrame(currentAnim, now);
+            animation.current = currentAnim.current;
+            if (finished) {
+                // we want to call the callback after every single animation
+                if (currentAnim.callback) {
+                    currentAnim.callback(true /* finished */);
+                }
+                currentAnim.finished = true;
+                animation.animationIndex += 1;
+                if (animation.animationIndex < animations.length) {
+                    const nextAnim = animations[animation.animationIndex];
+                    nextAnim.onStart(nextAnim, currentAnim.current, now, currentAnim);
+                    return false;
+                }
+                return true;
+            }
+            return false;
+        }
+        function onStart(animation, value, now, previousAnimation) {
+            if (animations.length === 1) {
+                throw Error('withSequence() animation require more than one animation as argument');
+            }
+            animation.animationIndex = 0;
+            if (previousAnimation === undefined) {
+                previousAnimation = animations[animations.length - 1];
+            }
+            firstAnimation.onStart(firstAnimation, value, now, previousAnimation);
+        }
+        return {
+            isHigherOrder: true,
+            onFrame: sequence,
+            onStart,
+            animationIndex: 0,
+            current: firstAnimation.current,
+            callback,
+        };
+    });
+}
+/**
+ * @deprecated Kept for backward compatibility. Will be removed soon.
+ */
+export function sequence(..._animations) {
+    'worklet';
+    console.warn('Method `sequence` is deprecated. Please use `withSequence` instead');
+    return withSequence(..._animations);
+}

package/lib/reanimated2/animation/spring.js

@@ -0,0 +1,101 @@
+import { defineAnimation } from './util';
+export function withSpring(toValue, userConfig, callback) {
+    'worklet';
+    return defineAnimation(toValue, () => {
+        'worklet';
+        // TODO: figure out why we can't use spread or Object.assign here
+        // when user config is "frozen object" we can't enumerate it (perhaps
+        // something is wrong with the object prototype).
+        const config = {
+            damping: 10,
+            mass: 1,
+            stiffness: 100,
+            overshootClamping: false,
+            restDisplacementThreshold: 0.01,
+            restSpeedThreshold: 2,
+            velocity: 0,
+        };
+        if (userConfig) {
+            Object.keys(userConfig).forEach((key) => (config[key] = userConfig[key]));
+        }
+        function spring(animation, now) {
+            const { toValue, lastTimestamp, current, velocity } = animation;
+            const deltaTime = Math.min(now - lastTimestamp, 64);
+            animation.lastTimestamp = now;
+            const c = config.damping;
+            const m = config.mass;
+            const k = config.stiffness;
+            const v0 = -velocity;
+            const x0 = toValue - current;
+            const zeta = c / (2 * Math.sqrt(k * m)); // damping ratio
+            const omega0 = Math.sqrt(k / m); // undamped angular frequency of the oscillator (rad/ms)
+            const omega1 = omega0 * Math.sqrt(1 - Math.pow(zeta, 2)); // exponential decay
+            const t = deltaTime / 1000;
+            const sin1 = Math.sin(omega1 * t);
+            const cos1 = Math.cos(omega1 * t);
+            // under damped
+            const underDampedEnvelope = Math.exp(-zeta * omega0 * t);
+            const underDampedFrag1 = underDampedEnvelope *
+                (sin1 * ((v0 + zeta * omega0 * x0) / omega1) + x0 * cos1);
+            const underDampedPosition = toValue - underDampedFrag1;
+            // This looks crazy -- it's actually just the derivative of the oscillation function
+            const underDampedVelocity = zeta * omega0 * underDampedFrag1 -
+                underDampedEnvelope *
+                    (cos1 * (v0 + zeta * omega0 * x0) - omega1 * x0 * sin1);
+            // critically damped
+            const criticallyDampedEnvelope = Math.exp(-omega0 * t);
+            const criticallyDampedPosition = toValue - criticallyDampedEnvelope * (x0 + (v0 + omega0 * x0) * t);
+            const criticallyDampedVelocity = criticallyDampedEnvelope *
+                (v0 * (t * omega0 - 1) + t * x0 * omega0 * omega0);
+            const isOvershooting = () => {
+                if (config.overshootClamping && config.stiffness !== 0) {
+                    return current < toValue
+                        ? animation.current > toValue
+                        : animation.current < toValue;
+                }
+                else {
+                    return false;
+                }
+            };
+            const isVelocity = Math.abs(velocity) < config.restSpeedThreshold;
+            const isDisplacement = config.stiffness === 0 ||
+                Math.abs(toValue - current) < config.restDisplacementThreshold;
+            if (zeta < 1) {
+                animation.current = underDampedPosition;
+                animation.velocity = underDampedVelocity;
+            }
+            else {
+                animation.current = criticallyDampedPosition;
+                animation.velocity = criticallyDampedVelocity;
+            }
+            if (isOvershooting() || (isVelocity && isDisplacement)) {
+                if (config.stiffness !== 0) {
+                    animation.velocity = 0;
+                    animation.current = toValue;
+                }
+                return true;
+            }
+            return false;
+        }
+        function onStart(animation, value, now, previousAnimation) {
+            animation.current = value;
+            if (previousAnimation) {
+                animation.velocity =
+                    previousAnimation.velocity || animation.velocity || 0;
+                animation.lastTimestamp = previousAnimation.lastTimestamp || now;
+            }
+            else {
+                animation.lastTimestamp = now;
+            }
+        }
+        return {
+            onFrame: spring,
+            onStart,
+            toValue,
+            velocity: config.velocity || 0,
+            current: toValue,
+            callback,
+            lastTimestamp: 0,
+        };
+    });
+}