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

package/src/reanimated2/core.ts

@@ -1,11 +1,22 @@
 /* global _WORKLET _getCurrentTime _frameTimestamp _eventTimestamp, _setGlobalConsole */
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import NativeReanimated from './NativeReanimated';
+import NativeReanimatedModule from './NativeReanimated';
 import { Platform } from 'react-native';
-import { addWhitelistedNativeProps } from '../ConfigHelper';
-
-global.__reanimatedWorkletInit = function (worklet) {
+import { nativeShouldBeMock, shouldBeUseWeb } from './PlatformChecker';
+import {
+  BasicWorkletFunction,
+  WorkletFunction,
+  ComplexWorkletFunction,
+  SharedValue,
+} from './commonTypes';
+import {
+  AnimationObject,
+  PrimitiveValue,
+  Timestamp,
+} from './animation/commonTypes';
+import { Descriptor } from './hook/commonTypes';
+import JSReanimated from './js-reanimated/JSReanimated';
+
+global.__reanimatedWorkletInit = function (worklet: WorkletFunction) {
   worklet.__worklet = true;
 };
 
@@ -16,12 +27,25 @@ if (global._setGlobalConsole === undefined) {
   };
 }
 
-const testWorklet = () => {
+export type ReanimatedConsole = Pick<
+  Console,
+  'debug' | 'log' | 'warn' | 'info' | 'error'
+>;
+interface WorkletValueSetterContext {
+  _animation?: AnimationObject | null;
+  _value?: PrimitiveValue | Descriptor;
+  value?: PrimitiveValue;
+  _setValue?: (val: PrimitiveValue | Descriptor) => void;
+}
+
+const testWorklet: BasicWorkletFunction<void> = () => {
   'worklet';
 };
 
-export const checkPluginState = (throwError = true) => {
-  if (!testWorklet.__workletHash && !process.env.JEST_WORKER_ID) {
+export const checkPluginState: (throwError: boolean) => boolean = (
+  throwError = true
+) => {
+  if (!testWorklet.__workletHash && !shouldBeUseWeb()) {
     if (throwError) {
       throw new Error(
         "Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?"
@@ -32,19 +56,21 @@ export const checkPluginState = (throwError = true) => {
   return true;
 };
 
-export const isConfigured = (throwError = false) => {
-  return checkPluginState(throwError) && !NativeReanimated.useOnlyV1;
+export const isConfigured: (throwError?: boolean) => boolean = (
+  throwError = false
+) => {
+  return checkPluginState(throwError) && !NativeReanimatedModule.useOnlyV1;
 };
 
-export const isConfiguredCheck = () => {
+export const isConfiguredCheck: () => void = () => {
   if (!isConfigured(true)) {
     throw new Error(
-      'If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/installation'
+      'If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation'
     );
   }
 };
 
-function _toArrayReanimated(object) {
+function _toArrayReanimated<T>(object: Iterable<T> | ArrayLike<T> | T[]): T[] {
   'worklet';
   if (Array.isArray(object)) {
     return object;
@@ -53,19 +79,23 @@ function _toArrayReanimated(object) {
     typeof Symbol !== 'undefined' &&
     (typeof Symbol === 'function' ? Symbol.iterator : '@@iterator') in
       Object(object)
-  )
+  ) {
     return Array.from(object);
-  throw new 'Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'();
+  }
+  throw new Error(
+    'Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'
+  );
 }
 
-function _mergeObjectsReanimated() {
+function _mergeObjectsReanimated(): unknown {
   'worklet';
   // we can't use rest parameters in worklets at the moment
   // eslint-disable-next-line prefer-rest-params
-  return Object.assign.apply(null, arguments);
+  const arr = Array.from(arguments);
+  return Object.assign.apply(null, [arr[0], ...arr.slice(1)]);
 }
 
-global.__reanimatedWorkletInit = function (worklet) {
+global.__reanimatedWorkletInit = function (worklet: WorkletFunction) {
   worklet.__worklet = true;
 
   if (worklet._closure) {
@@ -82,13 +112,13 @@ global.__reanimatedWorkletInit = function (worklet) {
   }
 };
 
-function pushFrame(frame) {
-  NativeReanimated.pushFrame(frame);
+function pushFrame(frame: (timestamp: Timestamp) => void): void {
+  (NativeReanimatedModule as JSReanimated).pushFrame(frame);
 }
 
-export function requestFrame(frame) {
+export function requestFrame(frame: (timestamp: Timestamp) => void): void {
   'worklet';
-  if (NativeReanimated.native) {
+  if (NativeReanimatedModule.native) {
     requestAnimationFrame(frame);
   } else {
     pushFrame(frame);
@@ -96,35 +126,41 @@ export function requestFrame(frame) {
 }
 
 global._WORKLET = false;
-global._log = function (s) {
+global._log = function (s: string) {
   console.log(s);
 };
 
-export function runOnUI(worklet) {
+export function runOnUI<A extends any[], R>(
+  worklet: ComplexWorkletFunction<A, R>
+): (...args: A) => void {
   return makeShareable(worklet);
 }
 
-export function makeShareable(value) {
+export function makeShareable<T>(value: T): T {
   isConfiguredCheck();
-  return NativeReanimated.makeShareable(value);
+  return NativeReanimatedModule.makeShareable(value);
 }
 
-export function getViewProp(viewTag, propName) {
+export function getViewProp<T>(viewTag: string, propName: string): Promise<T> {
   return new Promise((resolve, reject) => {
-    return NativeReanimated.getViewProp(viewTag, propName, (result) => {
-      if (result.substr(0, 6) === 'error:') {
-        reject(result);
-      } else {
-        resolve(result);
+    return NativeReanimatedModule.getViewProp(
+      viewTag,
+      propName,
+      (result: T) => {
+        if (typeof result === 'string' && result.substr(0, 6) === 'error:') {
+          reject(result);
+        } else {
+          resolve(result);
+        }
       }
-    });
+    );
   });
 }
 
-let _getTimestamp;
-if (process.env.JEST_WORKER_ID) {
+let _getTimestamp: () => number;
+if (nativeShouldBeMock()) {
   _getTimestamp = () => {
-    return Date.now();
+    return (NativeReanimatedModule as JSReanimated).getTimestamp();
   };
 } else {
   _getTimestamp = () => {
@@ -139,15 +175,18 @@ if (process.env.JEST_WORKER_ID) {
   };
 }
 
-export function getTimestamp() {
+export function getTimestamp(): number {
   'worklet';
   if (Platform.OS === 'web') {
-    return NativeReanimated.getTimestamp();
+    return (NativeReanimatedModule as JSReanimated).getTimestamp();
   }
   return _getTimestamp();
 }
 
-function workletValueSetter(value) {
+function workletValueSetter(
+  this: WorkletValueSetterContext,
+  value: (() => AnimationObject) | AnimationObject | PrimitiveValue | Descriptor
+): void {
   'worklet';
   const previousAnimation = this._animation;
   if (previousAnimation) {
@@ -156,22 +195,26 @@ function workletValueSetter(value) {
   }
   if (
     typeof value === 'function' ||
-    (value !== null && typeof value === 'object' && value.onFrame)
+    (value !== null &&
+      typeof value === 'object' &&
+      (value as AnimationObject).onFrame !== undefined)
   ) {
-    const animation = typeof value === 'function' ? value() : value;
+    const animation: AnimationObject =
+      typeof value === 'function' ? value() : (value as AnimationObject);
     // prevent setting again to the same value
     // and triggering the mappers that treat this value as an input
     // this happens when the animation's target value(stored in animation.current until animation.onStart is called) is set to the same value as a current one(this._value)
     // built in animations that are not higher order(withTiming, withSpring) hold target value in .current
     if (this._value === animation.current && !animation.isHigherOrder) {
+      animation.callback && animation.callback(true);
       return;
     }
     // animated set
-    const initializeAnimation = (timestamp) => {
+    const initializeAnimation = (timestamp: number) => {
       animation.onStart(animation, this.value, timestamp, previousAnimation);
     };
     initializeAnimation(getTimestamp());
-    const step = (timestamp) => {
+    const step = (timestamp: number) => {
       if (animation.cancelled) {
         animation.callback && animation.callback(false /* finished */);
         return;
@@ -201,13 +244,16 @@ function workletValueSetter(value) {
     if (this._value === value) {
       return;
     }
-    this._value = value;
+    this._value = value as Descriptor | PrimitiveValue;
   }
 }
 
 // We cannot use pushFrame
 // so we use own implementation for js
-function workletValueSetterJS(value) {
+function workletValueSetterJS(
+  this: WorkletValueSetterContext,
+  value: (() => AnimationObject) | AnimationObject | PrimitiveValue | Descriptor
+): void {
   const previousAnimation = this._animation;
   if (previousAnimation) {
     previousAnimation.cancelled = true;
@@ -215,14 +261,19 @@ function workletValueSetterJS(value) {
   }
   if (
     typeof value === 'function' ||
-    (value !== null && typeof value === 'object' && value.onFrame)
+    (value !== null &&
+      typeof value === 'object' &&
+      (value as AnimationObject).onFrame)
   ) {
     // animated set
-    const animation = typeof value === 'function' ? value() : value;
-    let initializeAnimation = (timestamp) => {
+    const animation: AnimationObject =
+      typeof value === 'function' ? value() : (value as AnimationObject);
+    let initializeAnimation: ((timestamp: number) => void) | null = (
+      timestamp: number
+    ) => {
       animation.onStart(animation, this.value, timestamp, previousAnimation);
     };
-    const step = (timestamp) => {
+    const step = (timestamp: number) => {
       if (animation.cancelled) {
         animation.callback && animation.callback(false /* finished */);
         return;
@@ -233,7 +284,7 @@ function workletValueSetterJS(value) {
       }
       const finished = animation.onFrame(animation, timestamp);
       animation.timestamp = timestamp;
-      this._setValue(animation.current);
+      this._setValue && this._setValue(animation.current as PrimitiveValue);
       if (finished) {
         animation.callback && animation.callback(true /* finished */);
       } else {
@@ -245,46 +296,51 @@ function workletValueSetterJS(value) {
 
     requestFrame(step);
   } else {
-    this._setValue(value);
+    this._setValue && this._setValue(value as PrimitiveValue | Descriptor);
   }
 }
 
-export function makeMutable(value) {
+export function makeMutable<T>(value: T): SharedValue<T> {
   isConfiguredCheck();
-  return NativeReanimated.makeMutable(value);
+  return NativeReanimatedModule.makeMutable(value);
 }
 
-export function makeRemote(object = {}) {
+export function makeRemote<T>(object = {}): T {
   isConfiguredCheck();
-  return NativeReanimated.makeRemote(object);
+  return NativeReanimatedModule.makeRemote(object);
 }
 
 export function startMapper(
-  mapper,
-  inputs = [],
-  outputs = [],
-  updater = () => {
+  mapper: () => void,
+  inputs: any[] = [],
+  outputs: any[] = [],
+  updater: () => void = () => {
     // noop
   },
-  tag = 0,
-  name = ''
-) {
+  viewDescriptors: Descriptor[] | SharedValue<Descriptor[]> = []
+): number {
   isConfiguredCheck();
-  return NativeReanimated.startMapper(
+  return NativeReanimatedModule.startMapper(
     mapper,
     inputs,
     outputs,
     updater,
-    tag,
-    name
+    viewDescriptors
   );
 }
 
-export function stopMapper(mapperId) {
-  NativeReanimated.stopMapper(mapperId);
+export function stopMapper(mapperId: number): void {
+  NativeReanimatedModule.stopMapper(mapperId);
+}
+
+export interface RunOnJSFunction<A extends any[], R> {
+  __callAsync?: (...args: A) => void;
+  (...args: A): R;
 }
 
-export const runOnJS = (fun) => {
+export function runOnJS<A extends any[], R>(
+  fun: RunOnJSFunction<A, R>
+): () => void {
   'worklet';
   if (!_WORKLET) {
     return fun;
@@ -296,21 +352,11 @@ export const runOnJS = (fun) => {
   } else {
     return fun.__callAsync;
   }
-};
-
-export function createAnimatedPropAdapter(adapter, nativeProps) {
-  const nativePropsToAdd = {};
-  // eslint-disable-next-line no-unused-expressions
-  nativeProps?.forEach((prop) => {
-    nativePropsToAdd[prop] = true;
-  });
-  addWhitelistedNativeProps(nativePropsToAdd);
-  return adapter;
 }
 
-if (!NativeReanimated.useOnlyV1) {
-  NativeReanimated.installCoreFunctions(
-    NativeReanimated.native ? workletValueSetter : workletValueSetterJS
+if (!NativeReanimatedModule.useOnlyV1) {
+  NativeReanimatedModule.installCoreFunctions(
+    NativeReanimatedModule.native ? workletValueSetter : workletValueSetterJS
   );
 
   const capturableConsole = console;

package/src/reanimated2/globals.d.ts

@@ -1 +1,47 @@
-declare const _WORKLET: boolean;
+import { AnimatedStyle, StyleProps, WorkletFunction } from './commonTypes';
+import { ReanimatedConsole } from './core';
+import { MeasuredDimensions } from './NativeMethods';
+import { NativeReanimated } from './NativeReanimated/NativeReanimated';
+declare global {
+  const _WORKLET: boolean;
+  const _frameTimestamp: number;
+  const _eventTimestamp: number;
+  const _setGlobalConsole: (console?: ReanimatedConsole) => void;
+  const _getCurrentTime: () => number;
+  const _stopObservingProgress: (tag: number, flag: boolean) => void;
+  const _startObservingProgress: (
+    tag: number,
+    flag: { value: boolean; _value: boolean }
+  ) => void;
+  const _updateProps: (
+    tag: number,
+    name: string,
+    updates: StyleProps | AnimatedStyle
+  ) => void;
+  const _measure: (viewTag: number) => MeasuredDimensions;
+  const _scrollTo: (
+    viewTag: number,
+    x: number,
+    y: number,
+    animated: boolean
+  ) => void;
+  namespace NodeJS {
+    interface Global {
+      __reanimatedWorkletInit: (worklet: WorkletFunction) => void;
+      _setGlobalConsole: (console?: ReanimatedConsole) => void;
+      _log: (s: string) => void;
+      _WORKLET: boolean;
+      __reanimatedModuleProxy: NativeReanimated;
+      LayoutAnimationRepository: {
+        configs: Record<string, unknown>;
+        registerConfig(tag: number, config: Record<string, unknown>): void;
+        removeConfig(tag: number): void;
+        startAnimationForTag(
+          tag: number,
+          type: string,
+          yogaValues: unknown
+        ): void;
+      };
+    }
+  }
+}

package/src/reanimated2/hook/Hooks.ts

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+import { DependencyList } from './commonTypes';
+import { useAnimatedStyle } from './useAnimatedStyle';
+
+// TODO: we should make sure that when useAP is used we are not assigning styles
+// when you need styles to animated you should always use useAS
+export const useAnimatedProps = useAnimatedStyle;
+
+export function useWorkletCallback<A extends unknown[], R>(
+  fun: (...args: A) => R,
+  deps?: DependencyList
+): (...args: Parameters<typeof fun>) => R {
+  return useCallback(fun, deps ?? []);
+}
+
+export { useEvent, useHandler } from './utils';

package/src/reanimated2/hook/commonTypes.ts

@@ -0,0 +1,12 @@
+export type DependencyList = Array<unknown> | undefined;
+
+export type Context = Record<string, unknown>;
+
+export interface ContextWithDependencies<TContext extends Context> {
+  context: TContext;
+  savedDependencies: DependencyList;
+}
+export interface Descriptor {
+  tag: number;
+  name: string;
+}

package/src/reanimated2/hook/index.ts

@@ -0,0 +1,25 @@
+export { DependencyList, Context } from './commonTypes';
+export {
+  useAnimatedProps,
+  useEvent,
+  useHandler,
+  useWorkletCallback,
+} from './Hooks';
+export { useSharedValue } from './useSharedValue';
+export { useAnimatedStyle, AnimatedStyleResult } from './useAnimatedStyle';
+export {
+  useAnimatedGestureHandler,
+  GestureHandlerEvent,
+  GestureHandlers,
+} from './useAnimatedGestureHandler';
+export {
+  useAnimatedReaction,
+  AnimatedReactionWorkletFunction,
+} from './useAnimatedReaction';
+export { useAnimatedRef } from './useAnimatedRef';
+export {
+  useAnimatedScrollHandler,
+  ScrollHandler,
+  ScrollHandlers,
+} from './useAnimatedScrollHandler';
+export { useDerivedValue, DerivedValue } from './useDerivedValue';

package/src/reanimated2/hook/useAnimatedGestureHandler.ts

@@ -0,0 +1,110 @@
+import { MutableRefObject } from 'react';
+import { WorkletFunction } from '../commonTypes';
+import { isWeb } from '../PlatformChecker';
+import WorkletEventHandler from '../WorkletEventHandler';
+import { Context, DependencyList } from './commonTypes';
+import { useEvent, useHandler } from './Hooks';
+
+interface Handler<T, TContext extends Context> extends WorkletFunction {
+  (event: T, context: TContext, isCanceledOrFailed?: boolean): void;
+}
+
+export interface GestureHandlers<T, TContext extends Context> {
+  [key: string]: Handler<T, TContext> | undefined;
+  onStart?: Handler<T, TContext>;
+  onActive?: Handler<T, TContext>;
+  onEnd?: Handler<T, TContext>;
+  onFail?: Handler<T, TContext>;
+  onCancel?: Handler<T, TContext>;
+  onFinish?: Handler<T, TContext>;
+}
+
+export enum EventType {
+  UNDETERMINED = 0,
+  FAILED,
+  BEGAN,
+  CANCELLED,
+  ACTIVE,
+  END,
+}
+
+export interface GestureHandlerStateChangeNativeEvent {
+  handlerTag: number;
+  numberOfPointers: number;
+  state: EventType;
+  oldState: EventType;
+}
+
+export interface GestureHandlerEvent<T>
+  extends GestureHandlerStateChangeNativeEvent {
+  nativeEvent: T;
+}
+
+export function useAnimatedGestureHandler<
+  T extends GestureHandlerEvent<T>,
+  TContext extends Context
+>(
+  handlers: GestureHandlers<T, TContext>,
+  dependencies?: DependencyList
+): MutableRefObject<WorkletEventHandler<T> | null> | ((e: T) => void) {
+  const { context, doDependenciesDiffer, useWeb } = useHandler<T, TContext>(
+    handlers,
+    dependencies
+  );
+
+  const handler = (e: T) => {
+    'worklet';
+    const event = useWeb ? e.nativeEvent : e;
+
+    if (event.state === EventType.BEGAN && handlers.onStart) {
+      handlers.onStart(event, context);
+    }
+    if (event.state === EventType.ACTIVE && handlers.onActive) {
+      handlers.onActive(event, context);
+    }
+    if (
+      event.oldState === EventType.ACTIVE &&
+      event.state === EventType.END &&
+      handlers.onEnd
+    ) {
+      handlers.onEnd(event, context);
+    }
+    if (
+      event.oldState === EventType.BEGAN &&
+      event.state === EventType.FAILED &&
+      handlers.onFail
+    ) {
+      handlers.onFail(event, context);
+    }
+    if (
+      event.oldState === EventType.ACTIVE &&
+      event.state === EventType.CANCELLED &&
+      handlers.onCancel
+    ) {
+      handlers.onCancel(event, context);
+    }
+    if (
+      (event.oldState === EventType.BEGAN ||
+        event.oldState === EventType.ACTIVE) &&
+      event.state !== EventType.BEGAN &&
+      event.state !== EventType.ACTIVE &&
+      handlers.onFinish
+    ) {
+      handlers.onFinish(
+        event,
+        context,
+        event.state === EventType.CANCELLED || event.state === EventType.FAILED
+      );
+    }
+  };
+
+  if (isWeb()) {
+    return handler;
+  }
+
+  return useEvent<T>(
+    handler,
+    ['onGestureHandlerStateChange', 'onGestureHandlerEvent'],
+    doDependenciesDiffer
+  );
+}

package/src/reanimated2/hook/useAnimatedReaction.ts

@@ -0,0 +1,49 @@
+import { useEffect } from 'react';
+import { BasicWorkletFunction, WorkletFunction } from '../commonTypes';
+import { startMapper, stopMapper } from '../core';
+import { DependencyList } from './commonTypes';
+import { useSharedValue } from './useSharedValue';
+
+export interface AnimatedReactionWorkletFunction<T> extends WorkletFunction {
+  (prepared: T, previous: T | null): void;
+}
+/**
+ * @param prepare - worklet used for data preparation for the second parameter
+ * @param react - worklet which takes data prepared by the one in the first parameter and performs certain actions
+ * the first worklet defines the inputs, in other words on which shared values change will it be called.
+ * the second one can modify any shared values but those which are mentioned in the first worklet. Beware of that, because this may result in endless loop and high cpu usage.
+ */
+export function useAnimatedReaction<T>(
+  prepare: BasicWorkletFunction<T>,
+  react: AnimatedReactionWorkletFunction<T>,
+  dependencies: DependencyList
+): void {
+  const previous = useSharedValue<T | null>(null);
+  if (dependencies === undefined) {
+    dependencies = [
+      Object.values(prepare._closure ?? {}),
+      Object.values(react._closure ?? {}),
+      prepare.__workletHash,
+      react.__workletHash,
+    ];
+  } else {
+    dependencies.push(prepare.__workletHash, react.__workletHash);
+  }
+
+  useEffect(() => {
+    const fun = () => {
+      'worklet';
+      const input = prepare();
+      react(input, previous.value);
+      previous.value = input;
+    };
+    const mapperId = startMapper(
+      fun,
+      Object.values(prepare._closure ?? {}),
+      []
+    );
+    return () => {
+      stopMapper(mapperId);
+    };
+  }, dependencies);
+}

package/src/reanimated2/hook/useAnimatedRef.ts

@@ -0,0 +1,34 @@
+import { Component, useRef } from 'react';
+import { getTag } from '../NativeMethods';
+import { useSharedValue } from './useSharedValue';
+
+export interface RefObjectFunction<T> {
+  current: T | null;
+  (component?: T): number;
+}
+
+export function useAnimatedRef<T extends Component>(): RefObjectFunction<T> {
+  const tag = useSharedValue<number | null>(-1);
+  const ref = useRef<RefObjectFunction<T>>();
+
+  if (!ref.current) {
+    const fun: RefObjectFunction<T> = <RefObjectFunction<T>>((component) => {
+      'worklet';
+      // enters when ref is set by attaching to a component
+      if (component) {
+        tag.value = getTag(component);
+        fun.current = component;
+      }
+      return tag.value;
+    });
+
+    Object.defineProperty(fun, 'current', {
+      value: null,
+      writable: true,
+      enumerable: false,
+    });
+    ref.current = fun;
+  }
+
+  return ref.current;
+}