react-native-reanimated 2.8.0 → 2.10.0

package/src/reanimated2/frameCallback/FrameCallbackRegistryUI.ts

@@ -0,0 +1,64 @@
+import { runOnUI } from '../core';
+
+export default interface FrameCallbackRegistryUI {
+  frameCallbackRegistry: Map<number, () => void>;
+  frameCallbackActive: Set<number>;
+  isFrameCallbackRunning: boolean;
+  runCallbacks: () => void;
+  registerFrameCallback: (callback: () => void, callbackId: number) => void;
+  unregisterFrameCallback: (frameCallbackId: number) => void;
+  manageStateFrameCallback: (frameCallbackId: number, state: boolean) => void;
+}
+
+export const prepareUIRegistry = runOnUI(() => {
+  'worklet';
+
+  const frameCallbackRegistry: FrameCallbackRegistryUI = {
+    frameCallbackRegistry: new Map<number, () => void>(),
+    frameCallbackActive: new Set<number>(),
+    isFrameCallbackRunning: false,
+
+    runCallbacks() {
+      const loop = () => {
+        this.frameCallbackActive.forEach((key: number) => {
+          const callback = this.frameCallbackRegistry.get(key);
+          callback!();
+        });
+
+        if (this.frameCallbackActive.size > 0) {
+          requestAnimationFrame(loop);
+        } else {
+          this.isFrameCallbackRunning = false;
+        }
+      };
+
+      if (!this.isFrameCallbackRunning) {
+        requestAnimationFrame(loop);
+        this.isFrameCallbackRunning = true;
+      }
+    },
+
+    registerFrameCallback(callback: () => void, callbackId: number) {
+      this.frameCallbackRegistry.set(callbackId, callback);
+    },
+
+    unregisterFrameCallback(frameCallbackId: number) {
+      this.manageStateFrameCallback(frameCallbackId, false);
+      this.frameCallbackRegistry.delete(frameCallbackId);
+    },
+
+    manageStateFrameCallback(frameCallbackId: number, state: boolean) {
+      if (frameCallbackId === -1) {
+        return;
+      }
+      if (state) {
+        this.frameCallbackActive.add(frameCallbackId);
+        this.runCallbacks();
+      } else {
+        this.frameCallbackActive.delete(frameCallbackId);
+      }
+    },
+  };
+
+  global._frameCallbackRegistry = frameCallbackRegistry;
+});

package/src/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 {
@@ -30,6 +31,7 @@ declare global {
   const ReanimatedDataMock: {
     now: () => number;
   };
+  const _frameCallbackRegistry: FrameCallbackRegistryUI;
   namespace NodeJS {
     interface Global {
       _setGlobalConsole: (console?: ReanimatedConsole) => void;
@@ -55,6 +57,7 @@ declare global {
       ReanimatedDataMock: {
         now: () => number;
       };
+      _frameCallbackRegistry: FrameCallbackRegistryUI;
     }
   }
 }

package/src/reanimated2/hook/index.ts

@@ -24,3 +24,6 @@ export {
 } 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';

package/src/reanimated2/hook/useAnimatedKeyboard.ts

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from 'react';
+import NativeReanimated from '../NativeReanimated';
+import { makeMutable } from '../core';
+import { AnimatedKeyboardInfo, KeyboardState } from '../commonTypes';
+
+export function useAnimatedKeyboard(): AnimatedKeyboardInfo {
+  const ref = useRef<AnimatedKeyboardInfo | null>(null);
+  const listenerId = useRef<number>(-1);
+  const isSubscribed = useRef<boolean>(false);
+
+  if (ref.current === null) {
+    const keyboardEventData: AnimatedKeyboardInfo = {
+      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/src/reanimated2/hook/useAnimatedSensor.ts

@@ -12,7 +12,7 @@ export enum SensorType {
 }
 
 export type SensorConfig = {
-  interval: number;
+  interval: number | 'auto';
 };
 
 export type AnimatedSensor = {
@@ -26,7 +26,7 @@ export function useAnimatedSensor(
   sensorType: SensorType,
   userConfig?: SensorConfig
 ): AnimatedSensor {
-  const ref = useRef({
+  const ref = useRef<AnimatedSensor>({
     sensor: null,
     unregister: () => {
       // NOOP
@@ -38,7 +38,7 @@ export function useAnimatedSensor(
   });
 
   if (ref.current.sensor === null) {
-    ref.current.config = { interval: 10, ...userConfig };
+    ref.current.config = { interval: 'auto', ...userConfig };
     let sensorData;
     if (sensorType === SensorType.ROTATION) {
       sensorData = {
@@ -61,10 +61,10 @@ export function useAnimatedSensor(
   }
 
   useEffect(() => {
-    ref.current.config = { interval: 10, ...userConfig };
+    ref.current.config = { interval: 'auto', ...userConfig };
     const id = NativeReanimated.registerSensor(
       sensorType,
-      ref.current.config.interval,
+      ref.current.config.interval === 'auto' ? -1 : ref.current.config.interval,
       ref.current.sensor as any
     );
 

package/src/reanimated2/hook/useFrameCallback.ts

@@ -0,0 +1,39 @@
+import { useEffect, useRef } from 'react';
+import FrameCallbackRegistryJS from '../frameCallback/FrameCallbackRegistryJS';
+
+export type FrameCallback = {
+  setActive: (isActive: boolean) => void;
+  isActive: boolean;
+  callbackId: number;
+};
+const frameCallbackRegistry = new FrameCallbackRegistryJS();
+
+export function useFrameCallback(
+  callback: () => void,
+  autostart = true
+): FrameCallback {
+  const ref = useRef<FrameCallback>({
+    setActive: (isActive: boolean) => {
+      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/src/reanimated2/hook/utils.ts

@@ -44,12 +44,6 @@ export function useEvent<T extends NativeEvent<T>>(
     initRef.current.updateWorklet(handler);
   }
 
-  useEffect(() => {
-    return () => {
-      initRef.current = null;
-    };
-  }, []);
-
   return initRef;
 }
 

package/src/reanimated2/jestUtils.ts

@@ -167,9 +167,9 @@ const tickTravel = () => {
   jest.advanceTimersByTime(frameTime);
 };
 
-export const withReanimatedTimer = (animatonTest) => {
+export const withReanimatedTimer = (animationTest) => {
   beforeTest();
-  animatonTest();
+  animationTest();
   afterTest();
 };
 
@@ -188,7 +188,15 @@ export const advanceAnimationByFrame = (count) => {
 };
 
 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);
 

package/src/reanimated2/js-reanimated/JSReanimated.ts

@@ -2,7 +2,11 @@ import MapperRegistry from './MapperRegistry';
 import Mapper from './Mapper';
 import MutableValue from './MutableValue';
 import { NativeReanimated } from '../NativeReanimated/NativeReanimated';
-import { Timestamp, NestedObjectValues } from '../commonTypes';
+import {
+  Timestamp,
+  NestedObjectValues,
+  AnimatedKeyboardInfo,
+} from '../commonTypes';
 import { isJest } from '../PlatformChecker';
 
 export default class JSReanimated extends NativeReanimated {
@@ -126,4 +130,15 @@ export default class JSReanimated extends NativeReanimated {
       throw Error('This method can be only use in Jest testing.');
     }
   }
+
+  subscribeForKeyboardEvents(_: AnimatedKeyboardInfo): number {
+    console.warn(
+      '[Reanimated] useAnimatedKeyboard is not available on web yet.'
+    );
+    return -1;
+  }
+
+  unsubscribeFromKeyboardEvents(_: number): void {
+    // noop
+  }
 }

package/src/reanimated2/js-reanimated/global.ts

@@ -0,0 +1,45 @@
+// In order to keep bundle size down, we treat this file as a polyfill for Web.
+
+import { shouldBeUseWeb } from '../PlatformChecker';
+const initializeGlobalsForWeb = () => {
+  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,
+      };
+    };
+    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/src/reanimated2/js-reanimated/index.ts

@@ -1,5 +1,4 @@
 import JSReanimated from './JSReanimated';
-import { shouldBeUseWeb } from '../PlatformChecker';
 import { AnimatedStyle, StyleProps } from '../commonTypes';
 
 const reanimatedJS = new JSReanimated();
@@ -13,36 +12,6 @@ interface JSReanimatedComponent {
   };
 }
 
-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,
-    };
-  };
-  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"
-    );
-  };
-}
-
 export const _updatePropsJS = (
   updates: StyleProps | AnimatedStyle,
   viewRef: { _component?: JSReanimatedComponent }

package/src/reanimated2/layoutReanimation/LayoutAnimationRepository.ts

@@ -7,7 +7,7 @@ import { processColor } from '../Colors';
 runOnUI(() => {
   'worklet';
 
-  const configs: Record<string, any> = {};
+  const configs: Record<string, any> = Object.create(null);
   const enteringAnimationForTag: Record<string, any> = {};
 
   global.LayoutAnimationRepository = {

package/src/reanimated2/mock.ts

@@ -65,8 +65,14 @@ const ReanimatedV2 = {
     out: ID,
     inOut: ID,
   },
+  Extrapolation: {
+    EXTEND: 'extend',
+    CLAMP: 'clamp',
+    IDENTITY: 'identity',
+  },
 
   runOnJS: (fn) => fn,
+  runOnUI: (fn) => fn,
 };
 
 module.exports = {

package/lib/reanimated2/component/WrappedComponents.js

@@ -1,9 +0,0 @@
-import { Image, ScrollView, Text, View } from 'react-native';
-import createAnimatedComponent from '../../createAnimatedComponent';
-const WrappedComponents = {
-    View: createAnimatedComponent(View),
-    Text: createAnimatedComponent(Text),
-    Image: createAnimatedComponent(Image),
-    ScrollView: createAnimatedComponent(ScrollView),
-};
-export default WrappedComponents;

package/lib/reanimated2/component/index.js

@@ -1,4 +0,0 @@
-import ReanimatedFlatlist from './FlatList';
-import WrappedComponents from './WrappedComponents';
-const ReanimatedComponents = Object.assign(Object.assign({}, WrappedComponents), { FlatList: ReanimatedFlatlist });
-export default ReanimatedComponents;

package/lib/types/lib/reanimated2/component/WrappedComponents.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-declare const WrappedComponents: {
-    View: import("react").ComponentType<import("../../createAnimatedComponent").AnimatedComponentProps<import("../../createAnimatedComponent").InitialComponentProps>>;
-    Text: import("react").ComponentType<import("../../createAnimatedComponent").AnimatedComponentProps<import("../../createAnimatedComponent").InitialComponentProps>>;
-    Image: import("react").ComponentType<import("../../createAnimatedComponent").AnimatedComponentProps<import("../../createAnimatedComponent").InitialComponentProps>>;
-    ScrollView: import("react").ComponentType<import("../../createAnimatedComponent").AnimatedComponentProps<import("../../createAnimatedComponent").InitialComponentProps>>;
-};
-export default WrappedComponents;

package/lib/types/lib/reanimated2/component/index.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-declare const ReanimatedComponents: {
-    FlatList: import("react").FC<import("./FlatList").ReanimatedFlatlistProps<any>>;
-    View: import("react").ComponentType<import("../../createAnimatedComponent").AnimatedComponentProps<import("../../createAnimatedComponent").InitialComponentProps>>;
-    Text: import("react").ComponentType<import("../../createAnimatedComponent").AnimatedComponentProps<import("../../createAnimatedComponent").InitialComponentProps>>;
-    Image: import("react").ComponentType<import("../../createAnimatedComponent").AnimatedComponentProps<import("../../createAnimatedComponent").InitialComponentProps>>;
-    ScrollView: import("react").ComponentType<import("../../createAnimatedComponent").AnimatedComponentProps<import("../../createAnimatedComponent").InitialComponentProps>>;
-};
-export default ReanimatedComponents;

package/lib/types/react-native-reanimated-tests.d.ts

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

package/src/Animated.js

@@ -1,22 +0,0 @@
-import createAnimatedComponent from './createAnimatedComponent';
-import {
-  addWhitelistedNativeProps,
-  addWhitelistedUIProps,
-} from './ConfigHelper';
-import * as reanimated1 from './reanimated1';
-import ReanimatedComponents from './reanimated2/component';
-
-const Animated = {
-  // components
-  ...ReanimatedComponents,
-  createAnimatedComponent,
-  // configuration
-  addWhitelistedNativeProps,
-  addWhitelistedUIProps,
-  // reanimated 1
-  ...reanimated1,
-};
-
-export * from './reanimated2';
-export * from './reanimated1';
-export default Animated;

package/src/reanimated2/component/WrappedComponents.ts

@@ -1,11 +0,0 @@
-import { Image, ScrollView, Text, View } from 'react-native';
-import createAnimatedComponent from '../../createAnimatedComponent';
-
-const WrappedComponents = {
-  View: createAnimatedComponent(View),
-  Text: createAnimatedComponent(Text as any),
-  Image: createAnimatedComponent(Image as any),
-  ScrollView: createAnimatedComponent(ScrollView),
-};
-
-export default WrappedComponents;

package/src/reanimated2/component/index.ts

@@ -1,9 +0,0 @@
-import ReanimatedFlatlist from './FlatList';
-import WrappedComponents from './WrappedComponents';
-
-const ReanimatedComponents = {
-  ...WrappedComponents,
-  FlatList: ReanimatedFlatlist,
-};
-
-export default ReanimatedComponents;