react-native-reanimated 2.3.0-beta.1 → 2.3.0

package/plugin.js

@@ -69,6 +69,7 @@ const globals = new Set([
   'global',
   '_measure',
   '_scrollTo',
+  '_setGestureState',
   '_getCurrentTime',
   '_eventTimestamp',
   '_frameTimestamp',
@@ -145,61 +146,22 @@ const gestureHandlerGestureObjects = new Set([
   'LongPress',
   'ForceTouch',
   'Native',
+  'Manual',
   'Race',
   'Simultaneous',
   'Exclusive',
 ]);
 
 const gestureHandlerBuilderMethods = new Set([
-  // BaseGesture
-  'withRef',
-  'onBegan',
+  'onBegin',
   'onStart',
   'onEnd',
-  'enabled',
-  'shouldCancelWhenOutside',
-  'hitSlop',
-  'simultaneousWithExternalGesture',
-  'requireExternalGestureToFail',
-
-  // ContinousBaseGesture
+  'onFinalize',
   'onUpdate',
-
-  // TapGesture
-  'minPointers',
-  'numberOfTaps',
-  'maxDistance',
-  'maxDuration',
-  'maxDelay',
-  'maxDeltaX',
-  'maxDeltaY',
-
-  // PanGesture
-  'activeOffsetY',
-  'activeOffsetX',
-  'failOffsetY',
-  'failOffsetX',
-  'minPointers',
-  'minDistance',
-  'averageTouches',
-  'enableTrackpadTwoFingerGesture',
-
-  // FlingGesture
-  'numberOfPointers',
-  'direction',
-
-  // LongPress
-  'minDuration',
-  'maxDistance',
-
-  // ForceTouchGesture:
-  'minForce',
-  'maxForce',
-  'feedbackOnActivation',
-
-  // NativeGesture
-  'shouldActivateOnStart',
-  'disallowInterruption',
+  'onTouchesDown',
+  'onTouchesMove',
+  'onTouchesUp',
+  'onTouchesCancelled',
 ]);
 
 class ClosureGenerator {
@@ -352,20 +314,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;
   }
-  const functionName = fun.node.id ? fun.node.id.name : '_f';
+  if (t.isFunctionDeclaration(fun)) {
+    return fun.node.id.name;
+  }
+  if (t.isFunctionExpression(fun) && t.isIdentifier(fun.node.id)) {
+    return fun.node.id.name;
+  }
+  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'],
@@ -424,7 +411,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) &&
@@ -436,13 +423,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');
@@ -458,7 +438,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;
@@ -469,7 +449,7 @@ function processWorkletFunction(t, fun, fileName) {
     }
   }
 
-  const steatmentas = [
+  const statements = [
     t.variableDeclaration('const', [
       t.variableDeclarator(privateFunctionId, funExpression),
     ]),
@@ -512,7 +492,7 @@ function processWorkletFunction(t, fun, fileName) {
   ];
 
   if (options && options.optFlags) {
-    steatmentas.push(
+    statements.push(
       t.expressionStatement(
         t.assignmentExpression(
           '=',
@@ -527,7 +507,7 @@ function processWorkletFunction(t, fun, fileName) {
     );
   }
 
-  steatmentas.push(
+  statements.push(
     t.expressionStatement(
       t.callExpression(
         t.memberExpression(
@@ -539,20 +519,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(
@@ -564,6 +554,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) {
@@ -648,36 +655,33 @@ function processIfGestureHandlerEventCallbackFunctionNode(t, fun, fileName) {
 
 function isGestureObjectEventCallbackMethod(t, node) {
   // Checks if node matches the pattern `Gesture.Foo()[*].onBar`
-  // where `[*]` represents any number of `.onBar(...)` or similar method calls.
-  /*
-  node: MemberExpression(
-    object: CallExpression(
-      callee: MemberExpression(
-        object: Identifier('Gesture')
-        property: Identifier('Tap')
-      )
-    )
-    property: Identifier('onEnd')
-  )
-  */
-  if (
+  // where `[*]` represents any number of method calls.
+  return (
     t.isMemberExpression(node) &&
     t.isIdentifier(node.property) &&
-    gestureHandlerBuilderMethods.has(node.property.name)
-  ) {
-    // direct call
-    if (isGestureObject(t, node.object)) {
-      return true;
-    }
+    gestureHandlerBuilderMethods.has(node.property.name) &&
+    containsGestureObject(t, node.object)
+  );
+}
 
-    // method chaining
-    if (
-      t.isCallExpression(node.object) &&
-      isGestureObjectEventCallbackMethod(t, node.object.callee)
-    ) {
-      return true;
-    }
+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;
 }
 
@@ -710,17 +714,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);
@@ -737,7 +738,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)) {
@@ -745,14 +746,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;

package/react-native-reanimated.d.ts

@@ -26,6 +26,7 @@ declare module 'react-native-reanimated' {
     Text as ReactNativeText,
     Image as ReactNativeImage,
     ScrollView as ReactNativeScrollView,
+    FlatList as ReactNativeFlatList,
     NativeScrollEvent,
     NativeSyntheticEvent,
     ColorValue,
@@ -36,6 +37,18 @@ declare module 'react-native-reanimated' {
     GestureHandlerGestureEvent,
     PanGestureHandlerGestureEvent,
   } from 'react-native-gesture-handler';
+
+  export {
+    Animation,
+    TimingAnimation,
+    SpringAnimation,
+    DecayAnimation,
+    DelayAnimation,
+    RepeatAnimation,
+    SequenceAnimation,
+    StyleLayoutAnimation,
+  } from './src/reanimated2/animation/index';
+
   namespace Animated {
     type Nullable<T> = T | null | undefined;
     class AnimatedNode<T> {
@@ -244,6 +257,10 @@ declare module 'react-native-reanimated' {
       getNode(): ReactNativeScrollView;
     }
     export class Code extends Component<CodeProps> {}
+    export class FlatList extends Component<AnimateProps<FlatList>> {
+      itemLayoutAnimation: ILayoutAnimationBuilder;
+      getNode(): ReactNativeFlatList;
+    }
 
     type Options<P> = {
       setNativeProps: (ref: any, props: P) => void;
@@ -439,34 +456,45 @@ declare module 'react-native-reanimated' {
     animations: AnimateStyle;
   };
 
-  export type EntryExitAnimationsValues = {
-    originX: number;
-    originY: number;
-    width: number;
-    height: number;
-    globalOriginX: number;
-    globalOriginY: number;
-  };
+  export interface EntryAnimationsValues {
+    targetOriginX: number;
+    targetOriginY: number;
+    targetWidth: number;
+    targetHeight: number;
+    targetGlobalOriginX: number;
+    targetGlobalOriginY: number;
+  }
+
+  export interface ExitAnimationsValues {
+    currentOriginX: number;
+    currentOriginY: number;
+    currentWidth: number;
+    currentHeight: number;
+    currentGlobalOriginX: number;
+    currentGlobalOriginY: number;
+  }
+
   export type EntryExitAnimationFunction = (
-    targetValues: EntryExitAnimationsValues
+    targetValues: EntryAnimationsValues | ExitAnimationsValues
   ) => LayoutAnimation;
 
   export type LayoutAnimationsValues = {
-    originX: number;
-    originY: number;
-    width: number;
-    height: number;
-    globalOriginX: number;
-    globalOriginY: number;
-    boriginX: number;
-    boriginY: number;
-    bwidth: number;
-    bheight: number;
-    bglobalOriginX: number;
-    bglobalOriginY: number;
+    currentOriginX: number;
+    currentOriginY: number;
+    currentWidth: number;
+    currentHeight: number;
+    currentGlobalOriginX: number;
+    currentGlobalOriginY: number;
+    targetOriginX: number;
+    targetOriginY: number;
+    targetWidth: number;
+    targetHeight: number;
+    targetGlobalOriginX: number;
+    targetGlobalOriginY: number;
     windowWidth: number;
     windowHeight: number;
   };
+
   export type LayoutAnimationFunction = (
     targetValues: LayoutAnimationsValues
   ) => LayoutAnimation;
@@ -479,7 +507,7 @@ declare module 'react-native-reanimated' {
     build: () => EntryExitAnimationFunction;
   }
 
-  export type PrimitiveValue = number | string;
+  export type AnimatableValue = number | string | Array<number>;
 
   // reanimated2 derived operations
   export enum Extrapolation {
@@ -511,7 +539,7 @@ declare module 'react-native-reanimated' {
   // reanimated2 animations
   export type AnimationCallback = (
     finished?: boolean,
-    current?: PrimitiveValue
+    current?: AnimatableValue
   ) => void;
   export interface WithTimingConfig {
     duration?: number;
@@ -533,12 +561,12 @@ declare module 'react-native-reanimated' {
     velocity?: number;
   }
   export function withTiming(
-    toValue: PrimitiveValue,
+    toValue: AnimatableValue,
     userConfig?: WithTimingConfig,
     callback?: AnimationCallback
   ): number;
   export function withSpring(
-    toValue: PrimitiveValue,
+    toValue: AnimatableValue,
     userConfig?: WithSpringConfig,
     callback?: AnimationCallback
   ): number;
@@ -649,6 +677,15 @@ declare module 'react-native-reanimated' {
     pageY: number;
   };
 
+  export function getRelativeCoords(
+    ref: RefObject<Component>,
+    x: number,
+    y: number
+  ): {
+    x: number;
+    y: number;
+  };
+
   export function scrollTo(
     ref: RefObject<ReactNativeScrollView | ScrollView>,
     x: number,
@@ -1050,4 +1087,5 @@ declare module 'react-native-reanimated' {
   export const SpringUtils: typeof Animated.SpringUtils;
   export const useValue: typeof Animated.useValue;
   export const ReverseAnimation: typeof Animated.ReverseAnimation;
+  export function enableLayoutAnimations(flag: boolean): void;
 }

package/src/Animated.js

@@ -1,17 +1,15 @@
-import { Image, ScrollView, Text, View } from 'react-native';
+import { LogBox } from 'react-native';
 import createAnimatedComponent from './createAnimatedComponent';
 import {
   addWhitelistedNativeProps,
   addWhitelistedUIProps,
 } from './ConfigHelper';
 import * as reanimated1 from './reanimated1';
+import ReanimatedComponents from './reanimated2/component';
 
 const Animated = {
   // components
-  View: createAnimatedComponent(View),
-  Text: createAnimatedComponent(Text),
-  Image: createAnimatedComponent(Image),
-  ScrollView: createAnimatedComponent(ScrollView),
+  ...ReanimatedComponents,
   createAnimatedComponent,
   // configuration
   addWhitelistedNativeProps,
@@ -23,3 +21,11 @@ const Animated = {
 export * from './reanimated2';
 export * from './reanimated1';
 export default Animated;
+
+// I think we can ignore this message as long as Gesture Handler doesn't
+// try to load the Reanimated module. I figured it should be here instead of
+// RNGH because this prevents the message from being displayed for all
+// versions of RNGH.
+LogBox.ignoreLogs([
+  'RCTBridge required dispatch_sync to load RNGestureHandlerModule. This may lead to deadlocks',
+]);

package/src/{ConfigHelper.js → ConfigHelper.ts}

@@ -3,7 +3,7 @@ import ReanimatedModule from './ReanimatedModule';
 /**
  * Styles allowed to be direcly updated in UI thread
  */
-let UI_THREAD_PROPS_WHITELIST = {
+let UI_THREAD_PROPS_WHITELIST: Record<string, boolean> = {
   opacity: true,
   transform: true,
   /* colors */
@@ -28,7 +28,7 @@ let UI_THREAD_PROPS_WHITELIST = {
 /**
  * Whitelist of view props that can be updated in native thread via UIManagerModule
  */
-let NATIVE_THREAD_PROPS_WHITELIST = {
+let NATIVE_THREAD_PROPS_WHITELIST: Record<string, boolean> = {
   borderBottomWidth: true,
   borderEndWidth: true,
   borderLeftWidth: true,
@@ -106,14 +106,16 @@ let NATIVE_THREAD_PROPS_WHITELIST = {
   placeholderTextColor: true,
 };
 
-function configureProps() {
+function configureProps(): void {
   ReanimatedModule.configureProps(
     Object.keys(NATIVE_THREAD_PROPS_WHITELIST),
     Object.keys(UI_THREAD_PROPS_WHITELIST)
   );
 }
 
-export function addWhitelistedNativeProps(props) {
+export function addWhitelistedNativeProps(
+  props: Record<string, boolean>
+): void {
   const oldSize = Object.keys(NATIVE_THREAD_PROPS_WHITELIST).length;
   NATIVE_THREAD_PROPS_WHITELIST = {
     ...NATIVE_THREAD_PROPS_WHITELIST,
@@ -124,7 +126,7 @@ export function addWhitelistedNativeProps(props) {
   }
 }
 
-export function addWhitelistedUIProps(props) {
+export function addWhitelistedUIProps(props: Record<string, boolean>): void {
   const oldSize = Object.keys(UI_THREAD_PROPS_WHITELIST).length;
   UI_THREAD_PROPS_WHITELIST = { ...UI_THREAD_PROPS_WHITELIST, ...props };
   if (oldSize !== Object.keys(UI_THREAD_PROPS_WHITELIST).length) {
@@ -133,17 +135,23 @@ export function addWhitelistedUIProps(props) {
 }
 
 const PROCESSED_VIEW_NAMES = new Set();
+
+interface ViewConfig {
+  uiViewClassName: string;
+  validAttributes: Record<string, unknown>;
+}
 /**
  * updates UI props whitelist for given view host instance
  * this will work just once for every view name
  */
-export function adaptViewConfig(viewConfig) {
+
+export function adaptViewConfig(viewConfig: ViewConfig): void {
   const viewName = viewConfig.uiViewClassName;
   const props = viewConfig.validAttributes;
 
   // update whitelist of UI props for this view name only once
   if (!PROCESSED_VIEW_NAMES.has(viewName)) {
-    const propsToAdd = {};
+    const propsToAdd: Record<string, boolean> = {};
     Object.keys(props).forEach((key) => {
       // we don't want to add native props as they affect layout
       // we also skip props which repeat here

package/src/ReanimatedModuleCompat.ts

@@ -0,0 +1,51 @@
+export default {
+  async disconnectNodeFromView(): Promise<void> {
+    // noop
+  },
+  async attachEvent(
+    _viewTag: number,
+    _eventName: string,
+    _nodeID: number
+  ): Promise<void> {
+    // noop
+  },
+  async detachEvent(
+    _viewTag: number,
+    _eventName: string,
+    _nodeID: number
+  ): Promise<void> {
+    // noop
+  },
+  async createNode(
+    _nodeID: number,
+    _config: Record<string, unknown>
+  ): Promise<void> {
+    // noop
+  },
+  async dropNode(_nodeID: number): Promise<void> {
+    // noop
+  },
+  async configureProps(
+    _nativeProps: string[],
+    _uiProps: string[]
+  ): Promise<void> {
+    // noop
+  },
+  async disconnectNodes(): Promise<void> {
+    // noop
+  },
+  async addListener(): Promise<void> {
+    // noop
+  },
+  async removeListeners(): Promise<void> {
+    // noop
+  },
+  async removeAllListeners(): Promise<void> {
+    // noop
+  },
+  async animateNextTransition(): Promise<void> {
+    console.warn(
+      'Reanimated: animateNextTransition is unimplemented on current platform'
+    );
+  },
+};