react-native-reanimated 3.0.0-rc.2 → 3.0.0-rc.4

package/plugin.js

@@ -3,6 +3,7 @@ const generate = require('@babel/generator').default;
 const hash = require('string-hash-64');
 const traverse = require('@babel/traverse').default;
 const { transformSync } = require('@babel/core');
+const fs = require('fs');
 /**
  * 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)
  */
@@ -277,49 +278,105 @@ class ClosureGenerator {
   }
 }
 
-function buildWorkletString(t, fun, closureVariables, name) {
-  function prependClosureVariablesIfNecessary(closureVariables, body) {
-    if (closureVariables.length === 0) {
-      return body;
-    }
+function isRelease() {
+  return ['production', 'release'].includes(process.env.BABEL_ENV);
+}
 
-    return t.blockStatement([
-      t.variableDeclaration('const', [
-        t.variableDeclarator(
-          t.objectPattern(
-            closureVariables.map((variable) =>
-              t.objectProperty(
-                t.identifier(variable.name),
-                t.identifier(variable.name),
-                false,
-                true
-              )
+function shouldGenerateSourceMap() {
+  if (isRelease()) {
+    return false;
+  }
+
+  if (process.env.REANIMATED_PLUGIN_TESTS === 'jest') {
+    // We want to detect this, so we can disable source maps (because they break
+    // snapshot tests with jest).
+    return false;
+  }
+
+  return true;
+}
+
+function buildWorkletString(t, fun, closureVariables, name, inputMap) {
+  function prependClosureVariablesIfNecessary() {
+    const closureDeclaration = t.variableDeclaration('const', [
+      t.variableDeclarator(
+        t.objectPattern(
+          closureVariables.map((variable) =>
+            t.objectProperty(
+              t.identifier(variable.name),
+              t.identifier(variable.name),
+              false,
+              true
             )
-          ),
-          t.memberExpression(t.identifier('jsThis'), t.identifier('_closure'))
+          )
         ),
-      ]),
-      body,
+        t.memberExpression(t.identifier('jsThis'), t.identifier('_closure'))
+      ),
     ]);
-  }
 
-  traverse(fun, {
-    enter(path) {
-      t.removeComments(path.node);
-    },
-  });
+    function prependClosure(path) {
+      if (closureVariables.length === 0 || path.parent.type !== 'Program') {
+        return;
+      }
+
+      path.node.body.body.unshift(closureDeclaration);
+    }
+
+    return {
+      visitor: {
+        FunctionDeclaration(path) {
+          prependClosure(path);
+        },
+        FunctionExpression(path) {
+          prependClosure(path);
+        },
+        ArrowFunctionExpression(path) {
+          prependClosure(path);
+        },
+        ObjectMethod(path) {
+          prependClosure(path);
+        },
+      },
+    };
+  }
 
-  const expression = fun.program.body.find(
-    ({ type }) => type === 'ExpressionStatement'
-  ).expression;
+  const expression =
+    fun.program.body.find(({ type }) => type === 'FunctionDeclaration') ||
+    fun.program.body.find(({ type }) => type === 'ExpressionStatement')
+      .expression;
 
   const workletFunction = t.functionExpression(
     t.identifier(name),
     expression.params,
-    prependClosureVariablesIfNecessary(closureVariables, expression.body)
+    expression.body
   );
 
-  return generate(workletFunction, { compact: true }).code;
+  const code = generate(workletFunction).code;
+
+  if (shouldGenerateSourceMap()) {
+    // Clear contents array (should be empty anyways)
+    inputMap.sourcesContent = [];
+    // Include source contents in source map, because Flipper/iframe is not
+    // allowed to read files from disk.
+    for (const sourceFile of inputMap.sources) {
+      inputMap.sourcesContent.push(
+        fs.readFileSync(sourceFile).toString('utf-8')
+      );
+    }
+  }
+
+  const transformed = transformSync(code, {
+    plugins: [prependClosureVariablesIfNecessary()],
+    compact: !shouldGenerateSourceMap(),
+    sourceMaps: shouldGenerateSourceMap() ? 'inline' : false,
+    inputSourceMap: inputMap,
+    ast: false,
+    babelrc: false,
+    configFile: false,
+    comments: false,
+  });
+
+  return transformed.code;
 }
 
 function makeWorkletName(t, fun) {
@@ -342,11 +399,10 @@ function makeWorklet(t, fun, state) {
   const functionName = makeWorkletName(t, fun);
 
   const closure = new Map();
-  const outputs = new Set();
   const closureGenerator = new ClosureGenerator();
   const options = {};
 
-  // remove 'worklet'; directive before calling .toString()
+  // remove 'worklet'; directive before generating string
   fun.traverse({
     DirectiveLiteral(path) {
       if (path.node.value === 'worklet' && path.getFunctionParent() === fun) {
@@ -358,8 +414,17 @@ function makeWorklet(t, fun, state) {
   // We use copy because some of the plugins don't update bindings and
   // some even break them
 
+  const codeObject = generate(fun.node, {
+    sourceMaps: true,
+    sourceFileName: state.file.opts.filename,
+  });
+
+  // We need to add a newline at the end, because there could potentially be a
+  // comment after the function that gets included here, and then the closing
+  // bracket would become part of the comment thus resulting in an error, since
+  // there is a missing closing bracket.
   const code =
-    '\n(' + (t.isObjectMethod(fun) ? 'function ' : '') + fun.toString() + '\n)';
+    '(' + (t.isObjectMethod(fun) ? 'function ' : '') + codeObject.code + '\n)';
 
   const transformed = transformSync(code, {
     filename: state.file.opts.filename,
@@ -374,7 +439,9 @@ function makeWorklet(t, fun, state) {
     ast: true,
     babelrc: false,
     configFile: false,
+    inputSourceMap: codeObject.map,
   });
+
   if (
     fun.parent &&
     fun.parent.callee &&
@@ -418,17 +485,6 @@ function makeWorklet(t, fun, state) {
       closure.set(name, path.node);
       closureGenerator.addPath(name, path);
     },
-    AssignmentExpression(path) {
-      // test for <something>.value = <something> expressions
-      const left = path.node.left;
-      if (
-        t.isMemberExpression(left) &&
-        t.isIdentifier(left.object) &&
-        t.isIdentifier(left.property, { name: 'value' })
-      ) {
-        outputs.add(left.object.name);
-      }
-    },
   });
 
   const variables = Array.from(closure.values());
@@ -441,16 +497,18 @@ function makeWorklet(t, fun, state) {
   } else {
     funExpression = clone;
   }
+
   const funString = buildWorkletString(
     t,
     transformed.ast,
     variables,
-    functionName
+    functionName,
+    transformed.map
   );
   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);
   }

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;
@@ -543,8 +545,13 @@ declare module 'react-native-reanimated' {
     isActive: boolean;
     callbackId: number;
   };
+  export type FrameInfo = {
+    timestamp: number;
+    timeSincePreviousFrame: number | null;
+    timeSinceFirstFrame: number;
+  };
   export function useFrameCallback(
-    callback: () => void,
+    callback: (frameInfo: FrameInfo) => void,
     autostart?: boolean
   ): FrameCallback;
 
@@ -561,6 +568,10 @@ declare module 'react-native-reanimated' {
   };
   export function useAnimatedKeyboard(): AnimatedKeyboardInfo;
 
+  export function useScrollViewOffset(
+    aref: RefObject<Animated.ScrollView>
+  ): SharedValue<number>;
+
   export interface ExitAnimationsValues {
     currentOriginX: number;
     currentOriginY: number;
@@ -805,14 +816,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,77 @@
+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__, '..', '..'))
+
+  pods_root = Pod::Config.instance.project_pods_root
+  react_native_common_dir_absolute = File.join(react_native_node_modules_dir, 'react-native', 'ReactCommon')
+  react_native_common_dir_relative = Pathname.new(react_native_common_dir_absolute).relative_path_from(pods_root).to_s
+  result[:react_native_common_dir] = react_native_common_dir_relative
+
+  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 "[react-native-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
+
+def assert_no_reanimated2_with_new_architecture(reanimated_package_json)
+  reanimated_major_version = reanimated_package_json['version'].split('.')[0].to_i
+  fabric_enabled = ENV['RCT_NEW_ARCH_ENABLED'] == '1'
+  if fabric_enabled && reanimated_major_version == 2
+    raise "[react-native-reanimated] Reanimated 2.x does not support Fabric. Please upgrade to 3.x to use Reanimated with the New Architecture. For details, see https://blog.swmansion.com/announcing-reanimated-3-16167428c5f7"
+  end
+end

package/src/createAnimatedComponent.tsx

@@ -400,12 +400,11 @@ export default function createAnimatedComponent(
         // TODO update config
         const tag = findNodeHandle(ref);
         if (
+          !shouldBeUseWeb() &&
           (this.props.layout || this.props.entering || this.props.exiting) &&
           tag != null
         ) {
-          if (!shouldBeUseWeb()) {
-            enableLayoutAnimations(true, false);
-          }
+          enableLayoutAnimations(true, false);
           let layout = this.props.layout ? this.props.layout : DefaultLayout;
           let entering = this.props.entering
             ? this.props.entering

package/src/reanimated2/NativeMethods.ts

@@ -1,10 +1,9 @@
 /* global _WORKLET _measure _scrollTo _dispatchCommand _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 { shouldBeUseWeb } from './PlatformChecker';
+import { MeasuredDimensions } from './commonTypes';
+import { RefObjectFunction } from './hook/commonTypes';
+import { isChromeDebugger, isWeb, shouldBeUseWeb } from './PlatformChecker';
 
 export function getTag(
   view: null | number | React.Component<any, any> | React.ComponentClass<any>
@@ -12,45 +11,73 @@ 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(
+export let measure: (
   animatedRef: RefObjectFunction<Component>
-): MeasuredDimensions {
-  'worklet';
-  if (!_WORKLET || isNativeIndefined) {
-    console.warn(
-      '[reanimated.measure] method cannot be used for web or Chrome Debugger'
-    );
+) => MeasuredDimensions | null;
+
+if (isWeb()) {
+  measure = (animatedRef: RefObjectFunction<Component>) => {
+    const element = animatedRef() as unknown as HTMLElement; // TODO: fix typing of animated refs on web
+    const viewportOffset = element.getBoundingClientRect();
     return {
-      x: NaN,
-      y: NaN,
-      width: NaN,
-      height: NaN,
-      pageX: NaN,
-      pageY: NaN,
+      width: element.offsetWidth,
+      height: element.offsetHeight,
+      x: element.offsetLeft,
+      y: element.offsetTop,
+      pageX: viewportOffset.left,
+      pageY: viewportOffset.top,
     };
-  }
-  const viewTag = animatedRef();
-  const result = _measure(viewTag);
-  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;
+  };
+} else if (isChromeDebugger()) {
+  measure = (_animatedRef: RefObjectFunction<Component>) => {
+    console.warn('[Reanimated] measure() cannot be used with Chrome Debugger.');
+    return null;
+  };
+} else {
+  measure = (animatedRef: RefObjectFunction<Component>) => {
+    'worklet';
+    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();
+    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;
+    }
+  };
 }
 
 export function dispatchCommand(
@@ -59,7 +86,7 @@ export function dispatchCommand(
   args: Array<unknown>
 ): void {
   'worklet';
-  if (!_WORKLET || isNativeIndefined) {
+  if (!_WORKLET || !isNative) {
     return;
   }
   const shadowNodeWrapper = animatedRef();
@@ -73,7 +100,19 @@ export let scrollTo: (
   animated: boolean
 ) => void;
 
-if (global._IS_FABRIC) {
+if (isWeb()) {
+  scrollTo = (
+    animatedRef: RefObjectFunction<Component>,
+    x: number,
+    y: number,
+    animated: boolean
+  ) => {
+    'worklet';
+    const element = animatedRef() as unknown as HTMLElement;
+    // @ts-ignore same call as in react-native-web
+    element.scrollTo({ x, y, animated });
+  };
+} else if (isNative && global._IS_FABRIC) {
   scrollTo = (
     animatedRef: RefObjectFunction<Component>,
     x: number,
@@ -83,7 +122,7 @@ if (global._IS_FABRIC) {
     'worklet';
     dispatchCommand(animatedRef, 'scrollTo', [x, y, animated]);
   };
-} else {
+} else if (isNative) {
   scrollTo = (
     animatedRef: RefObjectFunction<Component>,
     x: number,
@@ -91,17 +130,25 @@ if (global._IS_FABRIC) {
     animated: boolean
   ) => {
     'worklet';
-    if (!_WORKLET || isNativeIndefined) {
+    if (!_WORKLET) {
       return;
     }
     const viewTag = animatedRef();
     _scrollTo(viewTag, x, y, animated);
   };
+} else {
+  scrollTo = (
+    _animatedRef: RefObjectFunction<Component>,
+    _x: number,
+    _y: number
+  ) => {
+    // no-op
+  };
 }
 
 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.'
     );

package/src/reanimated2/animation/delay.ts

@@ -75,15 +75,3 @@ export function withDelay(
     };
   });
 }
-
-/**
- * @deprecated Kept for backward compatibility. Will be removed soon.
- */
-export function delay(
-  delayMs: number,
-  _nextAnimation: NextAnimation<DelayAnimation>
-): Animation<DelayAnimation> {
-  'worklet';
-  console.warn('Method `delay` is deprecated. Please use `withDelay` instead');
-  return withDelay(delayMs, _nextAnimation);
-}

package/src/reanimated2/animation/repeat.ts

@@ -91,28 +91,3 @@ export function withRepeat(
     } as RepeatAnimation;
   });
 }
-
-/**
- * @deprecated Kept for backward compatibility. Will be removed soon.
- */
-export function repeat(
-  _nextAnimation: NextAnimation<RepeatAnimation>,
-  numberOfReps = 2,
-  reverse = false,
-  callback?: AnimationCallback
-): Animation<RepeatAnimation> {
-  'worklet';
-  console.warn(
-    'Method `repeat` is deprecated. Please use `withRepeat` instead'
-  );
-  return withRepeat(_nextAnimation, numberOfReps, reverse, callback);
-}
-
-export function loop(
-  nextAnimation: NextAnimation<RepeatAnimation>,
-  numberOfLoops = 1
-): Animation<RepeatAnimation> {
-  'worklet';
-  console.warn('Method `loop` is deprecated. Please use `withRepeat` instead');
-  return repeat(nextAnimation, Math.round(numberOfLoops * 2), true);
-}

package/src/reanimated2/animation/sequence.ts

@@ -83,16 +83,3 @@ export function withSequence(
     }
   );
 }
-
-/**
- * @deprecated Kept for backward compatibility. Will be removed soon.
- */
-export function sequence(
-  ..._animations: NextAnimation<SequenceAnimation>[]
-): Animation<SequenceAnimation> {
-  'worklet';
-  console.warn(
-    'Method `sequence` is deprecated. Please use `withSequence` instead'
-  );
-  return withSequence(..._animations);
-}

package/src/reanimated2/commonTypes.ts

@@ -161,3 +161,12 @@ 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/frameCallback/FrameCallbackRegistryJS.ts

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