react-native-reanimated 2.9.1 → 2.11.0

package/lib/reanimated2/core.js

@@ -11,10 +11,13 @@ if (global._setGlobalConsole === undefined) {
 const testWorklet = () => {
     'worklet';
 };
+const throwUninitializedReanimatedException = () => {
+    throw new Error("Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/ \n1) Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details) \n2) Make sure you reset build cache after updating the config, run: yarn start --reset-cache");
+};
 export const checkPluginState = (throwError = true) => {
     if (!testWorklet.__workletHash && !shouldBeUseWeb()) {
         if (throwError) {
-            throw new Error("Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?");
+            throwUninitializedReanimatedException();
         }
         return false;
     }
@@ -24,9 +27,7 @@ export const isConfigured = (throwError = false) => {
     return checkPluginState(throwError);
 };
 export const isConfiguredCheck = () => {
-    if (!isConfigured(true)) {
-        throw new Error('If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation');
-    }
+    checkPluginState(true);
 };
 function pushFrame(frame) {
     NativeReanimatedModule.pushFrame(frame);

package/lib/reanimated2/frameCallback/FrameCallbackRegistryJS.js

@@ -0,0 +1,32 @@
+import { runOnUI } from '../core';
+import { prepareUIRegistry } from './FrameCallbackRegistryUI';
+export default class FrameCallbackRegistryJS {
+    constructor() {
+        this.nextCallbackId = 0;
+        prepareUIRegistry();
+    }
+    registerFrameCallback(callback) {
+        if (!callback) {
+            return -1;
+        }
+        const callbackId = this.nextCallbackId;
+        this.nextCallbackId++;
+        runOnUI(() => {
+            'worklet';
+            global._frameCallbackRegistry.registerFrameCallback(callback, callbackId);
+        })();
+        return callbackId;
+    }
+    unregisterFrameCallback(callbackId) {
+        runOnUI(() => {
+            'worklet';
+            global._frameCallbackRegistry.unregisterFrameCallback(callbackId);
+        })();
+    }
+    manageStateFrameCallback(callbackId, state) {
+        runOnUI(() => {
+            'worklet';
+            global._frameCallbackRegistry.manageStateFrameCallback(callbackId, state);
+        })();
+    }
+}

package/lib/reanimated2/frameCallback/FrameCallbackRegistryUI.js

@@ -0,0 +1,76 @@
+import { runOnUI } from '../core';
+export const prepareUIRegistry = runOnUI(() => {
+    'worklet';
+    const frameCallbackRegistry = {
+        frameCallbackRegistry: new Map(),
+        activeFrameCallbacks: new Set(),
+        previousFrameTimestamp: null,
+        runCallbacks() {
+            const loop = (timestamp) => {
+                if (this.previousFrameTimestamp === null) {
+                    this.previousFrameTimestamp = timestamp;
+                }
+                const delta = timestamp - this.previousFrameTimestamp;
+                this.activeFrameCallbacks.forEach((callbackId) => {
+                    const callbackDetails = this.frameCallbackRegistry.get(callbackId);
+                    const { startTime } = callbackDetails;
+                    if (startTime === null) {
+                        // First frame
+                        callbackDetails.startTime = timestamp;
+                        callbackDetails.callback({
+                            timestamp,
+                            timeSincePreviousFrame: null,
+                            timeSinceFirstFrame: 0,
+                        });
+                    }
+                    else {
+                        // Next frame
+                        callbackDetails.callback({
+                            timestamp,
+                            timeSincePreviousFrame: delta,
+                            timeSinceFirstFrame: timestamp - startTime,
+                        });
+                    }
+                });
+                if (this.activeFrameCallbacks.size > 0) {
+                    this.previousFrameTimestamp = timestamp;
+                    requestAnimationFrame(loop);
+                }
+                else {
+                    this.previousFrameTimestamp = null;
+                }
+            };
+            // runCallback() should only be called after registering a callback,
+            // so if there is only one active callback, then it means that there were
+            // zero previously and the loop isn't running yet.
+            if (this.activeFrameCallbacks.size === 1) {
+                requestAnimationFrame(loop);
+            }
+        },
+        registerFrameCallback(callback, callbackId) {
+            this.frameCallbackRegistry.set(callbackId, {
+                callback: callback,
+                startTime: null,
+            });
+        },
+        unregisterFrameCallback(callbackId) {
+            this.manageStateFrameCallback(callbackId, false);
+            this.frameCallbackRegistry.delete(callbackId);
+        },
+        manageStateFrameCallback(callbackId, state) {
+            if (callbackId === -1) {
+                return;
+            }
+            if (state) {
+                this.activeFrameCallbacks.add(callbackId);
+                this.runCallbacks();
+            }
+            else {
+                const callback = this.frameCallbackRegistry.get(callbackId);
+                callback.startTime = null;
+                this.activeFrameCallbacks.delete(callbackId);
+            }
+        },
+    };
+    global._frameCallbackRegistry = frameCallbackRegistry;
+});

package/lib/reanimated2/globals.d.ts

@@ -1,5 +1,6 @@
 import { AnimatedStyle, StyleProps } from './commonTypes';
 import { ReanimatedConsole } from './core';
+import FrameCallbackRegistryUI from './frameCallback/FrameCallbackRegistryUI';
 import { MeasuredDimensions } from './NativeMethods';
 import { NativeReanimated } from './NativeReanimated/NativeReanimated';
 declare global {
@@ -19,7 +20,7 @@ declare global {
     name: string,
     updates: StyleProps | AnimatedStyle
   ) => void;
-  const _measure: (viewTag: number) => MeasuredDimensions;
+  const _measure: (viewTag: number) => MeasuredDimensions | null;
   const _scrollTo: (
     viewTag: number,
     x: number,
@@ -30,6 +31,7 @@ declare global {
   const ReanimatedDataMock: {
     now: () => number;
   };
+  const _frameCallbackRegistry: FrameCallbackRegistryUI;
   namespace NodeJS {
     interface Global {
       _setGlobalConsole: (console?: ReanimatedConsole) => void;
@@ -38,7 +40,7 @@ declare global {
       _WORKLET: boolean;
       __reanimatedModuleProxy: NativeReanimated;
       _frameTimestamp: number | null;
-      _measure: () => MeasuredDimensions;
+      _measure: () => MeasuredDimensions | null;
       _scrollTo: () => void;
       _chronoNow: () => number;
       performance: { now: () => number };
@@ -55,6 +57,7 @@ declare global {
       ReanimatedDataMock: {
         now: () => number;
       };
+      _frameCallbackRegistry: FrameCallbackRegistryUI;
     }
   }
 }

package/lib/reanimated2/hook/index.js

@@ -7,3 +7,6 @@ export { useAnimatedRef } from './useAnimatedRef';
 export { useAnimatedScrollHandler, } from './useAnimatedScrollHandler';
 export { useDerivedValue } from './useDerivedValue';
 export { useAnimatedSensor, SensorType } from './useAnimatedSensor';
+export { useFrameCallback } from './useFrameCallback';
+export { useAnimatedKeyboard } from './useAnimatedKeyboard';
+export { useScrollViewOffset } from './useScrollViewOffset';

package/lib/reanimated2/hook/useAnimatedKeyboard.js

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+import NativeReanimated from '../NativeReanimated';
+import { makeMutable } from '../core';
+import { KeyboardState } from '../commonTypes';
+export function useAnimatedKeyboard() {
+    const ref = useRef(null);
+    const listenerId = useRef(-1);
+    const isSubscribed = useRef(false);
+    if (ref.current === null) {
+        const keyboardEventData = {
+            state: makeMutable(KeyboardState.UNKNOWN),
+            height: makeMutable(0),
+        };
+        listenerId.current =
+            NativeReanimated.subscribeForKeyboardEvents(keyboardEventData);
+        ref.current = keyboardEventData;
+        isSubscribed.current = true;
+    }
+    useEffect(() => {
+        if (isSubscribed.current === false && ref.current !== null) {
+            // subscribe again after Fast Refresh
+            listenerId.current = NativeReanimated.subscribeForKeyboardEvents(ref.current);
+            isSubscribed.current = true;
+        }
+        return () => {
+            NativeReanimated.unsubscribeFromKeyboardEvents(listenerId.current);
+            isSubscribed.current = false;
+        };
+    }, []);
+    return ref.current;
+}

package/lib/reanimated2/hook/useAnimatedSensor.js

@@ -21,7 +21,7 @@ export function useAnimatedSensor(sensorType, userConfig) {
         },
     });
     if (ref.current.sensor === null) {
-        ref.current.config = Object.assign({ interval: 10 }, userConfig);
+        ref.current.config = Object.assign({ interval: 'auto' }, userConfig);
         let sensorData;
         if (sensorType === SensorType.ROTATION) {
             sensorData = {
@@ -44,8 +44,8 @@ export function useAnimatedSensor(sensorType, userConfig) {
         ref.current.sensor = makeMutable(sensorData);
     }
     useEffect(() => {
-        ref.current.config = Object.assign({ interval: 10 }, userConfig);
-        const id = NativeReanimated.registerSensor(sensorType, ref.current.config.interval, ref.current.sensor);
+        ref.current.config = Object.assign({ interval: 'auto' }, userConfig);
+        const id = NativeReanimated.registerSensor(sensorType, ref.current.config.interval === 'auto' ? -1 : ref.current.config.interval, ref.current.sensor);
         if (id !== -1) {
             // if sensor is available
             ref.current.unregister = () => NativeReanimated.unregisterSensor(id);

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,26 @@
+import { useEffect, useRef } from 'react';
+import { findNodeHandle } from 'react-native';
+import { useEvent, useSharedValue } from '.';
+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/jestUtils.js

@@ -127,9 +127,9 @@ const tickTravel = () => {
     currentTimestamp += frameTime;
     jest.advanceTimersByTime(frameTime);
 };
-export const withReanimatedTimer = (animatonTest) => {
+export const withReanimatedTimer = (animationTest) => {
     beforeTest();
-    animatonTest();
+    animationTest();
     afterTest();
 };
 export const advanceAnimationByTime = (time = frameTime) => {
@@ -145,7 +145,15 @@ export const advanceAnimationByFrame = (count) => {
     jest.advanceTimersByTime(frameTime);
 };
 export const setUpTests = (userConfig = {}) => {
-    const expect = require('expect');
+    let expect;
+    try {
+        expect = require('expect');
+    }
+    catch (_) {
+        // for Jest in version 28+
+        const { expect: expectModule } = require('@jest/globals');
+        expect = expectModule;
+    }
     require('setimmediate');
     frameTime = Math.round(1000 / config.fps);
     config = Object.assign(Object.assign({}, config), userConfig);

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

@@ -96,4 +96,11 @@ export default class JSReanimated extends NativeReanimated {
             throw Error('This method can be only use in Jest testing.');
         }
     }
+    subscribeForKeyboardEvents(_) {
+        console.warn('[Reanimated] useAnimatedKeyboard is not available on web yet.');
+        return -1;
+    }
+    unsubscribeFromKeyboardEvents(_) {
+        // noop
+    }
 }

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

@@ -1,25 +1,36 @@
 // In order to keep bundle size down, we treat this file as a polyfill for Web.
 import { shouldBeUseWeb } from '../PlatformChecker';
-if (shouldBeUseWeb()) {
-    global._frameTimestamp = null;
-    global._setGlobalConsole = (_val) => {
-        // noop
-    };
-    global._measure = () => {
-        console.warn("[Reanimated] You can't use `measure` with Chrome Debugger or with web version");
-        return {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-            pageX: 0,
-            pageY: 0,
+const initializeGlobalsForWeb = () => {
+    if (shouldBeUseWeb()) {
+        global._frameTimestamp = null;
+        global._setGlobalConsole = (_val) => {
+            // noop
         };
-    };
-    global._scrollTo = () => {
-        console.warn("[Reanimated] You can't use `scrollTo` with Chrome Debugger or with web version");
-    };
-    global._setGestureState = () => {
-        console.warn("[Reanimated] You can't use `setGestureState` with Chrome Debugger or with web version");
-    };
-}
+        global._measure = () => {
+            console.warn("[Reanimated] You can't use `measure` with Chrome Debugger or with web version");
+            return {
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0,
+                pageX: 0,
+                pageY: 0,
+            };
+        };
+        global._scrollTo = () => {
+            console.warn("[Reanimated] You can't use `scrollTo` with Chrome Debugger or with web version");
+        };
+        global._setGestureState = () => {
+            console.warn("[Reanimated] You can't use `setGestureState` with Chrome Debugger or with web version");
+        };
+    }
+    return true;
+};
+/*
+  If a file doesn't export anything, tree shaking doesn't pack
+  it into the JS bundle. In effect, the code inside of this file
+  will never execute. That is why we wrapped initialization code
+  into a function, and we call this one during creating
+  the module export object.
+*/
+export default initializeGlobalsForWeb();

package/lib/reanimated2/layoutReanimation/LayoutAnimationRepository.js

@@ -5,7 +5,7 @@ import { ColorProperties } from '../UpdateProps';
 import { processColor } from '../Colors';
 runOnUI(() => {
     'worklet';
-    const configs = {};
+    const configs = Object.create(null);
     const enteringAnimationForTag = {};
     global.LayoutAnimationRepository = {
         configs,

package/lib/reanimated2/utils.js

@@ -1,9 +1,16 @@
 import { measure } from './NativeMethods';
-export function getRelativeCoords(parentRef, x, y) {
+/**
+ * Given an absolute position and a component ref, returns the relative
+ * position in the component's local coordinate space.
+ */
+export function getRelativeCoords(parentRef, absoluteX, absoluteY) {
     'worklet';
     const parentCoords = measure(parentRef);
+    if (parentCoords === null) {
+        return null;
+    }
     return {
-        x: x - parentCoords.x,
-        y: y - parentCoords.y,
+        x: absoluteX - parentCoords.x,
+        y: absoluteY - parentCoords.y,
     };
 }

package/lib/types/index.d.ts

@@ -0,0 +1,4 @@
+import * as Animated from './Animated';
+export * from './reanimated1';
+export * from './reanimated2';
+export default Animated;

package/lib/types/{lib/reanimated2 → reanimated2}/NativeMethods.d.ts

@@ -1,14 +1,7 @@
 import { Component } from 'react';
-import { RefObjectFunction } from './commonTypes';
+import { MeasuredDimensions } from './commonTypes';
+import { RefObjectFunction } from './hook/commonTypes';
 export declare function getTag(view: null | number | React.Component<any, any> | React.ComponentClass<any>): null | number;
-export interface MeasuredDimensions {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    pageX: number;
-    pageY: number;
-}
-export declare function measure(animatedRef: RefObjectFunction<Component>): MeasuredDimensions;
+export declare function measure(animatedRef: RefObjectFunction<Component>): MeasuredDimensions | null;
 export declare function scrollTo(animatedRef: RefObjectFunction<Component>, x: number, y: number, animated: boolean): void;
 export declare function setGestureState(handlerTag: number, newState: number): void;

package/lib/types/{lib/reanimated2 → reanimated2}/NativeReanimated/NativeReanimated.d.ts

@@ -1,4 +1,4 @@
-import { SharedValue, SensorValue3D, SensorValueRotation } from '../commonTypes';
+import { SharedValue, SensorValue3D, SensorValueRotation, AnimatedKeyboardInfo } from '../commonTypes';
 import { Descriptor } from '../hook/commonTypes';
 export declare class NativeReanimated {
     native: boolean;
@@ -17,4 +17,6 @@ export declare class NativeReanimated {
     getViewProp<T>(viewTag: string, propName: string, callback?: (result: T) => void): Promise<T>;
     enableLayoutAnimations(flag: boolean): void;
     configureProps(uiProps: string[], nativeProps: string[]): void;
+    subscribeForKeyboardEvents(keyboardEventData: AnimatedKeyboardInfo): number;
+    unsubscribeFromKeyboardEvents(listenerId: number): void;
 }

package/lib/types/{lib/reanimated2 → reanimated2}/commonTypes.d.ts

@@ -77,3 +77,23 @@ export declare type ValueRotation = {
     roll: number;
 };
 export declare type SensorValueRotation = SharedValue<ValueRotation>;
+export declare type ShadowNodeWrapper = object;
+export declare enum KeyboardState {
+    UNKNOWN = 0,
+    OPENING = 1,
+    OPEN = 2,
+    CLOSING = 3,
+    CLOSED = 4
+}
+export declare type AnimatedKeyboardInfo = {
+    height: SharedValue<number>;
+    state: SharedValue<KeyboardState>;
+};
+export interface MeasuredDimensions {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    pageX: number;
+    pageY: number;
+}

package/lib/types/{lib/reanimated2 → reanimated2}/component/FlatList.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { FlatListProps } from 'react-native';
 import { ILayoutAnimationBuilder } from '../layoutReanimation/animationBuilder/commonTypes';
-export interface ReanimatedFlatlistProps<ItemT> extends FlatListProps<ItemT> {
+export interface ReanimatedFlatListProps<ItemT> extends FlatListProps<ItemT> {
     itemLayoutAnimation?: ILayoutAnimationBuilder;
 }
-declare type ReanimatedFlatListFC<T = any> = React.FC<ReanimatedFlatlistProps<T>>;
+declare type ReanimatedFlatListFC<T = any> = React.FC<ReanimatedFlatListProps<T>>;
 declare const ReanimatedFlatlist: ReanimatedFlatListFC;
 export default ReanimatedFlatlist;

package/lib/types/reanimated2/frameCallback/FrameCallbackRegistryJS.d.ts

@@ -0,0 +1,8 @@
+import { FrameInfo } from './FrameCallbackRegistryUI';
+export default class FrameCallbackRegistryJS {
+    private nextCallbackId;
+    constructor();
+    registerFrameCallback(callback: (frameInfo: FrameInfo) => void): number;
+    unregisterFrameCallback(callbackId: number): void;
+    manageStateFrameCallback(callbackId: number, state: boolean): void;
+}

package/lib/types/reanimated2/frameCallback/FrameCallbackRegistryUI.d.ts

@@ -0,0 +1,6 @@
+export declare type FrameInfo = {
+    timestamp: number;
+    timeSincePreviousFrame: number | null;
+    timeSinceFirstFrame: number;
+};
+export declare const prepareUIRegistry: () => void;

package/lib/types/{lib/reanimated2 → reanimated2}/hook/index.d.ts

@@ -8,3 +8,7 @@ export { useAnimatedRef } from './useAnimatedRef';
 export { useAnimatedScrollHandler, ScrollHandler, ScrollHandlers, } from './useAnimatedScrollHandler';
 export { useDerivedValue, DerivedValue } from './useDerivedValue';
 export { useAnimatedSensor, SensorType } from './useAnimatedSensor';
+export { useFrameCallback } from './useFrameCallback';
+export type { FrameCallback } from './useFrameCallback';
+export { useAnimatedKeyboard } from './useAnimatedKeyboard';
+export { useScrollViewOffset } from './useScrollViewOffset';

package/lib/types/reanimated2/hook/useAnimatedKeyboard.d.ts

@@ -0,0 +1,2 @@
+import { AnimatedKeyboardInfo } from '../commonTypes';
+export declare function useAnimatedKeyboard(): AnimatedKeyboardInfo;