react-native-reanimated 2.9.1 → 2.11.0

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

@@ -6,7 +6,7 @@ import { Context, DependencyList } from './commonTypes';
 export interface ScrollHandler<TContext extends Context> extends WorkletFunction {
     (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> {
@@ -18,4 +18,3 @@ export interface ScrollHandlers<TContext extends Context> {
     onMomentumEnd?: ScrollHandler<TContext>;
 }
 export declare function useAnimatedScrollHandler<TContext extends Context>(handlers: ScrollHandlers<TContext> | ScrollHandler<TContext>, dependencies?: DependencyList): RefObject<WorkletEventHandler<ScrollEvent>>;
-export {};

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

@@ -7,7 +7,7 @@ export declare enum SensorType {
     ROTATION = 5
 }
 export declare type SensorConfig = {
-    interval: number;
+    interval: number | 'auto';
 };
 export declare type AnimatedSensor = {
     sensor: SensorValue3D | SensorValueRotation | null;

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

@@ -0,0 +1,7 @@
+import { FrameInfo } from '../frameCallback/FrameCallbackRegistryUI';
+export declare type FrameCallback = {
+    setActive: (isActive: boolean) => void;
+    isActive: boolean;
+    callbackId: number;
+};
+export declare function useFrameCallback(callback: (frameInfo: FrameInfo) => void, autostart?: boolean): FrameCallback;

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

@@ -0,0 +1,4 @@
+import { RefObject } from 'react';
+import type Animated from 'react-native-reanimated';
+import { SharedValue } from '../commonTypes';
+export declare function useScrollViewOffset(aref: RefObject<Animated.ScrollView>): SharedValue<number>;

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

@@ -5,7 +5,7 @@ declare global {
         }
     }
 }
-export declare const withReanimatedTimer: (animatonTest: any) => void;
+export declare const withReanimatedTimer: (animationTest: any) => void;
 export declare const advanceAnimationByTime: (time?: number) => void;
 export declare const advanceAnimationByFrame: (count: any) => void;
 export declare const setUpTests: (userConfig?: {}) => void;

package/lib/types/{lib/reanimated2 → reanimated2}/js-reanimated/JSReanimated.d.ts

@@ -1,7 +1,7 @@
 import MapperRegistry from './MapperRegistry';
 import MutableValue from './MutableValue';
 import { NativeReanimated } from '../NativeReanimated/NativeReanimated';
-import { Timestamp, NestedObjectValues } from '../commonTypes';
+import { Timestamp, NestedObjectValues, AnimatedKeyboardInfo } from '../commonTypes';
 export default class JSReanimated extends NativeReanimated {
     _valueSetter?: <T>(value: T) => void;
     _renderRequested: boolean;
@@ -27,4 +27,6 @@ export default class JSReanimated extends NativeReanimated {
     registerSensor(): number;
     unregisterSensor(): void;
     jestResetModule(): void;
+    subscribeForKeyboardEvents(_: AnimatedKeyboardInfo): number;
+    unsubscribeFromKeyboardEvents(_: number): void;
 }

package/lib/types/reanimated2/js-reanimated/global.d.ts

@@ -0,0 +1,2 @@
+declare const _default: boolean;
+export default _default;

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

@@ -4,4 +4,8 @@ export interface ComponentCoords {
     x: number;
     y: number;
 }
-export declare function getRelativeCoords(parentRef: RefObjectFunction<Component>, x: number, y: number): ComponentCoords;
+/**
+ * Given an absolute position and a component ref, returns the relative
+ * position in the component's local coordinate space.
+ */
+export declare function getRelativeCoords(parentRef: RefObjectFunction<Component>, absoluteX: number, absoluteY: number): ComponentCoords | null;

package/mock.js

@@ -102,6 +102,7 @@ const Reanimated = {
   Text,
   Image,
   ScrollView: Animated.ScrollView,
+  FlatList: Animated.FlatList,
   Code,
 
   Clock: NOOP,

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.9.1",
+  "version": "2.11.0",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
-    "start": "node node_modules/react-native/local-cli/cli.js start",
     "test": "yarn run format:js && yarn run lint:js && yarn run test:unit",
     "test:unit": "jest",
     "lint": "yarn lint:js && yarn lint:cpp && yarn lint:java",
@@ -51,6 +50,7 @@
     "!ios/build/",
     "!android/build/",
     "RNReanimated.podspec",
+    "scripts/reanimated_utils.rb",
     "README.md",
     "react-native-reanimated.d.ts",
     "mock.js",
@@ -74,7 +74,6 @@
   },
   "homepage": "https://github.com/software-mansion/react-native-reanimated#readme",
   "dependencies": {
-    "@babel/plugin-proposal-export-namespace-from": "^7.17.12",
     "@babel/plugin-transform-object-assign": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@types/invariant": "^2.2.35",
@@ -95,14 +94,14 @@
     "@react-native-community/bob": "^0.17.1",
     "@react-native-community/eslint-config": "^0.0.5",
     "@testing-library/jest-native": "^4.0.4",
-    "@testing-library/react-hooks": "^5.0.3",
+    "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/react-native": "^7.1.0",
     "@types/babel-types": "^7.0.11",
     "@types/babel__core": "^7.1.18",
     "@types/babel__generator": "^7.6.4",
     "@types/babel__traverse": "^7.14.2",
     "@types/jest": "^27.4.0",
-    "@types/react-native": "^0.66.15",
+    "@types/react-native": "^0.69.5",
     "@typescript-eslint/eslint-plugin": "^5.11.0",
     "@typescript-eslint/parser": "^5.11.0",
     "babel-eslint": "^10.1.0",
@@ -122,11 +121,12 @@
     "lint-staged": "^11.2.0",
     "madge": "^5.0.1",
     "prettier": "^2.5.1",
-    "react": "18.0.0",
-    "react-native": "0.69.1",
+    "react": "17.0.2",
+    "react-native": "0.70.2",
+    "react-native-builder-bob": "^0.18.3",
     "react-native-codegen": "^0.0.7",
     "react-native-gesture-handler": "^1.6.1",
-    "react-test-renderer": "18.0.0",
+    "react-test-renderer": "17.0.2",
     "release-it": "^13.7.2",
     "typescript": "^4.1.3"
   },

package/plugin.js

@@ -7,6 +7,7 @@ const { transformSync } = require('@babel/core');
  * holds a map of function names as keys and array of argument indexes as values which should be automatically workletized(they have to be functions)(starting from 0)
  */
 const functionArgsToWorkletize = new Map([
+  ['useFrameCallback', [0]],
   ['useAnimatedStyle', [0]],
   ['useAnimatedProps', [0]],
   ['createAnimatedPropAdapter', [0]],
@@ -305,13 +306,14 @@ function buildWorkletString(t, fun, closureVariables, name) {
     },
   });
 
+  const expression = fun.program.body.find(
+    ({ type }) => type === 'ExpressionStatement'
+  ).expression;
+
   const workletFunction = t.functionExpression(
     t.identifier(name),
-    fun.program.body[0].expression.params,
-    prependClosureVariablesIfNecessary(
-      closureVariables,
-      fun.program.body[0].expression.body
-    )
+    expression.params,
+    prependClosureVariablesIfNecessary(closureVariables, expression.body)
   );
 
   return generate(workletFunction, { compact: true }).code;
@@ -445,7 +447,7 @@ function makeWorklet(t, fun, state) {
   const workletHash = hash(funString);
 
   let location = state.file.opts.filename;
-  if (state.opts.relativeSourceLocation) {
+  if (state.opts && state.opts.relativeSourceLocation) {
     const path = require('path');
     location = path.relative(state.cwd, location);
   }
@@ -756,16 +758,6 @@ function isPossibleOptimization(fun) {
   return flags;
 }
 
-const pluginProposalExportNamespaceFrom =
-  require('@babel/plugin-proposal-export-namespace-from').default;
-const apiMock = {
-  assertVersion: () => {
-    // do nothing.
-  },
-};
-const ExportNamedDeclarationFn =
-  pluginProposalExportNamespaceFrom(apiMock).visitor.ExportNamedDeclaration;
-
 module.exports = function ({ types: t }) {
   return {
     pre() {
@@ -788,7 +780,6 @@ module.exports = function ({ types: t }) {
           processIfGestureHandlerEventCallbackFunctionNode(t, path, state);
         },
       },
-      ExportNamedDeclaration: ExportNamedDeclarationFn,
     },
   };
 };

package/react-native-reanimated.d.ts

@@ -54,6 +54,8 @@ declare module 'react-native-reanimated' {
     import('./lib/types/lib/reanimated2/animation/index').StyleLayoutAnimation;
   export type Animation<T> =
     import('./lib/types/lib/reanimated2/commonTypes').Animation<T>;
+  export type MeasuredDimensions =
+    import('./lib/types/lib/reanimated2/commonTypes').MeasuredDimensions;
 
   namespace Animated {
     type Nullable<T> = T | null | undefined;
@@ -495,20 +497,80 @@ 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 type FrameInfo = {
+    timestamp: number;
+    timeSincePreviousFrame: number | null;
+    timeSinceFirstFrame: number;
+  };
+  export function useFrameCallback(
+    callback: (frameInfo: FrameInfo) => 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 function useScrollViewOffset(
+    aref: RefObject<Animated.ScrollView>
+  ): SharedValue<number>;
 
   export interface ExitAnimationsValues {
     currentOriginX: number;
@@ -752,14 +814,7 @@ declare module 'react-native-reanimated' {
   export function defineAnimation<T>(starting: any, factory: () => T): number;
   export function measure<T extends Component>(
     ref: RefObject<T>
-  ): {
-    width: number;
-    height: number;
-    x: number;
-    y: number;
-    pageX: number;
-    pageY: number;
-  };
+  ): MeasuredDimensions | null;
 
   export function getRelativeCoords(
     ref: RefObject<Component>,

package/scripts/reanimated_utils.rb

@@ -0,0 +1,65 @@
+def try_to_parse_react_native_package_json(node_modules_dir)
+  react_native_package_json_path = File.join(node_modules_dir, 'react-native/package.json')
+  if !File.exists?(react_native_package_json_path)
+    return nil
+  end
+  return JSON.parse(File.read(react_native_package_json_path))
+end
+
+def find_config()
+  result = {
+    :is_reanimated_example_app => nil,
+    :react_native_version => nil,
+    :react_native_minor_version => nil,
+    :is_tvos_target => nil,
+    :react_native_node_modules_dir => nil,
+    :reanimated_node_modules_dir => nil,
+    :react_native_common_dir => nil,
+  }
+
+  react_native_node_modules_dir = File.join(File.dirname(`cd #{Pod::Config.instance.installation_root.to_s} && node --print "require.resolve('react-native/package.json')"`), '..')
+  react_native_json = try_to_parse_react_native_package_json(react_native_node_modules_dir)
+
+  if react_native_json == nil
+    # user configuration, just in case
+    node_modules_dir = ENV["REACT_NATIVE_NODE_MODULES_DIR"]
+    react_native_json = try_to_parse_react_native_package_json(node_modules_dir)
+  end
+
+  if react_native_json == nil
+    raise '[RNReanimated] Unable to recognize your `react-native` version! Please set environmental variable with `react-native` locations: `export REACT_NATIVE_NODE_MODULES_DIR="<path to react-native>" && pod install'
+  end
+
+  result[:is_reanimated_example_app] = ENV["REANIMATED_EXAMPLE_APP_NAME"] != nil
+  result[:is_tvos_target] = react_native_json['name'] == 'react-native-tvos'
+  result[:react_native_version] = react_native_json['version']
+  result[:react_native_minor_version] = react_native_json['version'].split('.')[1].to_i
+  result[:react_native_node_modules_dir] = File.expand_path(react_native_node_modules_dir)
+  result[:reanimated_node_modules_dir] = File.expand_path(File.join(__dir__, '..', '..'))
+  result[:react_native_common_dir] = File.join(react_native_node_modules_dir, 'react-native', 'ReactCommon')
+
+  return result
+end
+
+def assert_no_multiple_instances(react_native_info)
+  if react_native_info[:is_reanimated_example_app]
+    return
+  end
+
+  lib_instances_in_react_native_node_modules = %x[find #{react_native_info[:react_native_node_modules_dir]} -name "package.json" | grep "/react-native-reanimated/package.json"]
+  lib_instances_in_react_native_node_modules_array = lib_instances_in_react_native_node_modules.split("\n")
+  reanimated_instances = lib_instances_in_react_native_node_modules_array.length()
+  if react_native_info[:react_native_node_modules_dir] != react_native_info[:reanimated_node_modules_dir]
+    lib_instances_in_reanimated_node_modules = %x[find #{react_native_info[:reanimated_node_modules_dir]} -name "package.json" | grep "/react-native-reanimated/package.json"]
+    lib_instances_in_reanimated_node_modules_array = lib_instances_in_reanimated_node_modules.split("\n")
+    reanimated_instances += lib_instances_in_reanimated_node_modules_array.length()
+  end
+  if reanimated_instances > 1
+    parsed_location = ''
+    for location in lib_instances_in_react_native_node_modules_array + lib_instances_in_reanimated_node_modules_array
+      location['/package.json'] = ''
+      parsed_location += "- " + location + "\n"
+    end
+    raise "[Reanimated] Multiple versions of Reanimated were detected. Only one instance of react-native-reanimated can be installed in a project. You need to resolve the conflict manually. Check out the documentation: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/troubleshooting#multiple-versions-of-reanimated-were-detected \n\nConflict between: \n" + parsed_location
+  end
+end

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,7 @@
+// tree-shaken side effects
+import './reanimated2/js-reanimated/global';
+
+// @ts-ignore backward compatibility with treeshaking
+export * from './reanimated1';
+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

@@ -1,9 +1,8 @@
 /* global _WORKLET _measure _scrollTo _setGestureState */
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import { Component } from 'react';
 import { findNodeHandle } from 'react-native';
-import { RefObjectFunction } from './commonTypes';
+import { MeasuredDimensions } from './commonTypes';
+import { RefObjectFunction } from './hook/commonTypes';
 import { shouldBeUseWeb } from './PlatformChecker';
 
 export function getTag(
@@ -12,40 +11,58 @@ export function getTag(
   return findNodeHandle(view);
 }
 
-export interface MeasuredDimensions {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  pageX: number;
-  pageY: number;
-}
-
-const isNativeIndefined = shouldBeUseWeb();
+const isNative = !shouldBeUseWeb();
 
 export function measure(
   animatedRef: RefObjectFunction<Component>
-): MeasuredDimensions {
+): MeasuredDimensions | null {
   'worklet';
-  if (!_WORKLET || isNativeIndefined) {
+  if (!isNative) {
     console.warn(
-      '[reanimated.measure] method cannot be used for web or Chrome Debugger'
+      '[Reanimated] measure() cannot be used on web or Chrome Debugger'
     );
-    return {
-      x: NaN,
-      y: NaN,
-      width: NaN,
-      height: NaN,
-      pageX: NaN,
-      pageY: NaN,
-    };
+    return null;
   }
+
+  if (!_WORKLET) {
+    console.warn(
+      '[Reanimated] measure() was called from the main JS context. Measure is ' +
+        'only available in the UI runtime. This may also happen if measure() ' +
+        'was called by a worklet in the useAnimatedStyle hook, because useAnimatedStyle ' +
+        'calls the given worklet on the JS runtime during render. If you want to ' +
+        'prevent this warning then wrap the call with `if (_WORKLET)`. Then it will ' +
+        'only be called on the UI runtime after the render has been completed.'
+    );
+    return null;
+  }
+
   const viewTag = animatedRef();
-  const result = _measure(viewTag);
-  if (result.x === -1234567) {
-    throw new Error(`The view with tag ${viewTag} could not be measured`);
+  if (viewTag === -1) {
+    console.warn(
+      `[Reanimated] The view with tag ${viewTag} is not a valid argument for measure(). This may be because the view is not currently rendered, which may not be a bug (e.g. an off-screen FlatList item).`
+    );
+    return null;
+  }
+
+  const measured = _measure(viewTag);
+  if (measured === null) {
+    console.warn(
+      `[Reanimated] The view with tag ${viewTag} has some undefined, not-yet-computed or meaningless value of \`LayoutMetrics\` type. This may be because the view is not currently rendered, which may not be a bug (e.g. an off-screen FlatList item).`
+    );
+    return null;
+  } else if (measured.x === -1234567) {
+    console.warn(
+      `[Reanimated] The view with tag ${viewTag} returned an invalid measurement response`
+    );
+    return null;
+  } else if (isNaN(measured.x)) {
+    console.warn(
+      `[Reanimated] The view with tag ${viewTag} gets view-flattened on Android. To disable view-flattening, set \`collapsable={false}\` on this component.`
+    );
+    return null;
+  } else {
+    return measured;
   }
-  return result;
 }
 
 export function scrollTo(
@@ -55,7 +72,7 @@ export function scrollTo(
   animated: boolean
 ): void {
   'worklet';
-  if (!_WORKLET || isNativeIndefined) {
+  if (!_WORKLET || !isNative) {
     return;
   }
   const viewTag = animatedRef();
@@ -64,7 +81,7 @@ export function scrollTo(
 
 export function setGestureState(handlerTag: number, newState: number): void {
   'worklet';
-  if (!_WORKLET || isNativeIndefined) {
+  if (!_WORKLET || !isNative) {
     console.warn(
       '[Reanimated] You can not use setGestureState in non-worklet function.'
     );