react-native-reanimated 2.3.0-alpha.3 → 2.3.0-beta.4

package/lib/reanimated2/layoutReanimation/defaultTransitions/SequencedTransition.js

@@ -0,0 +1,46 @@
+import { withSequence, withTiming } from '../../animation';
+import { BaseAnimationBuilder } from '../animationBuilder';
+export class SequencedTransition extends BaseAnimationBuilder {
+    constructor() {
+        super(...arguments);
+        this.reversed = false;
+        this.build = () => {
+            var _a;
+            const delayFunction = this.getDelayFunction();
+            const callback = this.callbackV;
+            const delay = this.getDelay();
+            const sequenceDuration = ((_a = this.durationV) !== null && _a !== void 0 ? _a : 500) / 2;
+            const config = { duration: sequenceDuration };
+            const reverse = this.reversed;
+            return (values) => {
+                'worklet';
+                return {
+                    initialValues: {
+                        originX: values.boriginX,
+                        originY: values.boriginY,
+                        width: values.bwidth,
+                        height: values.bheight,
+                    },
+                    animations: {
+                        originX: delayFunction(delay, withSequence(withTiming(reverse ? values.boriginX : values.originX, config), withTiming(values.originX, config))),
+                        originY: delayFunction(delay, withSequence(withTiming(reverse ? values.originY : values.boriginY, config), withTiming(values.originY, config))),
+                        width: delayFunction(delay, withSequence(withTiming(reverse ? values.bwidth : values.width, config), withTiming(values.width, config))),
+                        height: delayFunction(delay, withSequence(withTiming(reverse ? values.height : values.bheight, config), withTiming(values.height, config))),
+                    },
+                    callback: callback,
+                };
+            };
+        };
+    }
+    static createInstance() {
+        return new SequencedTransition();
+    }
+    static reverse() {
+        const instance = SequencedTransition.createInstance();
+        return instance.reverse();
+    }
+    reverse() {
+        this.reversed = !this.reversed;
+        return this;
+    }
+}

package/lib/reanimated2/layoutReanimation/defaultTransitions/index.js

@@ -0,0 +1,6 @@
+export * from './LinearTransition';
+export * from './FadingTransition';
+export * from './SequencedTransition';
+export * from './JumpingTransition';
+export * from './CurvedTransition';
+export * from './EntryExitTransition';

package/lib/reanimated2/layoutReanimation/index.js

@@ -1,3 +1,4 @@
 import './LayoutAnimationRepository';
 export * from './animationBuilder';
 export * from './defaultAnimations';
+export * from './defaultTransitions';

package/lib/reanimated2/mock.js

@@ -6,14 +6,16 @@ const NOOP = () => {
     // noop
 };
 const ID = (t) => t;
+const IMMEDIATE_CB_INVOCATION = (cb) => cb();
 const ReanimatedV2 = {
     useSharedValue: (v) => ({ value: v }),
     useDerivedValue: (a) => ({ value: a() }),
     useAnimatedScrollHandler: () => NOOP,
     useAnimatedGestureHandler: () => NOOP,
-    useAnimatedStyle: (style) => style,
+    useAnimatedStyle: IMMEDIATE_CB_INVOCATION,
     useAnimatedRef: () => ({ current: null }),
     useAnimatedReaction: NOOP,
+    useAnimatedProps: IMMEDIATE_CB_INVOCATION,
     withTiming: (toValue, _, cb) => {
         cb && cb(true);
         return toValue;

package/lib/reanimated2/utils.js

@@ -0,0 +1,9 @@
+import { measure } from './NativeMethods';
+export function getRelativeCoords(parentRef, x, y) {
+    'worklet';
+    const parentCoords = measure(parentRef);
+    return {
+        x: x - parentCoords.x,
+        y: y - parentCoords.y,
+    };
+}

package/lib/setAndForwardRef.js

@@ -1,53 +1,19 @@
 /**
  * imported from react-native
  */
-
-/**
- * This is a helper function for when a component needs to be able to forward a ref
- * to a child component, but still needs to have access to that component as part of
- * its implementation.
- *
- * Its main use case is in wrappers for native components.
- *
- * Usage:
- *
- *   class MyView extends React.Component {
- *     _nativeRef = null;
- *
- *     _setNativeRef = setAndForwardRef({
- *       getForwardedRef: () => this.props.forwardedRef,
- *       setLocalRef: ref => {
- *         this._nativeRef = ref;
- *       },
- *     });
- *
- *     render() {
- *       return <View ref={this._setNativeRef} />;
- *     }
- *   }
- *
- *   const MyViewWithRef = React.forwardRef((props, ref) => (
- *     <MyView {...props} forwardedRef={ref} />
- *   ));
- *
- *   module.exports = MyViewWithRef;
- */
-
-function setAndForwardRef({ getForwardedRef, setLocalRef }) {
-  return function forwardRef(ref) {
-    const forwardedRef = getForwardedRef();
-
-    setLocalRef(ref);
-
-    // Forward to user ref prop (if one has been specified)
-    if (typeof forwardedRef === 'function') {
-      // Handle function-based refs. String-based refs are handled as functions.
-      forwardedRef(ref);
-    } else if (typeof forwardedRef === 'object' && forwardedRef != null) {
-      // Handle createRef-based refs
-      forwardedRef.current = ref;
-    }
-  };
+function setAndForwardRef({ getForwardedRef, setLocalRef, }) {
+    return function forwardRef(ref) {
+        const forwardedRef = getForwardedRef();
+        setLocalRef(ref);
+        // Forward to user ref prop (if one has been specified)
+        if (typeof forwardedRef === 'function') {
+            // Handle function-based refs. String-based refs are handled as functions.
+            forwardedRef(ref);
+        }
+        else if (typeof forwardedRef === 'object' && forwardedRef != null) {
+            // Handle createRef-based refs
+            forwardedRef.current = ref;
+        }
+    };
 }
-
 export default setAndForwardRef;

package/mock.js

@@ -86,7 +86,7 @@ function createTransitioningComponent(Component) {
     }
 
     render() {
-      return <Component {...this.props} />;
+      return React.createElement(Component, this.props);
     }
   };
 }

package/package.json

@@ -1,14 +1,21 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.3.0-alpha.3",
+  "version": "2.3.0-beta.4",
   "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 && yarn run lint-check && yarn run test:unit",
+    "test": "yarn run format:js && yarn run lint:js && yarn run test:unit",
     "test:unit": "jest",
-    "format": "prettier --write --list-different './src/'",
-    "lint-check": "eslint --ext '.js,.ts,.tsx' src/ && yarn prettier --check src/",
-    "lint-check-cpp": "./scripts/cpplint.sh",
+    "lint": "yarn lint:js && yarn lint:cpp && yarn lint:java",
+    "lint:js": "eslint --ext '.js,.ts,.tsx' src/ && yarn prettier --check src/",
+    "lint:java": "./android/gradlew -p android spotlessCheck -q",
+    "lint:cpp": "./scripts/cpplint.sh",
+    "format": "yarn format:js && yarn format:java && yarn format:ios && yarn format:android && yarn format:common",
+    "format:js": "prettier --write --list-different './src/'",
+    "format:java": "node ./scripts/format-java.js",
+    "format:ios": "find ios/ -iname *.h -o -iname *.m -o -iname *.mm -o -iname *.cpp | xargs clang-format -i",
+    "format:android": "find android/src/ -iname *.h -o -iname *.cpp | xargs clang-format -i",
+    "format:common": "find Common/ -iname *.h -o -iname *.cpp | xargs clang-format -i",
     "release": "npm login && release-it",
     "type:check": "yarn tsc --noEmit",
     "type:generate": "yarn type:generate:clean && yarn type:generate:cp-js-src && yarn type:generate:tsc && yarn type:generate:remove.ts && yarn type:generate:remove.tsx",
@@ -16,7 +23,8 @@
     "type:generate:cp-js-src": "cp -RL src/ lib/",
     "type:generate:tsc": "yarn tsc",
     "type:generate:remove.ts": "find ./lib -type f -name \"*.ts\" -and -not -name \"*.d.ts\" -delete",
-    "type:generate:remove.tsx": "find ./lib -type f -name \"*.tsx\" -and -not -name \"*.d.ts\" -delete"
+    "type:generate:remove.tsx": "find ./lib -type f -name \"*.tsx\" -and -not -name \"*.d.ts\" -delete",
+    "prepare": "husky install"
   },
   "main": "lib/Animated.js",
   "module": "lib/Animated",
@@ -27,6 +35,7 @@
     "Common/",
     "src/",
     "lib/",
+    "libSo/",
     "android/src/main/AndroidManifest.xml",
     "android/src/main/java/",
     "android/build.gradle",
@@ -59,6 +68,7 @@
   "homepage": "https://github.com/software-mansion/react-native-reanimated#readme",
   "dependencies": {
     "@babel/plugin-transform-object-assign": "^7.10.4",
+    "@types/invariant": "^2.2.35",
     "invariant": "^2.2.4",
     "lodash.isequal": "^4.5.0",
     "mockdate": "^3.0.2",
@@ -85,12 +95,13 @@
     "@types/babel__generator": "^7.6.2",
     "@types/babel__traverse": "^7.0.15",
     "@types/jest": "^26.0.15",
-    "@types/react-native": "^0.64.2",
+    "@types/react-native": "^0.65.1",
     "@typescript-eslint/eslint-plugin": "^4.15.1",
     "@typescript-eslint/parser": "^4.15.1",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^26.6.3",
     "babel-plugin-module-resolver": "^4.1.0",
+    "clang-format": "^1.5.0",
     "eslint": "^7.31.0",
     "eslint-config-prettier": "^6.4.0",
     "eslint-config-standard": "^14.1.0",
@@ -99,28 +110,28 @@
     "eslint-plugin-node": "^10.0.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
-    "husky": "^4.2.5",
+    "husky": "^7.0.0",
     "jest": "^26.6.3",
-    "lint-staged": "^10.2.11",
+    "lint-staged": "^11.2.0",
     "prettier": "^2.2.1",
     "react": "17.0.2",
-    "react-native": "0.65.1",
+    "react-native": "0.67.0-rc.3",
     "react-native-codegen": "^0.0.7",
     "react-native-gesture-handler": "^1.6.1",
     "react-test-renderer": "17.0.2",
-    "release-it": "^13.1.1",
+    "release-it": "^13.7.2",
     "typescript": "^4.1.3"
   },
   "lint-staged": {
     "*.(js|ts|tsx)": [
       "eslint --ext '.js,.ts,.tsx' src/ --ignore-pattern src/reanimated1 --ignore-pattern react-native-reanimated.d.ts",
       "prettier --write"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+    ],
+    "**/*.{h,cpp}": "yarn lint:cpp",
+    "android/src/**/*.java": "yarn format:java",
+    "android/src/**/*.{h,cpp}": "yarn format:android",
+    "ios/**/*.{h,m,mm,cpp}": "yarn format:ios",
+    "Common/**/*.{h,cpp}": "yarn format:common"
   },
   "release-it": {
     "hooks": {

package/plugin.js

@@ -69,6 +69,7 @@ const globals = new Set([
   'global',
   '_measure',
   '_scrollTo',
+  '_setGestureState',
   '_getCurrentTime',
   '_eventTimestamp',
   '_frameTimestamp',
@@ -135,6 +136,33 @@ const blacklistedFunctions = new Set([
 
 const possibleOptFunction = new Set(['interpolate']);
 
+const gestureHandlerGestureObjects = new Set([
+  // from https://github.com/software-mansion/react-native-gesture-handler/blob/new-api/src/handlers/gestures/gestureObjects.ts
+  'Tap',
+  'Pan',
+  'Pinch',
+  'Rotation',
+  'Fling',
+  'LongPress',
+  'ForceTouch',
+  'Native',
+  'Custom',
+  'Race',
+  'Simultaneous',
+  'Exclusive',
+]);
+
+const gestureHandlerBuilderMethods = new Set([
+  'onBegin',
+  'onStart',
+  'onEnd',
+  'onUpdate',
+  'onTouchesDown',
+  'onTouchesMove',
+  'onTouchesUp',
+  'onTouchesCancelled',
+]);
+
 class ClosureGenerator {
   constructor() {
     this.trie = [{}, false];
@@ -285,20 +313,45 @@ function buildWorkletString(t, fun, closureVariables, name) {
   return generate(workletFunction, { compact: true }).code;
 }
 
-function processWorkletFunction(t, fun, fileName) {
-  if (!t.isFunctionParent(fun)) {
-    return;
+function makeWorkletName(t, fun) {
+  if (t.isObjectMethod(fun)) {
+    return fun.node.key.name;
+  }
+  if (t.isFunctionDeclaration(fun)) {
+    return fun.node.id.name;
+  }
+  if (t.isFunctionExpression(fun) && t.isIdentifier(fun.node.id)) {
+    return fun.node.id.name;
   }
-  const functionName = fun.node.id ? fun.node.id.name : '_f';
+  return '_f'; // fallback for ArrowFunctionExpression and unnamed FunctionExpression
+}
+
+function makeWorklet(t, fun, fileName) {
+  // Returns a new FunctionExpression which is a workletized version of provided
+  // FunctionDeclaration, FunctionExpression, ArrowFunctionExpression or ObjectMethod.
+
+  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()
+  fun.traverse({
+    DirectiveLiteral(path) {
+      if (path.node.value === 'worklet' && path.getFunctionParent() === fun) {
+        path.parentPath.remove();
+      }
+    },
+  });
+
   // We use copy because some of the plugins don't update bindings and
   // some even break them
-  const code = '\n(' + fun.toString() + '\n)';
+
+  const code =
+    '\n(' + (t.isObjectMethod(fun) ? 'function ' : '') + fun.toString() + '\n)';
+
   const transformed = transformSync(code, {
     filename: fileName,
     presets: ['@babel/preset-typescript'],
@@ -357,7 +410,7 @@ function processWorkletFunction(t, fun, fileName) {
       closureGenerator.addPath(name, path);
     },
     AssignmentExpression(path) {
-      // test for <somethin>.value = <something> expressions
+      // test for <something>.value = <something> expressions
       const left = path.node.left;
       if (
         t.isMemberExpression(left) &&
@@ -369,13 +422,6 @@ function processWorkletFunction(t, fun, fileName) {
     },
   });
 
-  fun.traverse({
-    DirectiveLiteral(path) {
-      if (path.node.value === 'worklet' && path.getFunctionParent() === fun) {
-        path.parentPath.remove();
-      }
-    },
-  });
   const variables = Array.from(closure.values());
 
   const privateFunctionId = t.identifier('_f');
@@ -391,7 +437,7 @@ function processWorkletFunction(t, fun, fileName) {
     transformed.ast,
     variables,
     functionName
-  ).replace("'worklet';", '');
+  );
   const workletHash = hash(funString);
 
   const loc = fun && fun.node && fun.node.loc && fun.node.loc.start;
@@ -402,7 +448,7 @@ function processWorkletFunction(t, fun, fileName) {
     }
   }
 
-  const steatmentas = [
+  const statements = [
     t.variableDeclaration('const', [
       t.variableDeclarator(privateFunctionId, funExpression),
     ]),
@@ -445,7 +491,7 @@ function processWorkletFunction(t, fun, fileName) {
   ];
 
   if (options && options.optFlags) {
-    steatmentas.push(
+    statements.push(
       t.expressionStatement(
         t.assignmentExpression(
           '=',
@@ -460,7 +506,7 @@ function processWorkletFunction(t, fun, fileName) {
     );
   }
 
-  steatmentas.push(
+  statements.push(
     t.expressionStatement(
       t.callExpression(
         t.memberExpression(
@@ -472,20 +518,30 @@ function processWorkletFunction(t, fun, fileName) {
       )
     )
   );
-  steatmentas.push(t.returnStatement(privateFunctionId));
+  statements.push(t.returnStatement(privateFunctionId));
 
-  const newFun = t.functionExpression(
-    fun.id,
-    [],
-    t.blockStatement(steatmentas)
-  );
+  const newFun = t.functionExpression(fun.id, [], t.blockStatement(statements));
+
+  return newFun;
+}
+
+function processWorkletFunction(t, fun, fileName) {
+  // Replaces FunctionDeclaration, FunctionExpression or ArrowFunctionExpression
+  // with a workletized version of itself.
+
+  if (!t.isFunctionParent(fun)) {
+    return;
+  }
+
+  const newFun = makeWorklet(t, fun, fileName);
 
   const replacement = t.callExpression(newFun, []);
+
   // we check if function needs to be assigned to variable declaration.
   // This is needed if function definition directly in a scope. Some other ways
   // where function definition can be used is for example with variable declaration:
   // const ggg = function foo() { }
-  // ^ in such a case we don't need to definte variable for the function
+  // ^ in such a case we don't need to define variable for the function
   const needDeclaration =
     t.isScopable(fun.parent) || t.isExportNamedDeclaration(fun.parent);
   fun.replaceWith(
@@ -497,6 +553,23 @@ function processWorkletFunction(t, fun, fileName) {
   );
 }
 
+function processWorkletObjectMethod(t, path, fileName) {
+  // Replaces ObjectMethod with a workletized version of itself.
+
+  if (!t.isFunctionParent(path)) {
+    return;
+  }
+
+  const newFun = makeWorklet(t, path, fileName);
+
+  const replacement = t.objectProperty(
+    t.identifier(path.node.key.name),
+    t.callExpression(newFun, [])
+  );
+
+  path.replaceWith(replacement);
+}
+
 function processIfWorkletNode(t, fun, fileName) {
   fun.traverse({
     DirectiveLiteral(path) {
@@ -522,6 +595,115 @@ function processIfWorkletNode(t, fun, fileName) {
   });
 }
 
+function processIfGestureHandlerEventCallbackFunctionNode(t, fun, fileName) {
+  // Auto-workletizes React Native Gesture Handler callback functions.
+  // Detects `Gesture.Tap().onEnd(<fun>)` or similar, but skips `something.onEnd(<fun>)`.
+  // Supports method chaining as well, e.g. `Gesture.Tap().onStart(<fun1>).onUpdate(<fun2>).onEnd(<fun3>)`.
+
+  // Example #1: `Gesture.Tap().onEnd(<fun>)`
+  /*
+  CallExpression(
+    callee: MemberExpression(
+      object: CallExpression(
+        callee: MemberExpression(
+          object: Identifier('Gesture')
+          property: Identifier('Tap')
+        )
+      )
+      property: Identifier('onEnd')
+    )
+    arguments: [fun]
+  )
+  */
+
+  // Example #2: `Gesture.Tap().onStart(<fun1>).onUpdate(<fun2>).onEnd(<fun3>)`
+  /*
+  CallExpression(
+    callee: MemberExpression(
+      object: CallExpression(
+        callee: MemberExpression(
+          object: CallExpression(
+            callee: MemberExpression(
+              object: CallExpression(
+                callee: MemberExpression(
+                  object: Identifier('Gesture')
+                  property: Identifier('Tap')
+                )
+              )
+              property: Identifier('onStart')
+            )
+            arguments: [fun1]
+          )
+          property: Identifier('onUpdate')
+        )
+        arguments: [fun2]
+      )
+      property: Identifier('onEnd')
+    )
+    arguments: [fun3]
+  )
+  */
+
+  if (
+    t.isCallExpression(fun.parent) &&
+    isGestureObjectEventCallbackMethod(t, fun.parent.callee)
+  ) {
+    processWorkletFunction(t, fun, fileName);
+  }
+}
+
+function isGestureObjectEventCallbackMethod(t, node) {
+  // Checks if node matches the pattern `Gesture.Foo()[*].onBar`
+  // where `[*]` represents any number of method calls.
+  return (
+    t.isMemberExpression(node) &&
+    t.isIdentifier(node.property) &&
+    gestureHandlerBuilderMethods.has(node.property.name) &&
+    containsGestureObject(t, node.object)
+  );
+}
+
+function containsGestureObject(t, node) {
+  // Checks if node matches the pattern `Gesture.Foo()[*]`
+  // where `[*]` represents any number of chained method calls, like `.something(42)`.
+
+  // direct call
+  if (isGestureObject(t, node)) {
+    return true;
+  }
+
+  // method chaining
+  if (
+    t.isCallExpression(node) &&
+    t.isMemberExpression(node.callee) &&
+    containsGestureObject(t, node.callee.object)
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+function isGestureObject(t, node) {
+  // Checks if node matches `Gesture.Tap()` or similar.
+  /*
+  node: CallExpression(
+    callee: MemberExpression(
+      object: Identifier('Gesture')
+      property: Identifier('Tap')
+    )
+  )
+  */
+  return (
+    t.isCallExpression(node) &&
+    t.isMemberExpression(node.callee) &&
+    t.isIdentifier(node.callee.object) &&
+    node.callee.object.name === 'Gesture' &&
+    t.isIdentifier(node.callee.property) &&
+    gestureHandlerGestureObjects.has(node.callee.property.name)
+  );
+}
+
 function processWorklets(t, path, fileName) {
   const name =
     path.node.callee.type === 'MemberExpression'
@@ -531,17 +713,14 @@ function processWorklets(t, path, fileName) {
     objectHooks.has(name) &&
     path.get('arguments.0').type === 'ObjectExpression'
   ) {
-    const objectPath = path.get('arguments.0.properties.0');
-    if (!objectPath) {
-      // edge case empty object
-      return;
-    }
-    for (let i = 0; i < objectPath.container.length; i++) {
-      processWorkletFunction(
-        t,
-        objectPath.getSibling(i).get('value'),
-        fileName
-      );
+    const properties = path.get('arguments.0.properties');
+    for (const property of properties) {
+      if (t.isObjectMethod(property)) {
+        processWorkletObjectMethod(t, property, fileName);
+      } else {
+        const value = property.get('value');
+        processWorkletFunction(t, value, fileName);
+      }
     }
   } else {
     const indexes = functionArgsToWorkletize.get(name);
@@ -558,7 +737,7 @@ const STATEMENTLESS_FLAG = 0b00000010;
 
 function isPossibleOptimization(fun) {
   let isFunctionCall = false;
-  let isSteatements = false;
+  let isStatement = false;
   traverse(fun, {
     CallExpression(path) {
       if (!possibleOptFunction.has(path.node.callee.name)) {
@@ -566,14 +745,14 @@ function isPossibleOptimization(fun) {
       }
     },
     IfStatement() {
-      isSteatements = true;
+      isStatement = true;
     },
   });
   let flags = 0;
   if (!isFunctionCall) {
     flags = flags | FUNCTIONLESS_FLAG;
   }
-  if (!isSteatements) {
+  if (!isStatement) {
     flags = flags | STATEMENTLESS_FLAG;
   }
   return flags;
@@ -597,7 +776,9 @@ module.exports = function ({ types: t }) {
       },
       'FunctionDeclaration|FunctionExpression|ArrowFunctionExpression': {
         enter(path, state) {
-          processIfWorkletNode(t, path, state.file.opts.filename);
+          const fileName = state.file.opts.filename;
+          processIfWorkletNode(t, path, fileName);
+          processIfGestureHandlerEventCallbackFunctionNode(t, path, fileName);
         },
       },
     },