react-native-reanimated 2.16.0 → 2.17.0

package/lib/reanimated2/globals.d.ts

@@ -0,0 +1,91 @@
+import type {
+  AnimatedStyle,
+  StyleProps,
+  MeasuredDimensions,
+} from './commonTypes';
+import type { ReanimatedConsole } from './core';
+import type { NativeReanimated } from './NativeReanimated/NativeReanimated';
+import type { FrameCallbackRegistryUI } from './frameCallback/FrameCallbackRegistryUI';
+
+declare global {
+  const _WORKLET: boolean;
+  const _REANIMATED_VERSION_CPP: string;
+  const _frameTimestamp: number | null;
+  const _eventTimestamp: number;
+  const __reanimatedModuleProxy: NativeReanimated;
+  const _setGlobalConsole: (console?: ReanimatedConsole) => void;
+  const _log: (s: string) => void;
+  const _getCurrentTime: () => number;
+  const _stopObservingProgress: (tag: number, flag: boolean) => void;
+  const _startObservingProgress: (
+    tag: number,
+    flag: { value: boolean; _value: boolean }
+  ) => void;
+  const _setGestureState: (handlerTag: number, newState: number) => void;
+  const _updateProps: (
+    tag: number,
+    name: string,
+    updates: StyleProps | AnimatedStyle
+  ) => void;
+  const _measure: (viewTag: number) => MeasuredDimensions;
+  const _scrollTo: (
+    viewTag: number,
+    x: number,
+    y: number,
+    animated: boolean
+  ) => void;
+  const _chronoNow: () => number;
+  const performance: { now: () => number };
+  const LayoutAnimationRepository: {
+    configs: Record<string, unknown>;
+    registerConfig(tag: number, config: Record<string, unknown>): void;
+    removeConfig(tag: number): void;
+    startAnimationForTag(tag: number, type: string, yogaValues: unknown): void;
+  };
+  const ReanimatedDataMock: {
+    now: () => number;
+  };
+  const _frameCallbackRegistry: FrameCallbackRegistryUI;
+  namespace NodeJS {
+    interface Global {
+      _WORKLET: boolean;
+      _IS_FABRIC: boolean;
+      _REANIMATED_VERSION_CPP: string;
+      _frameTimestamp: number | null;
+      _eventTimestamp: number;
+      __reanimatedModuleProxy: NativeReanimated;
+      _setGlobalConsole: (console?: ReanimatedConsole) => void;
+      _log: (s: string) => void;
+      _getCurrentTime: () => number;
+      _stopObservingProgress: (tag: number, flag: boolean) => void;
+      _startObservingProgress: (
+        tag: number,
+        flag: { value: boolean; _value: boolean }
+      ) => void;
+      _setGestureState: (handlerTag: number, newState: number) => void;
+      _measure: (viewTag: number) => MeasuredDimensions;
+      _scrollTo: (
+        viewTag: number,
+        x: number,
+        y: number,
+        animated: boolean
+      ) => void;
+      _chronoNow: () => number;
+      performance: { now: () => number };
+      LayoutAnimationRepository: {
+        configs: Record<string, unknown>;
+        registerConfig(tag: number, config: Record<string, unknown>): void;
+        removeConfig(tag: number): void;
+        startAnimationForTag(
+          tag: number,
+          type: string,
+          yogaValues: unknown
+        ): void;
+      };
+      ReanimatedDataMock: {
+        now: () => number;
+      };
+      _frameCallbackRegistry: FrameCallbackRegistryUI;
+    }
+  }
+}

package/lib/reanimated2/hook/Hooks.js

@@ -0,0 +1,9 @@
+import { useCallback } from 'react';
+import { useAnimatedStyle } from './useAnimatedStyle';
+// TODO: we should make sure that when useAP is used we are not assigning styles
+// when you need styles to animated you should always use useAS
+export const useAnimatedProps = useAnimatedStyle;
+export function useWorkletCallback(fun, deps) {
+    return useCallback(fun, deps !== null && deps !== void 0 ? deps : []);
+}
+export { useEvent, useHandler } from './utils';

package/lib/reanimated2/hook/commonTypes.js

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

package/lib/reanimated2/hook/index.js

@@ -0,0 +1,12 @@
+export { useAnimatedProps, useEvent, useHandler, useWorkletCallback, } from './Hooks';
+export { useSharedValue } from './useSharedValue';
+export { useAnimatedStyle } from './useAnimatedStyle';
+export { useAnimatedGestureHandler, } from './useAnimatedGestureHandler';
+export { useAnimatedReaction, } from './useAnimatedReaction';
+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/useAnimatedGestureHandler.js

@@ -0,0 +1,49 @@
+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 (useWeb) {
+        return handler;
+    }
+    return useEvent(handler, ['onGestureHandlerStateChange', 'onGestureHandlerEvent'], doDependenciesDiffer);
+}

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/useAnimatedReaction.js

@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+import { startMapper, stopMapper } from '../core';
+import { useSharedValue } from './useSharedValue';
+import { shouldBeUseWeb } from '../PlatformChecker';
+/**
+ * @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, _c;
+    const previous = useSharedValue(null);
+    let inputs = Object.values((_a = prepare._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 (dependencies === undefined) {
+        dependencies = [
+            Object.values((_b = prepare._closure) !== null && _b !== void 0 ? _b : {}),
+            Object.values((_c = react._closure) !== null && _c !== void 0 ? _c : {}),
+            prepare.__workletHash,
+            react.__workletHash,
+        ];
+    }
+    else {
+        dependencies.push(prepare.__workletHash, react.__workletHash);
+    }
+    useEffect(() => {
+        const fun = () => {
+            'worklet';
+            const input = prepare();
+            react(input, previous.value);
+            previous.value = input;
+        };
+        const mapperId = startMapper(fun, inputs, []);
+        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/useAnimatedSensor.js

@@ -0,0 +1,66 @@
+import { useEffect, useRef } from 'react';
+import { makeMutable } from '../core';
+import NativeReanimated from '../NativeReanimated';
+export var SensorType;
+(function (SensorType) {
+    SensorType[SensorType["ACCELEROMETER"] = 1] = "ACCELEROMETER";
+    SensorType[SensorType["GYROSCOPE"] = 2] = "GYROSCOPE";
+    SensorType[SensorType["GRAVITY"] = 3] = "GRAVITY";
+    SensorType[SensorType["MAGNETIC_FIELD"] = 4] = "MAGNETIC_FIELD";
+    SensorType[SensorType["ROTATION"] = 5] = "ROTATION";
+})(SensorType || (SensorType = {}));
+export function useAnimatedSensor(sensorType, userConfig) {
+    const ref = useRef({
+        sensor: null,
+        unregister: () => {
+            // NOOP
+        },
+        isAvailable: false,
+        config: {
+            interval: 0,
+        },
+    });
+    if (ref.current.sensor === null) {
+        ref.current.config = Object.assign({ interval: 'auto' }, userConfig);
+        let sensorData;
+        if (sensorType === SensorType.ROTATION) {
+            sensorData = {
+                qw: 0,
+                qx: 0,
+                qy: 0,
+                qz: 0,
+                yaw: 0,
+                pitch: 0,
+                roll: 0,
+            };
+        }
+        else {
+            sensorData = {
+                x: 0,
+                y: 0,
+                z: 0,
+            };
+        }
+        ref.current.sensor = makeMutable(sensorData);
+    }
+    useEffect(() => {
+        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);
+            ref.current.isAvailable = true;
+        }
+        else {
+            // if sensor is unavailable
+            ref.current.unregister = () => {
+                // NOOP
+            };
+            ref.current.isAvailable = false;
+        }
+        return () => {
+            ref.current.unregister();
+        };
+    }, [sensorType, userConfig]);
+    return ref.current;
+}