react-native-reanimated 2.9.1 → 2.10.0

package/react-native-reanimated.d.ts

@@ -495,20 +495,71 @@ declare module 'react-native-reanimated' {
   }
 
   export type SensorConfig = {
-    interval: number;
+    interval: number | 'auto';
   };
 
-  export type AnimatedSensor = {
-    sensor: SensorValue3D | SensorValueRotation | null;
+  export type Value3D = {
+    x: number;
+    y: number;
+    z: number;
+  };
+
+  export type SensorValue3D = SharedValue<Value3D>;
+
+  export type ValueRotation = {
+    qw: number;
+    qx: number;
+    qy: number;
+    qz: number;
+    yaw: number;
+    pitch: number;
+    roll: number;
+  };
+
+  export type SensorValueRotation = SharedValue<ValueRotation>;
+
+  export type AnimatedSensor<SensorValueType> = {
+    sensor: SensorValueType;
     unregister: () => void;
     isAvailable: boolean;
     config: SensorConfig;
   };
 
+  export function useAnimatedSensor(
+    sensorType: SensorType.ROTATION,
+    userConfig?: SensorConfig
+  ): AnimatedSensor<SensorValueRotation>;
+  export function useAnimatedSensor(
+    sensorType: Exclude<SensorType, SensorType.ROTATION>,
+    userConfig?: SensorConfig
+  ): AnimatedSensor<SensorValue3D>;
   export function useAnimatedSensor(
     sensorType: SensorType,
     userConfig?: SensorConfig
-  ): AnimatedSensor;
+  ): AnimatedSensor<any>;
+
+  export type FrameCallback = {
+    setActive: (isActive: boolean) => void;
+    isActive: boolean;
+    callbackId: number;
+  };
+  export function useFrameCallback(
+    callback: () => void,
+    autostart?: boolean
+  ): FrameCallback;
+
+  export enum KeyboardState {
+    UNKNOWN = 0,
+    OPENING = 1,
+    OPEN = 2,
+    CLOSING = 3,
+    CLOSED = 4,
+  }
+  export type AnimatedKeyboardInfo = {
+    height: SharedValue<number>;
+    state: SharedValue<KeyboardState>;
+  };
+  export function useAnimatedKeyboard(): AnimatedKeyboardInfo;
 
   export interface ExitAnimationsValues {
     currentOriginX: number;

package/src/index.ts

@@ -1,7 +1,15 @@
-// tree-shaken side effects
-import './reanimated2/js-reanimated/global';
+import * as Animated from './Animated';
+import webGlobalIsInitialized from './reanimated2/js-reanimated/global';
+if (!webGlobalIsInitialized) {
+  /* 
+    `webGlobalIsInitialized` should always be `true`, 
+    but we need to use `webGlobalIsInitialized` somewhere to ensure function execution, 
+    in another way, the bundler can remove unused variables. 
+  */
+  console.error('[Reanimated] Unable to initialize global objects for web.');
+}
 
 // @ts-ignore backward compatibility with treeshaking
 export * from './reanimated1';
 export * from './reanimated2';
-export * as default from './Animated';
+export default Animated;

package/src/index.web.ts

@@ -0,0 +1,5 @@
+// tree-shaken side effects
+import './reanimated2/js-reanimated/global';
+
+export * from './reanimated2';
+export * as default from './Animated'; // If this line fails, you probably forgot some installation steps. Check out the installation guide here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/ 1) 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) 2) Make sure you reset build cache after updating the config, run: yarn start --reset-cache

package/src/reanimated2/Colors.ts

@@ -23,7 +23,7 @@ interface HSV {
 }
 
 // var INTEGER = '[-+]?\\d+';
-const NUMBER = '[-+]?\\d*\\.?\\d+';
+const NUMBER = '[-+]?(?:\\d+(?:\\.\\d*)?|\\.\\d+)';
 const PERCENTAGE = NUMBER + '%';
 
 function call(...args: unknown[]): string {

package/src/reanimated2/NativeMethods.ts

@@ -45,6 +45,11 @@ export function measure(
   if (result.x === -1234567) {
     throw new Error(`The view with tag ${viewTag} could not be measured`);
   }
+  if (isNaN(result.x)) {
+    console.warn(
+      'Trying to measure a component which gets view-flattened on Android. To disable view-flattening, set `collapsable={false}` on this component.'
+    );
+  }
   return result;
 }
 

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,18 @@ 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>;
+};

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

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/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();