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

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

@@ -1,27 +1,29 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-export default class MapperRegistry {
-  sortedMappers = [];
-  mappers = new Map();
+import JSReanimated from './JSReanimated';
+import Mapper from './Mapper';
+
+export default class MapperRegistry<T> {
+  sortedMappers: Mapper<T>[] = [];
+  mappers: Map<number, Mapper<T>> = new Map();
+  _module: JSReanimated;
 
   updatedSinceLastExecute = false;
 
-  constructor(module) {
+  constructor(module: JSReanimated) {
     this._module = module;
   }
 
-  startMapper(mapper) {
+  startMapper(mapper: Mapper<T>): number {
     this.mappers.set(mapper.id, mapper);
     this.updatedSinceLastExecute = true;
     return mapper.id;
   }
 
-  stopMapper(id) {
+  stopMapper(id: number): void {
     this.mappers.delete(id);
     this.updatedSinceLastExecute = true;
   }
 
-  execute() {
+  execute(): void {
     if (this.updatedSinceLastExecute) {
       this.updateOrder();
       this.updatedSinceLastExecute = false;
@@ -35,10 +37,10 @@ export default class MapperRegistry {
     }
   }
 
-  updateOrder() {
+  updateOrder(): void {
     const nodes = [...this.mappers.values()].map((mapper) => new Node(mapper));
 
-    const mappersById = {};
+    const mappersById: Record<number, Mapper<T>> = {};
     this.mappers.forEach((mapper) => {
       mappersById[mapper.id] = mapper;
     });
@@ -75,9 +77,9 @@ export default class MapperRegistry {
       }
     }
 
-    const post = {};
+    const post: Record<number, number> = {};
     let postCounter = 1;
-    const dfs = (node) => {
+    const dfs = (node: Node<T>) => {
       const index = nodes.indexOf(node);
       if (index === -1) {
         // this node has already been handled
@@ -99,7 +101,8 @@ export default class MapperRegistry {
     while (nodes.length) dfs(nodes[0]);
 
     const postArray = Object.keys(post).map((key) => {
-      return [key, post[key]];
+      const num = parseInt(key);
+      return [num, post[num]];
     });
     postArray.sort((a, b) => {
       return b[1] - a[1];
@@ -114,16 +117,16 @@ export default class MapperRegistry {
     }
   }
 
-  get needRunOnRender() {
+  get needRunOnRender(): boolean {
     return this.updatedSinceLastExecute;
   }
 }
 
-class Node {
-  mapper = null;
-  children = [];
+class Node<T> {
+  mapper: Mapper<T>;
+  children: Node<T>[];
 
-  constructor(mapper, _parents = [], children = []) {
+  constructor(mapper: Mapper<T>, children = []) {
     this.mapper = mapper;
     this.children = children;
   }

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

@@ -1,36 +1,36 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-export default class MutableValue {
+export default class MutableValue<T> {
   static MUTABLE_ID = 1;
-
+  _id: number;
+  _value: T;
+  _setter: (value: T) => void;
   _animation = null;
-  _listeners = [];
+  _listeners: (() => void)[] = [];
 
-  constructor(value, setter) {
+  constructor(value: T, setter: (value: T) => void) {
     this._id = MutableValue.MUTABLE_ID++;
     this._value = value;
     this._setter = setter;
   }
 
-  get value() {
+  get value(): T {
     return this._value;
   }
 
-  set value(nextValue) {
+  set value(nextValue: T) {
     this._setter(nextValue);
   }
 
   // this changes the value finally and is supposed to be called from this._setter
-  _setValue(newValue) {
+  _setValue(newValue: T): void {
     this._value = newValue;
     this._triggerListener();
   }
 
-  addListener(listener) {
+  addListener(listener: () => void): void {
     this._listeners.push(listener);
   }
 
-  _triggerListener() {
+  _triggerListener(): void {
     for (let i = 0, len = this._listeners.length; i < len; ++i) {
       this._listeners[i]();
     }

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

@@ -1,10 +1,18 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import JSReanimated from './JSReanimated';
 import { shouldBeUseWeb } from '../PlatformChecker';
+import { AnimatedStyle, StyleProps } from '../commonTypes';
 
 const reanimatedJS = new JSReanimated();
 
+interface JSReanimatedComponent {
+  previousStyle: StyleProps;
+  setNativeProps: (style: StyleProps) => void;
+  props: Record<string, string | number>;
+  _touchableNode: {
+    setAttribute: (key: string, props: unknown) => void;
+  };
+}
+
 if (shouldBeUseWeb()) {
   global._frameTimestamp = null;
   global._setGlobalConsole = (_val) => {
@@ -28,12 +36,21 @@ if (shouldBeUseWeb()) {
       "[Reanimated] You can't use 'scrollTo' method with Chrome Debugger or with web version"
     );
   };
+  global._setGestureState = () => {
+    console.warn(
+      "[Reanimated] You can't use 'setGestureState' method with Chrome Debugger or with web version"
+    );
+  };
 }
 
-export const _updatePropsJS = (updates, viewRef) => {
-  if (viewRef?._component) {
+export const _updatePropsJS = (
+  updates: StyleProps | AnimatedStyle,
+  viewRef: { _component?: JSReanimatedComponent }
+): void => {
+  if (viewRef._component) {
+    const component = viewRef._component;
     const [rawStyles] = Object.keys(updates).reduce(
-      (acc, key) => {
+      (acc: [StyleProps, AnimatedStyle], key) => {
         const value = updates[key];
         const index = typeof value === 'function' ? 1 : 0;
         acc[index][key] = value;
@@ -42,18 +59,15 @@ export const _updatePropsJS = (updates, viewRef) => {
       [{}, {}]
     );
 
-    if (typeof viewRef._component.setNativeProps === 'function') {
-      setNativeProps(viewRef._component, rawStyles);
-    } else if (Object.keys(viewRef._component.props).length > 0) {
-      Object.keys(viewRef._component.props).forEach((key) => {
+    if (typeof component.setNativeProps === 'function') {
+      setNativeProps(component, rawStyles);
+    } else if (Object.keys(component.props).length > 0) {
+      Object.keys(component.props).forEach((key) => {
         if (!rawStyles[key]) {
           return;
         }
         const dashedKey = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
-        viewRef._component._touchableNode.setAttribute(
-          dashedKey,
-          rawStyles[key]
-        );
+        component._touchableNode.setAttribute(dashedKey, rawStyles[key]);
       });
     } else {
       console.warn('It is not possible to manipulate component');
@@ -61,7 +75,10 @@ export const _updatePropsJS = (updates, viewRef) => {
   }
 };
 
-const setNativeProps = (component, style) => {
+const setNativeProps = (
+  component: JSReanimatedComponent,
+  style: StyleProps
+): void => {
   const previousStyle = component.previousStyle ? component.previousStyle : {};
   const currentStyle = { ...previousStyle, ...style };
   component.previousStyle = currentStyle;

package/src/reanimated2/layoutReanimation/LayoutAnimationRepository.ts

@@ -0,0 +1,75 @@
+/* global _stopObservingProgress, _startObservingProgress */
+import { runOnUI } from '../core';
+import { withStyleAnimation } from '../animation/styleAnimation';
+import { ColorProperties } from '../UpdateProps';
+import { processColor } from '../Colors';
+
+runOnUI(() => {
+  'worklet';
+
+  const configs: Record<string, any> = {};
+  const enteringAnimationForTag: Record<string, any> = {};
+
+  global.LayoutAnimationRepository = {
+    configs,
+    registerConfig(tag, config) {
+      configs[tag] = config;
+      enteringAnimationForTag[tag] = null;
+    },
+    removeConfig(tag) {
+      delete configs[tag];
+      delete enteringAnimationForTag[tag];
+    },
+    startAnimationForTag(tag, type, yogaValues) {
+      if (configs[tag] == null) {
+        return; // :(
+      }
+      const style = configs[tag][type](yogaValues);
+      let currentAnimation = style.animations;
+      if (type === 'entering') {
+        enteringAnimationForTag[tag] = style;
+      } else if (type === 'layout' && enteringAnimationForTag[tag] !== null) {
+        const entryAniamtion = enteringAnimationForTag[tag].animations;
+        const layoutAnimation = style.animations;
+        currentAnimation = {};
+        for (const key in entryAniamtion) {
+          currentAnimation[key] = entryAniamtion[key];
+        }
+        for (const key in layoutAnimation) {
+          currentAnimation[key] = layoutAnimation[key];
+        }
+      }
+
+      const sv: { value: boolean; _value: boolean } = configs[tag].sv;
+      _stopObservingProgress(tag, false);
+      _startObservingProgress(tag, sv);
+
+      const backupColor: Record<string, string> = {};
+      for (const key in style.initialValues) {
+        if (ColorProperties.includes(key)) {
+          const value = style.initialValues[key];
+          backupColor[key] = value;
+          style.initialValues[key] = processColor(value);
+        }
+      }
+
+      sv.value = Object.assign({}, sv._value, style.initialValues);
+      _stopObservingProgress(tag, false);
+      const animation = withStyleAnimation(currentAnimation);
+
+      animation.callback = (finished?: boolean) => {
+        if (finished) {
+          _stopObservingProgress(tag, finished);
+        }
+        style.callback && style.callback(finished);
+      };
+
+      if (backupColor) {
+        configs[tag].sv._value = { ...configs[tag].sv.value, ...backupColor };
+      }
+
+      configs[tag].sv.value = animation;
+      _startObservingProgress(tag, sv);
+    },
+  };
+})();

package/src/reanimated2/layoutReanimation/animationBuilder/BaseAnimationBuilder.ts

@@ -1,28 +1,18 @@
-import { withDelay, withTiming, withSpring } from '../../animation';
+import { withDelay } from '../../animation';
 import {
   EntryExitAnimationFunction,
   AnimationFunction,
-  BaseBuilderAnimationConfig,
-  EntryExitAnimationBuild,
-  LayoutAnimationAndConfig,
+  LayoutAnimationFunction,
 } from './commonTypes';
-import { EasingFn } from '../../Easing';
+
 export class BaseAnimationBuilder {
   durationV?: number;
-  easingV?: EasingFn;
   delayV?: number;
-  rotateV?: string;
-  type?: AnimationFunction;
-  dampingV?: number;
-  massV?: number;
-  stiffnessV?: number;
-  overshootClampingV?: number;
-  restDisplacementThresholdV?: number;
-  restSpeedThresholdV?: number;
+  randomizeDelay = false;
   callbackV?: (finished: boolean) => void;
 
   static createInstance: () => BaseAnimationBuilder;
-  build: EntryExitAnimationBuild = () => {
+  build = (): EntryExitAnimationFunction | LayoutAnimationFunction => {
     throw Error('Unimplemented method in child class.');
   };
 
@@ -36,16 +26,6 @@ export class BaseAnimationBuilder {
     return this;
   }
 
-  static easing(easingFunction: EasingFn): BaseAnimationBuilder {
-    const instance = this.createInstance();
-    return instance.easing(easingFunction);
-  }
-
-  easing(easingFunction: EasingFn): BaseAnimationBuilder {
-    this.easingV = easingFunction;
-    return this;
-  }
-
   static delay(delayMs: number): BaseAnimationBuilder {
     const instance = this.createInstance();
     return instance.delay(delayMs);
@@ -56,110 +36,47 @@ export class BaseAnimationBuilder {
     return this;
   }
 
-  static rotate(degree: string): BaseAnimationBuilder {
-    const instance = this.createInstance();
-    return instance.rotate(degree);
-  }
-
-  rotate(degree: string): BaseAnimationBuilder {
-    this.rotateV = degree;
-    return this;
-  }
-
-  static springify(): BaseAnimationBuilder {
-    const instance = this.createInstance();
-    return instance.springify();
-  }
-
-  springify(): BaseAnimationBuilder {
-    this.type = withSpring as AnimationFunction;
-    return this;
-  }
-
-  static damping(damping: number): BaseAnimationBuilder {
-    const instance = this.createInstance();
-    return instance.damping(damping);
-  }
-
-  damping(damping: number): BaseAnimationBuilder {
-    this.dampingV = damping;
-    return this;
-  }
-
-  static mass(mass: number): BaseAnimationBuilder {
-    const instance = this.createInstance();
-    return instance.mass(mass);
-  }
-
-  mass(mass: number): BaseAnimationBuilder {
-    this.massV = mass;
-    return this;
-  }
-
-  static stiffness(stiffness: number): BaseAnimationBuilder {
-    const instance = this.createInstance();
-    return instance.stiffness(stiffness);
-  }
-
-  stiffness(stiffness: number): BaseAnimationBuilder {
-    this.stiffnessV = stiffness;
-    return this;
-  }
-
-  static overshootClamping(overshootClamping: number): BaseAnimationBuilder {
-    const instance = this.createInstance();
-    return instance.overshootClamping(overshootClamping);
-  }
-
-  overshootClamping(overshootClamping: number): BaseAnimationBuilder {
-    this.overshootClampingV = overshootClamping;
-    return this;
-  }
-
-  static restDisplacementThreshold(
-    restDisplacementThreshold: number
+  static withCallback(
+    callback: (finished: boolean) => void
   ): BaseAnimationBuilder {
     const instance = this.createInstance();
-    return instance.restDisplacementThreshold(restDisplacementThreshold);
+    return instance.withCallback(callback);
   }
 
-  restDisplacementThreshold(
-    restDisplacementThreshold: number
-  ): BaseAnimationBuilder {
-    this.restDisplacementThresholdV = restDisplacementThreshold;
+  withCallback(callback: (finsihed: boolean) => void): BaseAnimationBuilder {
+    this.callbackV = callback;
     return this;
   }
 
-  static restSpeedThreshold(restSpeedThreshold: number): BaseAnimationBuilder {
-    const instance = this.createInstance();
-    return instance.restSpeedThreshold(restSpeedThreshold);
+  // 300ms is the default animation duration. If any animation has different default has to override this method.
+  static getDuration(): number {
+    return 300;
   }
 
-  restSpeedThreshold(restSpeedThreshold: number): BaseAnimationBuilder {
-    this.restSpeedThresholdV = restSpeedThreshold;
-    return this;
+  getDuration(): number {
+    return this.durationV ?? 300;
   }
 
-  static withCallback(
-    callback: (finished: boolean) => void
-  ): BaseAnimationBuilder {
+  static randomDelay(): BaseAnimationBuilder {
     const instance = this.createInstance();
-    return instance.withCallback(callback);
+    return instance.randomDelay();
   }
 
-  withCallback(callback: (finsihed: boolean) => void): BaseAnimationBuilder {
-    this.callbackV = callback;
+  randomDelay(): BaseAnimationBuilder {
+    this.randomizeDelay = true;
     return this;
   }
 
-  static build(): EntryExitAnimationFunction {
-    const instance = this.createInstance();
-    return instance.build();
+  // when randomizeDelay is set to true, randomize delay between 0 and provided value (or 1000ms if delay is not provided)
+  getDelay(): number {
+    return this.randomizeDelay
+      ? Math.random() * (this.delayV ?? 1000)
+      : this.delayV ?? 0;
   }
 
   getDelayFunction(): AnimationFunction {
-    const delay = this.delayV;
-    return delay
+    const isDelayProvided = this.randomizeDelay || this.delayV;
+    return isDelayProvided
       ? withDelay
       : (_, animation) => {
           'worklet';
@@ -167,55 +84,8 @@ export class BaseAnimationBuilder {
         };
   }
 
-  getAnimationAndConfig(): LayoutAnimationAndConfig {
-    const duration = this.durationV;
-    const easing = this.easingV;
-    const rotate = this.rotateV;
-    const type = this.type ? this.type : (withTiming as AnimationFunction);
-    const damping = this.dampingV;
-    const mass = this.massV;
-    const stiffness = this.stiffnessV;
-    const overshootClamping = this.overshootClampingV;
-    const restDisplacementThreshold = this.restDisplacementThresholdV;
-    const restSpeedThreshold = this.restSpeedThresholdV;
-
-    const animation = type;
-
-    const config: BaseBuilderAnimationConfig = {};
-
-    if (type === withTiming) {
-      if (easing) {
-        config.easing = easing;
-      }
-      if (duration) {
-        config.duration = duration;
-      }
-      if (rotate) {
-        config.rotate = rotate;
-      }
-    } else {
-      if (damping) {
-        config.damping = damping;
-      }
-      if (mass) {
-        config.mass = mass;
-      }
-      if (stiffness) {
-        config.stiffness = stiffness;
-      }
-      if (overshootClamping) {
-        config.overshootClamping = overshootClamping;
-      }
-      if (restDisplacementThreshold) {
-        config.restDisplacementThreshold = restDisplacementThreshold;
-      }
-      if (restSpeedThreshold) {
-        config.restSpeedThreshold = restSpeedThreshold;
-      }
-      if (rotate) {
-        config.rotate = rotate;
-      }
-    }
-    return [animation, config];
+  static build(): EntryExitAnimationFunction | LayoutAnimationFunction {
+    const instance = this.createInstance();
+    return instance.build();
   }
 }