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

package/src/reanimated2/hook/useAnimatedStyle.ts

@@ -11,7 +11,7 @@ import {
 } from '../core';
 import updateProps, { updatePropsJestWrapper } from '../UpdateProps';
 import { initialUpdaterRun, Timestamp } from '../animation';
-import NativeReanimated from '../NativeReanimated';
+import NativeReanimatedModule from '../NativeReanimated';
 import { useSharedValue } from './useSharedValue';
 import {
   buildWorkletsHash,
@@ -31,14 +31,13 @@ import {
   ViewRefSet,
 } from '../ViewDescriptorsSet';
 import { isJest, shouldBeUseWeb } from '../PlatformChecker';
-import { AnimationObject, PrimitiveValue } from '../animation/commonTypes';
+import { AnimationObject } from '../animation/commonTypes';
 import {
   AdapterWorkletFunction,
   AnimatedStyle,
   BasicWorkletFunction,
   NestedObjectValues,
   SharedValue,
-  WorkletFunction,
 } from '../commonTypes';
 export interface AnimatedStyleResult {
   viewDescriptors: ViewDescriptorsSet;
@@ -57,6 +56,7 @@ interface AnimatedState {
 interface AnimationRef {
   initial: {
     value: AnimatedStyle;
+    updater: () => AnimatedStyle;
   };
   remoteState: AnimatedState;
   sharableViewDescriptors: SharedValue<Descriptor[]>;
@@ -122,7 +122,7 @@ function prepareAnimation(
 function runAnimations(
   animation: AnimatedStyle,
   timestamp: Timestamp,
-  key: PrimitiveValue,
+  key: number | string,
   result: AnimatedStyle,
   animationsActive: SharedValue<boolean>
 ): boolean {
@@ -270,7 +270,7 @@ function jestStyleUpdater(
   maybeViewRef: ViewRefSet<any> | undefined,
   animationsActive: SharedValue<boolean>,
   animatedStyle: MutableRefObject<AnimatedStyle>,
-  adapters: WorkletFunction[] = []
+  adapters: AdapterWorkletFunction[] = []
 ): void {
   'worklet';
   const animations: AnimatedStyle = state.animations ?? {};
@@ -428,6 +428,7 @@ export function useAnimatedStyle<T extends AnimatedStyle>(
     initRef.current = {
       initial: {
         value: initialStyle,
+        updater: updater,
       },
       remoteState: makeRemote({ last: initialStyle }),
       sharableViewDescriptors: makeMutable([]),
@@ -441,9 +442,8 @@ export function useAnimatedStyle<T extends AnimatedStyle>(
 
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const { initial, remoteState, sharableViewDescriptors } = initRef.current!;
-  const maybeViewRef = NativeReanimated.native ? undefined : viewsRef;
+  const maybeViewRef = NativeReanimatedModule.native ? undefined : viewsRef;
 
-  initial.value = initialUpdaterRun(updater);
   useEffect(() => {
     let fun;
     let upadterFn = updater;

package/src/reanimated2/hook/utils.ts

@@ -3,6 +3,7 @@ import { AnimationObject } from '../animation';
 import { processColor } from '../Colors';
 import {
   AnimatedStyle,
+  NativeEvent,
   NestedObjectValues,
   StyleProps,
   WorkletFunction,
@@ -31,12 +32,12 @@ export interface UseHandlerContext<TContext extends Context> {
   useWeb: boolean;
 }
 
-export function useEvent<T>(
+export function useEvent<T extends NativeEvent<T>>(
   handler: (event: T) => void,
   eventNames: string[] = [],
   rebuild = false
-): MutableRefObject<WorkletEventHandler | null> {
-  const initRef = useRef<WorkletEventHandler | null>(null);
+): MutableRefObject<WorkletEventHandler<T> | null> {
+  const initRef = useRef<WorkletEventHandler<T> | null>(null);
   if (initRef.current === null) {
     initRef.current = new WorkletEventHandler(handler, eventNames);
   } else if (rebuild) {

package/src/reanimated2/index.ts

@@ -7,3 +7,4 @@ export * from './NativeMethods';
 export * from './Colors';
 export * from './PropAdapters';
 export * from './layoutReanimation';
+export * from './utils';

package/src/reanimated2/interpolation.ts

@@ -1,149 +1,216 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import interpolateNode, {
-  Extrapolate,
-} from '../reanimated1/derived/interpolate';
+// @ts-ignore JS file
+import interpolateNode from '../reanimated1/derived/interpolate';
 
-function getVal(config) {
+export enum Extrapolation {
+  IDENTITY = 'identity',
+  CLAMP = 'clamp',
+  EXTEND = 'extend',
+}
+
+export interface InterpolatedNode {
+  __nodeId: number;
+}
+
+interface InterpolationNarrowedInput {
+  leftEdgeInput: number;
+  rightEdgeInput: number;
+  leftEdgeOutput: number;
+  rightEdgeOutput: number;
+}
+
+export interface ExtrapolationConfig {
+  extrapolateLeft?: Extrapolation | string;
+  extrapolateRight?: Extrapolation | string;
+}
+
+interface RequiredExtrapolationConfig {
+  extrapolateLeft: Extrapolation;
+  extrapolateRight: Extrapolation;
+}
+
+export type ExtrapolationType =
+  | ExtrapolationConfig
+  | Extrapolation
+  | string
+  | undefined;
+
+function isNode(x: number | InterpolatedNode): x is InterpolatedNode {
   'worklet';
+  return (x as InterpolatedNode).__nodeId !== undefined;
+}
 
-  const { type, coef, val, ll, rr, x } = config;
+function getVal(
+  type: Extrapolation,
+  coef: number,
+  val: number,
+  leftEdgeOutput: number,
+  rightEdgeOutput: number,
+  x: number
+): number {
+  'worklet';
 
   switch (type) {
-    case Extrapolate.IDENTITY:
+    case Extrapolation.IDENTITY:
       return x;
-    case Extrapolate.CLAMP:
-      if (coef * val < coef * ll) {
-        return ll;
+    case Extrapolation.CLAMP:
+      if (coef * val < coef * leftEdgeOutput) {
+        return leftEdgeOutput;
       }
-      return rr;
-    case Extrapolate.EXTEND:
+      return rightEdgeOutput;
+    case Extrapolation.EXTEND:
     default:
       return val;
   }
 }
 
-function isExtrapolate(value) {
+function isExtrapolate(value: string): value is Extrapolation {
   'worklet';
 
   return (
-    value === Extrapolate.EXTEND ||
-    value === Extrapolate.CLAMP ||
-    value === Extrapolate.IDENTITY
+    value === Extrapolation.EXTEND ||
+    value === Extrapolation.CLAMP ||
+    value === Extrapolation.IDENTITY
   );
 }
 
-function validateType(type) {
+// validates extrapolations type
+// if type is correct, converts it to ExtrapolationConfig
+function validateType(type: ExtrapolationType): RequiredExtrapolationConfig {
   'worklet';
-
-  const EXTRAPOLATE_ERROR_MSG = `Reanimated: config object is not valid, please provide valid config, for example:
-    interpolate(value, [inputRange], [outputRange], {
-    extrapolateLeft: 'clamp',
-    extrapolateRight: 'extend',
-  })`;
-
-  const EXTRAPOLATE_ERROR = (
-    extrapolate
-  ) => `Reanimated: not supported value for "${extrapolate}" \nSupported values: ["extend", "clamp", "identity"]\n Valid example:
-    interpolate(value, [inputRange], [outputRange], {
-      ${extrapolate}: 'clamp',
-  })`;
-
-  type = type ?? 'extend';
-
-  // eslint-disable-next-line no-prototype-builtins
-  const hasExtrapolateLeft = type.hasOwnProperty('extrapolateLeft');
-  // eslint-disable-next-line no-prototype-builtins
-  const hasExtrapolateRight = type.hasOwnProperty('extrapolateRight');
-
-  if (
-    typeof type === 'object' &&
-    ((Object.keys(type).length === 2 &&
-      !(hasExtrapolateLeft && hasExtrapolateRight)) ||
-      (Object.keys(type).length === 1 &&
-        !(hasExtrapolateLeft || hasExtrapolateRight)) ||
-      Object.keys(type).length > 2)
-  ) {
-    throw new Error(EXTRAPOLATE_ERROR_MSG);
+  // initialize extrapolationConfig with default extrapolation
+  const extrapolationConfig: RequiredExtrapolationConfig = {
+    extrapolateLeft: Extrapolation.EXTEND,
+    extrapolateRight: Extrapolation.EXTEND,
+  };
+
+  if (!type) {
+    return extrapolationConfig;
   }
 
-  if (typeof type === 'object') {
-    if (hasExtrapolateLeft && !isExtrapolate(type.extrapolateLeft)) {
-      throw new Error(EXTRAPOLATE_ERROR('extrapolateLeft'));
-    }
-
-    if (hasExtrapolateRight && !isExtrapolate(type.extrapolateRight)) {
-      throw new Error(EXTRAPOLATE_ERROR('extrapolateRight'));
+  if (typeof type === 'string') {
+    if (!isExtrapolate(type)) {
+      throw new Error(
+        `Reanimated: not supported value for "interpolate" \nSupported values: ["extend", "clamp", "identity", Extrapolatation.CLAMP, Extrapolatation.EXTEND, Extrapolatation.IDENTITY]\n Valid example:
+        interpolate(value, [inputRange], [outputRange], "clamp")`
+      );
     }
+    extrapolationConfig.extrapolateLeft = type;
+    extrapolationConfig.extrapolateRight = type;
+    return extrapolationConfig;
   }
 
-  if (typeof type === 'string' && !isExtrapolate(type)) {
+  // otherwise type is extrapolation config object
+  if (
+    (type.extrapolateLeft && !isExtrapolate(type.extrapolateLeft)) ||
+    (type.extrapolateRight && !isExtrapolate(type.extrapolateRight))
+  ) {
     throw new Error(
-      `Reanimated: not supported value for "interpolate" \nSupported values: ["extend", "clamp", "identity"]\n Valid example:
-       interpolate(value, [inputRange], [outputRange], "clamp")`
+      `Reanimated: not supported value for "interpolate" \nSupported values: ["extend", "clamp", "identity", Extrapolatation.CLAMP, Extrapolatation.EXTEND, Extrapolatation.IDENTITY]\n Valid example:
+      interpolate(value, [inputRange], [outputRange], {
+        extrapolateLeft: Extrapolation.CLAMP,
+        extrapolateRight: Extrapolation.IDENTITY
+      }})`
     );
   }
+
+  Object.assign(extrapolationConfig, type);
+  return extrapolationConfig;
 }
 
-// TODO: support default values in worklets:
-// e.g. function interpolate(x, input, output, type = Extrapolate.CLAMP)
-function internalInterpolate(x, l, r, ll, rr, type) {
+function internalInterpolate(
+  x: number,
+  narrowedInput: InterpolationNarrowedInput,
+  extrapolationConfig: RequiredExtrapolationConfig
+) {
   'worklet';
-  if (r - l === 0) return ll;
-  const progress = (x - l) / (r - l);
-  const val = ll + progress * (rr - ll);
-  const coef = rr >= ll ? 1 : -1;
-
-  const config = { type, coef, val, ll, rr, x };
-
-  if (global.__DEV__) {
-    validateType(type);
-  }
-
-  if (typeof type === 'object') {
-    if (coef * val < coef * ll) {
-      return getVal(Object.assign(config, { type: type.extrapolateLeft }));
-    } else if (coef * val > coef * ll) {
-      return getVal(Object.assign(config, { type: type.extrapolateRight }));
-    }
-  }
-
-  if (coef * val < coef * ll || coef * val > coef * rr) {
-    return getVal(config);
+  const {
+    leftEdgeInput,
+    rightEdgeInput,
+    leftEdgeOutput,
+    rightEdgeOutput,
+  } = narrowedInput;
+  if (rightEdgeInput - leftEdgeInput === 0) return leftEdgeOutput;
+  const progress = (x - leftEdgeInput) / (rightEdgeInput - leftEdgeInput);
+  const val = leftEdgeOutput + progress * (rightEdgeOutput - leftEdgeOutput);
+  const coef = rightEdgeOutput >= leftEdgeOutput ? 1 : -1;
+
+  if (coef * val < coef * leftEdgeOutput) {
+    return getVal(
+      extrapolationConfig.extrapolateLeft,
+      coef,
+      val,
+      leftEdgeOutput,
+      rightEdgeOutput,
+      x
+    );
+  } else if (coef * val > coef * rightEdgeOutput) {
+    return getVal(
+      extrapolationConfig.extrapolateRight,
+      coef,
+      val,
+      leftEdgeOutput,
+      rightEdgeOutput,
+      x
+    );
   }
 
   return val;
 }
 
-export function interpolate(x, input, output, type) {
+// TODO: support default values in worklets:
+// e.g. function interpolate(x, input, output, type = Extrapolatation.CLAMP)
+export function interpolate(
+  x: number | InterpolatedNode,
+  input: readonly number[],
+  output: readonly number[],
+  type?: ExtrapolationType
+): number {
   'worklet';
-  if (x && x.__nodeID) {
+  if (input.length < 2 || output.length < 2) {
+    throw Error(
+      'Interpolation input and output should contain at least two values.'
+    );
+  }
+
+  const extrapolationConfig = validateType(type);
+
+  if (isNode(x)) {
     console.warn(
       `interpolate() was renamed to interpolateNode() in Reanimated 2. Please use interpolateNode() instead`
     );
-    // we can't use rest parameters in worklets at the moment
-    // eslint-disable-next-line prefer-spread, prefer-rest-params
-    return interpolateNode.apply(undefined, arguments);
+    return interpolateNode(x, {
+      inputRange: input,
+      outputRange: output,
+      extrapolateLeft: extrapolationConfig.extrapolateLeft,
+      extrapolateRight: extrapolationConfig.extrapolateRight,
+    });
   }
 
   const length = input.length;
-  let narrowedInput = [];
-  if (x < input[0]) {
-    narrowedInput = [input[0], input[1], output[0], output[1]];
-  } else if (x > input[length - 1]) {
-    narrowedInput = [
-      input[length - 2],
-      input[length - 1],
-      output[length - 2],
-      output[length - 1],
-    ];
-  } else {
-    for (let i = 1; i < length; ++i) {
-      if (x <= input[i]) {
-        narrowedInput = [input[i - 1], input[i], output[i - 1], output[i]];
-        break;
+  const narrowedInput: InterpolationNarrowedInput = {
+    leftEdgeInput: input[0],
+    rightEdgeInput: input[1],
+    leftEdgeOutput: output[0],
+    rightEdgeOutput: output[1],
+  };
+  if (length > 2) {
+    if (x > input[length - 1]) {
+      narrowedInput.leftEdgeInput = input[length - 2];
+      narrowedInput.rightEdgeInput = input[length - 1];
+      narrowedInput.leftEdgeOutput = output[length - 2];
+      narrowedInput.rightEdgeOutput = output[length - 1];
+    } else {
+      for (let i = 1; i < length; ++i) {
+        if (x <= input[i]) {
+          narrowedInput.leftEdgeInput = input[i - 1];
+          narrowedInput.rightEdgeInput = input[i];
+          narrowedInput.leftEdgeOutput = output[i - 1];
+          narrowedInput.rightEdgeOutput = output[i];
+          break;
+        }
       }
     }
   }
-  return internalInterpolate.apply({}, [x].concat(narrowedInput).concat(type));
+
+  return internalInterpolate(x, narrowedInput, extrapolationConfig);
 }

package/src/reanimated2/js-reanimated/JSReanimated.ts

@@ -1,35 +1,37 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import MapperRegistry from './MapperRegistry';
 import MutableValue from './MutableValue';
 import Mapper from './Mapper';
+import { NativeReanimated } from '../NativeReanimated/NativeReanimated';
+import { Timestamp } from '../animation/commonTypes';
+import { NestedObjectValues } from '../commonTypes';
+
+export default class JSReanimated extends NativeReanimated {
+  _valueSetter?: <T>(value: T) => void = undefined;
 
-export default class JSReanimated {
-  native = false;
-  _valueSetter = undefined;
   _renderRequested = false;
   _mapperRegistry = new MapperRegistry(this);
-  _frames = [];
-  timeProvider = {};
+  _frames: ((timestamp: Timestamp) => void)[] = [];
+  timeProvider: { now: () => number };
 
   constructor() {
+    super(false);
     if (process.env.JEST_WORKER_ID) {
-      this.timeProvider.now = () => Date.now();
+      this.timeProvider = { now: () => Date.now() };
     } else {
-      this.timeProvider.now = () => window.performance.now();
+      this.timeProvider = { now: () => window.performance.now() };
     }
   }
 
-  pushFrame(frame) {
+  pushFrame(frame: (timestamp: Timestamp) => void): void {
     this._frames.push(frame);
     this.maybeRequestRender();
   }
 
-  getTimestamp() {
+  getTimestamp(): number {
     return this.timeProvider.now();
   }
 
-  maybeRequestRender() {
+  maybeRequestRender(): void {
     if (!this._renderRequested) {
       this._renderRequested = true;
 
@@ -41,7 +43,7 @@ export default class JSReanimated {
     }
   }
 
-  _onRender(timestampMs) {
+  _onRender(timestampMs: number): void {
     this._mapperRegistry.execute();
 
     const frames = [...this._frames];
@@ -56,38 +58,50 @@ export default class JSReanimated {
     }
   }
 
-  installCoreFunctions(valueSetter) {
+  installCoreFunctions(valueSetter: <T>(value: T) => void): void {
     this._valueSetter = valueSetter;
   }
 
-  makeShareable(value) {
+  makeShareable<T>(value: T): T {
     return value;
   }
 
-  makeMutable(value) {
-    return new MutableValue(value, this._valueSetter);
+  makeMutable<T>(value: T): MutableValue<T> {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return new MutableValue(value, this._valueSetter!);
   }
 
-  makeRemote(object) {
-    return object;
+  makeRemote<T>(object = {}): T {
+    return object as T;
   }
 
-  startMapper(mapper, inputs = [], outputs = []) {
+  startMapper(
+    mapper: () => void,
+    inputs: NestedObjectValues<MutableValue<unknown>>[] = [],
+    outputs: NestedObjectValues<MutableValue<unknown>>[] = []
+  ): number {
     const instance = new Mapper(this, mapper, inputs, outputs);
     const mapperId = this._mapperRegistry.startMapper(instance);
     this.maybeRequestRender();
     return mapperId;
   }
 
-  stopMapper(mapperId) {
+  stopMapper(mapperId: number): void {
     this._mapperRegistry.stopMapper(mapperId);
   }
 
-  registerEventHandler(_eventHash, _eventHandler) {
+  registerEventHandler<T>(_: string, __: (event: T) => void): string {
     // noop
+    return '';
   }
 
-  unregisterEventHandler(_registrationId) {
+  unregisterEventHandler(_: string): void {
     // noop
   }
+
+  enableLayoutAnimations() {
+    console.warn(
+      '[Reanimated] enableLayoutAnimations is not available for WEB yet'
+    );
+  }
 }

package/src/reanimated2/js-reanimated/Mapper.ts

@@ -1,13 +1,22 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
+import { NestedObjectValues } from '../commonTypes';
+import JSReanimated from './JSReanimated';
 import MutableValue from './MutableValue';
 
-export default class Mapper {
+export default class Mapper<T> {
   static MAPPER_ID = 1;
+  id: number;
+  inputs: MutableValue<T>[];
+  outputs: MutableValue<T>[];
+  mapper: () => void;
 
   dirty = true;
 
-  constructor(module, mapper, inputs = [], outputs = []) {
+  constructor(
+    module: JSReanimated,
+    mapper: () => void,
+    inputs: NestedObjectValues<MutableValue<T>>[] = [],
+    outputs: NestedObjectValues<MutableValue<T>>[] = []
+  ) {
     this.id = Mapper.MAPPER_ID++;
     this.inputs = this.extractMutablesFromArray(inputs);
     this.outputs = this.extractMutablesFromArray(outputs);
@@ -23,16 +32,20 @@ export default class Mapper {
     });
   }
 
-  execute() {
+  execute(): void {
     this.dirty = false;
     this.mapper();
   }
 
-  extractMutablesFromArray(array) {
-    const res = [];
+  extractMutablesFromArray<T>(
+    array: NestedObjectValues<MutableValue<T>>
+  ): MutableValue<T>[] {
+    const res: MutableValue<T>[] = [];
 
-    function extractMutables(value) {
-      if (value instanceof MutableValue) {
+    function extractMutables(value: NestedObjectValues<MutableValue<T>>) {
+      if (value == null) {
+        // return;
+      } else if (value instanceof MutableValue) {
         res.push(value);
       } else if (Array.isArray(value)) {
         value.forEach((v) => extractMutables(v));