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

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

@@ -1,35 +1,47 @@
-// 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 {
+  AnimationObject,
+  PrimitiveValue,
+  Timestamp,
+} from '../animation/commonTypes';
+import { Descriptor } from '../hook/commonTypes';
+
+export default class JSReanimated extends NativeReanimated {
+  _valueSetter?: (
+    value:
+      | (() => AnimationObject)
+      | AnimationObject
+      | PrimitiveValue
+      | Descriptor
+  ) => 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 +53,7 @@ export default class JSReanimated {
     }
   }
 
-  _onRender(timestampMs) {
+  _onRender(timestampMs: number): void {
     this._mapperRegistry.execute();
 
     const frames = [...this._frames];
@@ -56,38 +68,51 @@ export default class JSReanimated {
     }
   }
 
-  installCoreFunctions(valueSetter) {
+  installCoreFunctions(
+    valueSetter: (
+      value:
+        | (() => AnimationObject)
+        | AnimationObject
+        | PrimitiveValue
+        | Descriptor
+    ) => void
+  ): void {
     this._valueSetter = valueSetter;
   }
 
-  makeShareable(value) {
+  makeShareable<T>(value: T): T {
     return value;
   }
 
-  makeMutable(value) {
+  makeMutable<T>(value: T): MutableValue {
     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: any[] = [],
+    outputs: any[] = []
+  ): 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
   }
 }

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

@@ -7,7 +7,7 @@ export default class Mapper {
 
   dirty = true;
 
-  constructor(module, mapper, inputs = [], outputs = []) {
+  constructor(module, mapper, inputs: any[] = [], outputs: any[] = []) {
     this.id = Mapper.MAPPER_ID++;
     this.inputs = this.extractMutablesFromArray(inputs);
     this.outputs = this.extractMutablesFromArray(outputs);

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

@@ -0,0 +1,71 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import JSReanimated from './JSReanimated';
+import { shouldBeUseWeb } from '../PlatformChecker';
+
+const reanimatedJS = new JSReanimated();
+
+if (shouldBeUseWeb()) {
+  global._frameTimestamp = null;
+  global._setGlobalConsole = (_val) => {
+    // noop
+  };
+  global._measure = () => {
+    console.warn(
+      "[Reanimated] You can't use 'measue' method with Chrome Debugger or with web version"
+    );
+    return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      pageX: 0,
+      pageY: 0,
+    };
+  };
+  global._scrollTo = () => {
+    console.warn(
+      "[Reanimated] You can't use 'scrollTo' method with Chrome Debugger or with web version"
+    );
+  };
+}
+
+export const _updatePropsJS = (updates, viewRef) => {
+  if (viewRef?._component) {
+    const [rawStyles] = Object.keys(updates).reduce(
+      (acc, key) => {
+        const value = updates[key];
+        const index = typeof value === 'function' ? 1 : 0;
+        acc[index][key] = value;
+        return acc;
+      },
+      [{}, {}]
+    );
+
+    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 (!rawStyles[key]) {
+          return;
+        }
+        const dashedKey = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+        viewRef._component._touchableNode.setAttribute(
+          dashedKey,
+          rawStyles[key]
+        );
+      });
+    } else {
+      console.warn('It is not possible to manipulate component');
+    }
+  }
+};
+
+const setNativeProps = (component, style) => {
+  const previousStyle = component.previousStyle ? component.previousStyle : {};
+  const currentStyle = { ...previousStyle, ...style };
+  component.previousStyle = currentStyle;
+  component.setNativeProps({ style: currentStyle });
+};
+
+export default reanimatedJS;

package/src/reanimated2/layoutReanimation/LayoutAnimationRepository.tsx

@@ -0,0 +1,62 @@
+/* global _stopObservingProgress, _startObservingProgress */
+import { runOnUI } from '../core';
+import { withStyleAnimation } from '../animation/styleAnimation';
+
+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];
+        }
+        enteringAnimationForTag[tag] = null;
+      }
+
+      const sv: { value: boolean; _value: boolean } = configs[tag].sv;
+      _stopObservingProgress(tag, false);
+      _startObservingProgress(tag, sv);
+      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 (type === 'entering') {
+          enteringAnimationForTag[tag] = null;
+        }
+      };
+      configs[tag].sv.value = animation;
+      _startObservingProgress(tag, sv);
+    },
+  };
+})();

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

@@ -0,0 +1,91 @@
+import { withDelay } from '../../animation';
+import {
+  EntryExitAnimationFunction,
+  AnimationFunction,
+  LayoutAnimationFunction,
+} from './commonTypes';
+
+export class BaseAnimationBuilder {
+  durationV?: number;
+  delayV?: number;
+  randomizeDelay = false;
+  callbackV?: (finished: boolean) => void;
+
+  static createInstance: () => BaseAnimationBuilder;
+  build = (): EntryExitAnimationFunction | LayoutAnimationFunction => {
+    throw Error('Unimplemented method in child class.');
+  };
+
+  static duration(durationMs: number): BaseAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.duration(durationMs);
+  }
+
+  duration(durationMs: number): BaseAnimationBuilder {
+    this.durationV = durationMs;
+    return this;
+  }
+
+  static delay(delayMs: number): BaseAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.delay(delayMs);
+  }
+
+  delay(delayMs: number): BaseAnimationBuilder {
+    this.delayV = delayMs;
+    return this;
+  }
+
+  static withCallback(
+    callback: (finished: boolean) => void
+  ): BaseAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.withCallback(callback);
+  }
+
+  withCallback(callback: (finsihed: boolean) => void): BaseAnimationBuilder {
+    this.callbackV = callback;
+    return this;
+  }
+
+  // 300ms is the default animation duration. If any animation has different default has to override this method.
+  static getDuration(): number {
+    return 300;
+  }
+
+  getDuration(): number {
+    return this.durationV ?? 300;
+  }
+
+  static randomDelay(): BaseAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.randomDelay();
+  }
+
+  randomDelay(): BaseAnimationBuilder {
+    this.randomizeDelay = true;
+    return this;
+  }
+
+  // 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 isDelayProvided = this.randomizeDelay || this.delayV;
+    return isDelayProvided
+      ? withDelay
+      : (_, animation) => {
+          'worklet';
+          return animation;
+        };
+  }
+
+  static build(): EntryExitAnimationFunction | LayoutAnimationFunction {
+    const instance = this.createInstance();
+    return instance.build();
+  }
+}

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

@@ -0,0 +1,169 @@
+import { withTiming, withSpring } from '../../animation';
+import {
+  AnimationFunction,
+  BaseBuilderAnimationConfig,
+  LayoutAnimationAndConfig,
+} from './commonTypes';
+import { EasingFn } from '../../Easing';
+import { BaseAnimationBuilder } from './BaseAnimationBuilder';
+export class ComplexAnimationBuilder extends BaseAnimationBuilder {
+  easingV?: EasingFn;
+  rotateV?: string;
+  type?: AnimationFunction;
+  dampingV?: number;
+  massV?: number;
+  stiffnessV?: number;
+  overshootClampingV?: number;
+  restDisplacementThresholdV?: number;
+  restSpeedThresholdV?: number;
+
+  static createInstance: () => ComplexAnimationBuilder;
+
+  static easing(easingFunction: EasingFn): ComplexAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.easing(easingFunction);
+  }
+
+  easing(easingFunction: EasingFn): ComplexAnimationBuilder {
+    this.easingV = easingFunction;
+    return this;
+  }
+
+  static rotate(degree: string): ComplexAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.rotate(degree);
+  }
+
+  rotate(degree: string): ComplexAnimationBuilder {
+    this.rotateV = degree;
+    return this;
+  }
+
+  static springify(): ComplexAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.springify();
+  }
+
+  springify(): ComplexAnimationBuilder {
+    this.type = withSpring as AnimationFunction;
+    return this;
+  }
+
+  static damping(damping: number): ComplexAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.damping(damping);
+  }
+
+  damping(damping: number): ComplexAnimationBuilder {
+    this.dampingV = damping;
+    return this;
+  }
+
+  static mass(mass: number): ComplexAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.mass(mass);
+  }
+
+  mass(mass: number): ComplexAnimationBuilder {
+    this.massV = mass;
+    return this;
+  }
+
+  static stiffness(stiffness: number): ComplexAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.stiffness(stiffness);
+  }
+
+  stiffness(stiffness: number): ComplexAnimationBuilder {
+    this.stiffnessV = stiffness;
+    return this;
+  }
+
+  static overshootClamping(overshootClamping: number): ComplexAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.overshootClamping(overshootClamping);
+  }
+
+  overshootClamping(overshootClamping: number): ComplexAnimationBuilder {
+    this.overshootClampingV = overshootClamping;
+    return this;
+  }
+
+  static restDisplacementThreshold(
+    restDisplacementThreshold: number
+  ): ComplexAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.restDisplacementThreshold(restDisplacementThreshold);
+  }
+
+  restDisplacementThreshold(
+    restDisplacementThreshold: number
+  ): ComplexAnimationBuilder {
+    this.restDisplacementThresholdV = restDisplacementThreshold;
+    return this;
+  }
+
+  static restSpeedThreshold(
+    restSpeedThreshold: number
+  ): ComplexAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.restSpeedThreshold(restSpeedThreshold);
+  }
+
+  restSpeedThreshold(restSpeedThreshold: number): ComplexAnimationBuilder {
+    this.restSpeedThresholdV = restSpeedThreshold;
+    return this;
+  }
+
+  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];
+  }
+}