react-native-reanimated 2.9.1 → 2.11.0

package/src/reanimated2/NativeReanimated/NativeReanimated.ts

@@ -3,6 +3,7 @@ import {
   SharedValue,
   SensorValue3D,
   SensorValueRotation,
+  AnimatedKeyboardInfo,
 } from '../commonTypes';
 import { Descriptor } from '../hook/commonTypes';
 
@@ -97,4 +98,12 @@ export class NativeReanimated {
   configureProps(uiProps: string[], nativeProps: string[]): void {
     this.InnerNativeModule.configureProps(uiProps, nativeProps);
   }
+
+  subscribeForKeyboardEvents(keyboardEventData: AnimatedKeyboardInfo): number {
+    return this.InnerNativeModule.subscribeForKeyboardEvents(keyboardEventData);
+  }
+
+  unsubscribeFromKeyboardEvents(listenerId: number): void {
+    this.InnerNativeModule.unsubscribeFromKeyboardEvents(listenerId);
+  }
 }

package/src/reanimated2/animation/util.ts

@@ -87,7 +87,14 @@ function decorateAnimation<T extends AnimationObject | StyleLayoutAnimation>(
     animation.startValue = strippedValue;
     animation.toValue = strippedToValue;
     if (previousAnimation && previousAnimation !== animation) {
-      previousAnimation.current = previousAnimation.strippedCurrent;
+      const {
+        prefix: paPrefix,
+        suffix: paSuffix,
+        strippedValue: paStrippedValue,
+      } = recognizePrefixSuffix(previousAnimation.current as string | number);
+      previousAnimation.current = paStrippedValue;
+      previousAnimation.__prefix = paPrefix;
+      previousAnimation.__suffix = paSuffix;
     }
 
     baseOnStart(animation, strippedValue, timestamp, previousAnimation);

package/src/reanimated2/commonTypes.ts

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

package/src/reanimated2/component/FlatList.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ForwardedRef, forwardRef } from 'react';
 import { FlatList, FlatListProps, LayoutChangeEvent } from 'react-native';
 import ReanimatedView from './View';
 import createAnimatedComponent from '../../createAnimatedComponent';
@@ -6,10 +6,14 @@ import { ILayoutAnimationBuilder } from '../layoutReanimation/animationBuilder/c
 
 const AnimatedFlatList = createAnimatedComponent(FlatList as any) as any;
 
+interface AnimatedFlatListProps {
+  onLayout: (event: LayoutChangeEvent) => void;
+  // implicit `children` prop has been removed in @types/react^18.0.0
+  children: React.ReactNode;
+}
+
 const createCellRenderer = (itemLayoutAnimation?: ILayoutAnimationBuilder) => {
-  const cellRenderer: React.FC<{
-    onLayout: (event: LayoutChangeEvent) => void;
-  }> = (props) => {
+  const cellRenderer = (props: AnimatedFlatListProps) => {
     return (
       <ReanimatedView layout={itemLayoutAnimation} onLayout={props.onLayout}>
         {props.children}
@@ -20,23 +24,29 @@ const createCellRenderer = (itemLayoutAnimation?: ILayoutAnimationBuilder) => {
   return cellRenderer;
 };
 
-export interface ReanimatedFlatlistProps<ItemT> extends FlatListProps<ItemT> {
+export interface ReanimatedFlatListProps<ItemT> extends FlatListProps<ItemT> {
   itemLayoutAnimation?: ILayoutAnimationBuilder;
 }
 
-type ReanimatedFlatListFC<T = any> = React.FC<ReanimatedFlatlistProps<T>>;
-
-const ReanimatedFlatlist: ReanimatedFlatListFC = ({
-  itemLayoutAnimation,
-  ...restProps
-}) => {
-  const cellRenderer = React.useMemo(
-    () => createCellRenderer(itemLayoutAnimation),
-    []
-  );
-  return (
-    <AnimatedFlatList {...restProps} CellRendererComponent={cellRenderer} />
-  );
-};
+type ReanimatedFlatListFC<T = any> = React.FC<ReanimatedFlatListProps<T>>;
+
+const ReanimatedFlatlist: ReanimatedFlatListFC = forwardRef(
+  (props: ReanimatedFlatListProps<any>, ref: ForwardedRef<FlatList>) => {
+    const { itemLayoutAnimation, ...restProps } = props;
+
+    const cellRenderer = React.useMemo(
+      () => createCellRenderer(itemLayoutAnimation),
+      []
+    );
+
+    return (
+      <AnimatedFlatList
+        ref={ref}
+        {...restProps}
+        CellRendererComponent={cellRenderer}
+      />
+    );
+  }
+);
 
 export default ReanimatedFlatlist;

package/src/reanimated2/core.ts

@@ -41,14 +41,18 @@ const testWorklet: BasicWorkletFunction<void> = () => {
   '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: boolean) => boolean = (
   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;
   }
@@ -62,11 +66,7 @@ export const isConfigured: (throwError?: boolean) => boolean = (
 };
 
 export const isConfiguredCheck: () => void = () => {
-  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: (timestamp: Timestamp) => void): void {

package/src/reanimated2/frameCallback/FrameCallbackRegistryJS.ts

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

package/src/reanimated2/frameCallback/FrameCallbackRegistryUI.ts

@@ -0,0 +1,115 @@
+import { runOnUI } from '../core';
+
+type CallbackDetails = {
+  callback: (frameInfo: FrameInfo) => void;
+  startTime: number | null;
+};
+
+export type FrameInfo = {
+  timestamp: number;
+  timeSincePreviousFrame: number | null;
+  timeSinceFirstFrame: number;
+};
+
+interface FrameCallbackRegistryUI {
+  frameCallbackRegistry: Map<number, CallbackDetails>;
+  activeFrameCallbacks: Set<number>;
+  previousFrameTimestamp: number | null;
+  runCallbacks: () => void;
+  registerFrameCallback: (
+    callback: (frameInfo: FrameInfo) => void,
+    callbackId: number
+  ) => void;
+  unregisterFrameCallback: (callbackId: number) => void;
+  manageStateFrameCallback: (callbackId: number, state: boolean) => void;
+}
+
+export const prepareUIRegistry = runOnUI(() => {
+  'worklet';
+
+  const frameCallbackRegistry: FrameCallbackRegistryUI = {
+    frameCallbackRegistry: new Map<number, CallbackDetails>(),
+    activeFrameCallbacks: new Set<number>(),
+    previousFrameTimestamp: null,
+
+    runCallbacks() {
+      const loop = (timestamp: number) => {
+        if (this.previousFrameTimestamp === null) {
+          this.previousFrameTimestamp = timestamp;
+        }
+
+        const delta = timestamp - this.previousFrameTimestamp;
+
+        this.activeFrameCallbacks.forEach((callbackId: number) => {
+          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: (frameInfo: FrameInfo) => void,
+      callbackId: number
+    ) {
+      this.frameCallbackRegistry.set(callbackId, {
+        callback: callback,
+        startTime: null,
+      });
+    },
+
+    unregisterFrameCallback(callbackId: number) {
+      this.manageStateFrameCallback(callbackId, false);
+      this.frameCallbackRegistry.delete(callbackId);
+    },
+
+    manageStateFrameCallback(callbackId: number, state: boolean) {
+      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/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 {
@@ -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/src/reanimated2/hook/index.ts

@@ -24,3 +24,7 @@ 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';
+export { useScrollViewOffset } from './useScrollViewOffset';

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/useAnimatedScrollHandler.ts

@@ -10,7 +10,9 @@ export interface ScrollHandler<TContext extends Context>
   (event: NativeScrollEvent, context?: TContext): void;
 }
 
-interface ScrollEvent extends NativeScrollEvent, NativeEvent<ScrollEvent> {
+export interface ScrollEvent
+  extends NativeScrollEvent,
+    NativeEvent<ScrollEvent> {
   eventName: string;
 }
 export interface ScrollHandlers<TContext extends Context> {

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,40 @@
+import { useEffect, useRef } from 'react';
+import FrameCallbackRegistryJS from '../frameCallback/FrameCallbackRegistryJS';
+import { FrameInfo } from '../frameCallback/FrameCallbackRegistryUI';
+
+export type FrameCallback = {
+  setActive: (isActive: boolean) => void;
+  isActive: boolean;
+  callbackId: number;
+};
+const frameCallbackRegistry = new FrameCallbackRegistryJS();
+
+export function useFrameCallback(
+  callback: (frameInfo: FrameInfo) => 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/useScrollViewOffset.ts

@@ -0,0 +1,36 @@
+import { RefObject, useEffect, useRef } from 'react';
+
+import { findNodeHandle } from 'react-native';
+import type Animated from 'react-native-reanimated';
+import { useEvent, useSharedValue } from '.';
+import { SharedValue } from '../commonTypes';
+import { ScrollEvent } from './useAnimatedScrollHandler';
+
+const subscribeForEvents = [
+  'onScroll',
+  'onScrollBeginDrag',
+  'onScrollEndDrag',
+  'onMomentumScrollBegin',
+  'onMomentumScrollEnd',
+];
+
+export function useScrollViewOffset(
+  aref: RefObject<Animated.ScrollView>
+): SharedValue<number> {
+  const offsetRef = useRef(useSharedValue(0));
+
+  const event = useEvent<ScrollEvent>((event: ScrollEvent) => {
+    'worklet';
+    offsetRef.current.value =
+      event.contentOffset.x === 0
+        ? event.contentOffset.y
+        : event.contentOffset.x;
+  }, subscribeForEvents);
+
+  useEffect(() => {
+    const viewTag = findNodeHandle(aref.current);
+    event.current?.registerForEvents(viewTag as number);
+  }, [aref.current]);
+
+  return offsetRef.current;
+}

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

@@ -1,33 +1,45 @@
 // 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._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._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._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();