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

package/src/reanimated2/NativeMethods.ts

@@ -1,24 +1,29 @@
 /* global _WORKLET _measure _scrollTo */
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
+import { Component } from 'react';
 import { findNodeHandle } from 'react-native';
+import { RefObjectFunction } from './hook/useAnimatedRef';
+import { isChromeDebugger } from './PlatformChecker';
 
-export function getTag(view) {
+export function getTag(
+  view: null | number | React.Component<any, any> | React.ComponentClass<any>
+): null | number {
   return findNodeHandle(view);
 }
 
-/**
- * fields that can be accessed:
- *  x
- *  y
- *  width
- *  height
- *  pageX
- *  pageY
- */
-export function measure(animatedRef) {
+export interface MeasuredDimensions {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  pageX: number;
+  pageY: number;
+}
+
+export function measure(
+  animatedRef: RefObjectFunction<Component>
+): MeasuredDimensions {
   'worklet';
-  if (!_WORKLET) {
+  if (!_WORKLET && !isChromeDebugger()) {
     throw new Error('(measure) method cannot be used on RN side!');
   }
   const viewTag = animatedRef();
@@ -29,9 +34,14 @@ export function measure(animatedRef) {
   return result;
 }
 
-export function scrollTo(animatedRef, x, y, animated) {
+export function scrollTo(
+  animatedRef: RefObjectFunction<Component>,
+  x: number,
+  y: number,
+  animated: boolean
+): void {
   'worklet';
-  if (!_WORKLET) {
+  if (!_WORKLET && !isChromeDebugger()) {
     return;
   }
   const viewTag = animatedRef();

package/src/reanimated2/NativeReanimated/NativeReanimated.ts

@@ -0,0 +1,78 @@
+import { AnimationObject } from '../animation';
+import { PrimitiveValue } from '../animation/commonTypes';
+import { SharedValue } from '../commonTypes';
+import { Descriptor } from '../hook/commonTypes';
+
+const InnerNativeModule = global.__reanimatedModuleProxy;
+export class NativeReanimated {
+  native: boolean;
+  useOnlyV1: boolean;
+
+  constructor(native = true) {
+    this.native = native;
+    this.useOnlyV1 = InnerNativeModule === null;
+  }
+
+  installCoreFunctions(
+    valueSetter: (
+      value:
+        | (() => AnimationObject)
+        | AnimationObject
+        | PrimitiveValue
+        | Descriptor
+    ) => void
+  ): void {
+    return InnerNativeModule.installCoreFunctions(valueSetter);
+  }
+
+  makeShareable<T>(value: T): T {
+    return InnerNativeModule.makeShareable(value);
+  }
+
+  makeMutable<T>(value: T): SharedValue<T> {
+    return InnerNativeModule.makeMutable(value);
+  }
+
+  makeRemote<T>(object = {}): T {
+    return InnerNativeModule.makeRemote(object);
+  }
+
+  startMapper(
+    mapper: () => void,
+    inputs: any[] = [],
+    outputs: any[] = [],
+    updater: () => void,
+    viewDescriptors: Descriptor[] | SharedValue<Descriptor[]>
+  ): number {
+    return InnerNativeModule.startMapper(
+      mapper,
+      inputs,
+      outputs,
+      updater,
+      viewDescriptors
+    );
+  }
+
+  stopMapper(mapperId: number): void {
+    return InnerNativeModule.stopMapper(mapperId);
+  }
+
+  registerEventHandler<T>(
+    eventHash: string,
+    eventHandler: (event: T) => void
+  ): string {
+    return InnerNativeModule.registerEventHandler(eventHash, eventHandler);
+  }
+
+  unregisterEventHandler(id: string): void {
+    return InnerNativeModule.unregisterEventHandler(id);
+  }
+
+  getViewProp<T>(
+    viewTag: string,
+    propName: string,
+    callback?: (result: T) => void
+  ): Promise<T> {
+    return InnerNativeModule.getViewProp(viewTag, propName, callback);
+  }
+}

package/src/reanimated2/NativeReanimated/index.ts

@@ -0,0 +1,18 @@
+import reanimatedJS from '../js-reanimated';
+import { nativeShouldBeMock } from '../PlatformChecker';
+import { Platform } from 'react-native';
+import { NativeReanimated } from './NativeReanimated';
+
+let exportedModule;
+if (nativeShouldBeMock()) {
+  exportedModule = reanimatedJS;
+} else {
+  exportedModule = new NativeReanimated();
+  if (exportedModule.useOnlyV1 && Platform.OS === 'android') {
+    console.warn(
+      `If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/installation`
+    );
+  }
+}
+
+export default exportedModule as NativeReanimated;

package/src/reanimated2/PlatformChecker.ts

@@ -0,0 +1,21 @@
+import { Platform } from 'react-native';
+
+export function isJest(): boolean {
+  return !!process.env.JEST_WORKER_ID;
+}
+
+export function isChromeDebugger(): boolean {
+  return !(global as any).nativeCallSyncHook || (global as any).__REMOTEDEV__;
+}
+
+export function isWeb(): boolean {
+  return Platform.OS === 'web';
+}
+
+export function shouldBeUseWeb() {
+  return isJest() || isChromeDebugger() || isWeb();
+}
+
+export function nativeShouldBeMock() {
+  return isJest() || isChromeDebugger();
+}

package/src/reanimated2/PropAdapters.ts

@@ -1,41 +1,59 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import { createAnimatedPropAdapter } from './core';
+// @ts-ignore JS file
+import { addWhitelistedNativeProps } from '../ConfigHelper';
+import { AdapterWorkletFunction } from './commonTypes';
 
-export const SVGAdapter = createAnimatedPropAdapter((props) => {
-  'worklet';
-  const keys = Object.keys(props);
-  // transform
-  if (keys.includes('transform')) {
-    if (Array.isArray(props.transform)) {
-      // case of array with 6 values => https://github.com/react-native-svg/react-native-svg/blob/b2e2c355204ff4b10973d3afce1495f7e4167ff7/src/elements/Shape.tsx#L200
-      if (props.transform.length !== 6) {
-        throw new Error(
-          `invalid transform length of ${props.transform.length}, should be 6`
-        );
+export function createAnimatedPropAdapter(
+  adapter: AdapterWorkletFunction,
+  nativeProps?: string[]
+): AdapterWorkletFunction {
+  const nativePropsToAdd: { [key: string]: boolean } = {};
+  // eslint-disable-next-line no-unused-expressions
+  nativeProps?.forEach((prop) => {
+    nativePropsToAdd[prop] = true;
+  });
+  addWhitelistedNativeProps(nativePropsToAdd);
+  return adapter;
+}
+
+// ADAPTERS
+
+export const SVGAdapter: AdapterWorkletFunction = createAnimatedPropAdapter(
+  (props) => {
+    'worklet';
+    const keys = Object.keys(props);
+    // transform
+    if (keys.includes('transform')) {
+      if (Array.isArray(props.transform)) {
+        // case of array with 6 values => https://github.com/react-native-svg/react-native-svg/blob/b2e2c355204ff4b10973d3afce1495f7e4167ff7/src/elements/Shape.tsx#L200
+        if (props.transform.length !== 6) {
+          throw new Error(
+            `invalid transform length of ${props.transform.length}, should be 6`
+          );
+        }
+        const transform: number[] = props.transform as number[];
+        const x: number = (props.x as number) ?? 0;
+        const y: number = (props.y as number) ?? 0;
+        props.transform = [
+          { translateX: transform[0] * x + transform[2] * y + transform[4] },
+          { translateY: transform[1] * x + transform[3] * y + transform[5] },
+        ];
+      } else if (typeof props.transform === 'string') {
+        // case of string 'translate(translateX translateY)'
+        // todo: handle other cases of transform string like here https://github.com/react-native-svg/react-native-svg/blob/b2e2c355204ff4b10973d3afce1495f7e4167ff7/src/lib/extract/extractTransform.ts#L184
+        const transform: string = props.transform as string;
+        const arr = transform
+          .replace('translate(', '')
+          .replace(')', '')
+          .split(' ');
+        props.transform = [
+          { translateX: parseFloat(arr[0]) },
+          { translateY: parseFloat(arr[1]) },
+        ];
       }
-      const transform = props.transform;
-      const x = props.x ?? 0;
-      const y = props.y ?? 0;
-      props.transform = [
-        { translateX: transform[0] * x + transform[2] * y + transform[4] },
-        { translateY: transform[1] * x + transform[3] * y + transform[5] },
-      ];
-    } else if (typeof props.transform === 'string') {
-      // case of string 'translate(translateX translateY)'
-      // todo: handle other cases of transform string like here https://github.com/react-native-svg/react-native-svg/blob/b2e2c355204ff4b10973d3afce1495f7e4167ff7/src/lib/extract/extractTransform.ts#L184
-      const arr = props.transform
-        .replace('translate(', '')
-        .replace(')', '')
-        .split(' ');
-      props.transform = [
-        { translateX: parseFloat(arr[0]) },
-        { translateY: parseFloat(arr[1]) },
-      ];
     }
+    // todo: other props
   }
-  // todo: other props
-});
+);
 
 export const TextInputAdapter = createAnimatedPropAdapter(
   (props) => {

package/src/reanimated2/UpdateProps.ts

@@ -1,10 +1,12 @@
 /* global _updateProps */
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
+import { MutableRefObject } from 'react';
 import { processColor } from './Colors';
+import { AnimatedStyle, SharedValue, StyleProps } from './commonTypes';
 import { makeShareable, isConfigured } from './core';
-import { Platform } from 'react-native';
+import { Descriptor } from './hook/commonTypes';
 import { _updatePropsJS } from './js-reanimated';
+import { shouldBeUseWeb } from './PlatformChecker';
+import { ViewRefSet } from './ViewDescriptorsSet';
 
 // copied from react-native/Libraries/Components/View/ReactNativeStyleAttributes
 export const colorProps = [
@@ -27,13 +29,25 @@ export const colorProps = [
 const ColorProperties = !isConfigured() ? [] : makeShareable(colorProps);
 
 let updatePropsByPlatform;
-if (Platform.OS === 'web' || process.env.JEST_WORKER_ID) {
-  updatePropsByPlatform = (viewDescriptor, updates, maybeViewRef) => {
+if (shouldBeUseWeb()) {
+  updatePropsByPlatform = (
+    _: SharedValue<Descriptor[]>,
+    updates: StyleProps | AnimatedStyle,
+    maybeViewRef: ViewRefSet<any> | undefined
+  ): void => {
     'worklet';
-    _updatePropsJS(viewDescriptor.value.tag, null, updates, maybeViewRef);
+    if (maybeViewRef) {
+      maybeViewRef.items.forEach((item, _) => {
+        _updatePropsJS(updates, item);
+      });
+    }
   };
 } else {
-  updatePropsByPlatform = (viewDescriptor, updates, _) => {
+  updatePropsByPlatform = (
+    viewDescriptors: SharedValue<Descriptor[]>,
+    updates: StyleProps | AnimatedStyle,
+    _: ViewRefSet<any> | undefined
+  ): void => {
     'worklet';
 
     for (const key in updates) {
@@ -42,23 +56,29 @@ if (Platform.OS === 'web' || process.env.JEST_WORKER_ID) {
       }
     }
 
-    _updateProps(
-      viewDescriptor.value.tag,
-      viewDescriptor.value.name || 'RCTView',
-      updates
-    );
+    viewDescriptors.value.forEach((viewDescriptor) => {
+      _updateProps(
+        viewDescriptor.tag,
+        viewDescriptor.name || 'RCTView',
+        updates
+      );
+    });
   };
 }
 
-export const updateProps = updatePropsByPlatform;
+export const updateProps: (
+  viewDescriptor: SharedValue<Descriptor[]>,
+  updates: StyleProps | AnimatedStyle,
+  maybeViewRef: ViewRefSet<any> | undefined
+) => void = updatePropsByPlatform;
 
 export const updatePropsJestWrapper = (
-  viewDescriptor,
-  updates,
-  maybeViewRef,
-  animatedStyle,
-  adapters
-) => {
+  viewDescriptors: SharedValue<Descriptor[]>,
+  updates: AnimatedStyle,
+  maybeViewRef: ViewRefSet<any> | undefined,
+  animatedStyle: MutableRefObject<AnimatedStyle>,
+  adapters: ((updates: AnimatedStyle) => void)[]
+): void => {
   adapters.forEach((adapter) => {
     adapter(updates);
   });
@@ -67,7 +87,7 @@ export const updatePropsJestWrapper = (
     ...updates,
   };
 
-  updateProps(viewDescriptor, updates, maybeViewRef);
+  updateProps(viewDescriptors, updates, maybeViewRef);
 };
 
 export default updateProps;

package/src/reanimated2/ViewDescriptorsSet.ts

@@ -0,0 +1,108 @@
+import { useRef } from 'react';
+import { makeMutable } from './core';
+import { SharedValue } from './commonTypes';
+import { Descriptor } from './hook/commonTypes';
+
+export interface ViewRefSet<T> {
+  items: Set<T>;
+  add: (item: T) => void;
+  remove: (item: T) => void;
+}
+
+export interface ViewDescriptorsSet {
+  batchToRemove: Set<number>;
+  tags: Set<number>;
+  waitForInsertSync: boolean;
+  waitForRemoveSync: boolean;
+  sharableViewDescriptors: SharedValue<Descriptor[]>;
+  items: Descriptor[];
+  add: (item: Descriptor) => void;
+  remove: (viewTag: number) => void;
+  rebuildsharableViewDescriptors: (
+    sharableViewDescriptor: SharedValue<Descriptor[]>
+  ) => void;
+}
+
+export function makeViewDescriptorsSet(): ViewDescriptorsSet {
+  const ref = useRef<ViewDescriptorsSet | null>(null);
+  if (ref.current === null) {
+    const data: ViewDescriptorsSet = {
+      batchToRemove: new Set(),
+      tags: new Set(),
+      waitForInsertSync: false,
+      waitForRemoveSync: false,
+      sharableViewDescriptors: makeMutable([]),
+      items: [],
+
+      add: (item: Descriptor) => {
+        if (data.tags.has(item.tag)) {
+          return;
+        }
+        data.tags.add(item.tag);
+        data.items.push(item);
+
+        if (!data.waitForInsertSync) {
+          data.waitForInsertSync = true;
+
+          setImmediate(() => {
+            data.sharableViewDescriptors.value = data.items;
+            data.waitForInsertSync = false;
+          });
+        }
+      },
+
+      remove: (viewTag: number) => {
+        data.batchToRemove.add(viewTag);
+
+        if (!data.waitForRemoveSync) {
+          data.waitForRemoveSync = true;
+
+          setImmediate(() => {
+            const items = [];
+            for (const item of data.items) {
+              if (data.batchToRemove.has(item.tag)) {
+                data.tags.delete(item.tag);
+              } else {
+                items.push(item);
+              }
+            }
+            data.items = items;
+            data.sharableViewDescriptors.value = items;
+            data.batchToRemove = new Set();
+            data.waitForRemoveSync = false;
+          });
+        }
+      },
+
+      rebuildsharableViewDescriptors: (
+        sharableViewDescriptors: SharedValue<Descriptor[]>
+      ) => {
+        data.sharableViewDescriptors = sharableViewDescriptors;
+      },
+    };
+    ref.current = data;
+  }
+
+  return ref.current;
+}
+
+export function makeViewsRefSet<T>(): ViewRefSet<T> {
+  const ref = useRef<ViewRefSet<T> | null>(null);
+  if (ref.current === null) {
+    const data: ViewRefSet<T> = {
+      items: new Set(),
+
+      add: (item: T) => {
+        if (data.items.has(item)) return;
+        data.items.add(item);
+      },
+
+      remove: (item: T) => {
+        data.items.delete(item);
+      },
+    };
+    ref.current = data;
+  }
+
+  return ref.current;
+}

package/src/reanimated2/WorkletEventHandler.ts

@@ -1,38 +1,57 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import NativeModule from './NativeReanimated';
+import { NativeEvent } from './commonTypes';
+import NativeReanimatedModule from './NativeReanimated';
 
-const jsListener = (eventName, handler) => (evt) => {
-  handler({ ...evt.nativeEvent, eventName });
-};
+function jsListener<T extends NativeEvent<T>>(
+  eventName: string,
+  handler: (event: T) => void
+) {
+  return (evt: T) => {
+    handler({ ...evt.nativeEvent, eventName });
+  };
+}
 
-export default class WorkletEventHandler {
-  constructor(worklet, eventNames = []) {
+export default class WorkletEventHandler<T extends NativeEvent<T>> {
+  worklet: (event: T) => void;
+  eventNames: string[];
+  reattachNeeded: boolean;
+  listeners: Record<string, (event: T) => void>;
+  viewTag: number | undefined;
+  registrations: string[];
+  constructor(worklet: (event: T) => void, eventNames: string[] = []) {
     this.worklet = worklet;
     this.eventNames = eventNames;
     this.reattachNeeded = false;
+    this.listeners = {};
+    this.viewTag = undefined;
+    this.registrations = [];
 
-    if (!NativeModule.native) {
-      this.listeners = eventNames.reduce((acc, eventName) => {
-        acc[eventName] = jsListener(eventName, worklet);
-        return acc;
-      }, {});
+    if (!NativeReanimatedModule.native) {
+      this.listeners = eventNames.reduce(
+        (acc: Record<string, (event: T) => void>, eventName: string) => {
+          acc[eventName] = jsListener(eventName, worklet);
+          return acc;
+        },
+        {}
+      );
     }
   }
 
-  updateWorklet(newWorklet) {
+  updateWorklet(newWorklet: (event: T) => void): void {
     this.worklet = newWorklet;
     this.reattachNeeded = true;
   }
 
-  registerForEvents(viewTag, fallbackEventName = undefined) {
+  registerForEvents(viewTag: number, fallbackEventName?: string): void {
     this.viewTag = viewTag;
     this.registrations = this.eventNames.map((eventName) =>
-      NativeModule.registerEventHandler(viewTag + eventName, this.worklet)
+      NativeReanimatedModule.registerEventHandler(
+        viewTag + eventName,
+        this.worklet
+      )
     );
     if (this.registrations.length === 0 && fallbackEventName) {
       this.registrations.push(
-        NativeModule.registerEventHandler(
+        NativeReanimatedModule.registerEventHandler(
           viewTag + fallbackEventName,
           this.worklet
         )
@@ -40,11 +59,10 @@ export default class WorkletEventHandler {
     }
   }
 
-  unregisterFromEvents() {
-    this.registrations &&
-      this.registrations.forEach((id) =>
-        NativeModule.unregisterEventHandler(id)
-      );
-    this.registrations = undefined;
+  unregisterFromEvents(): void {
+    this.registrations.forEach((id) =>
+      NativeReanimatedModule.unregisterEventHandler(id)
+    );
+    this.registrations = [];
   }
 }

package/src/reanimated2/animation/commonTypes.ts

@@ -0,0 +1,48 @@
+export type PrimitiveValue = number | string;
+
+export interface AnimationObject {
+  [key: string]: any;
+  callback: AnimationCallback;
+  current?: PrimitiveValue;
+  toValue?: AnimationObject['current'];
+  startValue?: AnimationObject['current'];
+  finished?: boolean;
+  strippedCurrent?: number;
+  cancelled?: boolean;
+
+  __prefix?: string;
+  __suffix?: string;
+  onFrame: (animation: any, timestamp: Timestamp) => boolean;
+  onStart: (
+    nextAnimation: any,
+    current: any,
+    timestamp: Timestamp,
+    previousAnimation: any
+  ) => void;
+}
+
+export interface Animation<T extends AnimationObject> extends AnimationObject {
+  onFrame: (animation: T, timestamp: Timestamp) => boolean;
+  onStart: (
+    nextAnimation: T,
+    current: T extends NumericAnimation ? number : PrimitiveValue,
+    timestamp: Timestamp,
+    previousAnimation: T
+  ) => void;
+}
+
+export interface NumericAnimation {
+  current?: number;
+}
+export interface HigherOrderAnimation {
+  isHigherOrder?: boolean;
+}
+
+export type AnimationCallback = (
+  finished?: boolean,
+  current?: PrimitiveValue
+) => void;
+
+export type NextAnimation<T extends AnimationObject> = T | (() => T);
+
+export type Timestamp = number;