TypeScript for Layout Animations

src/createAnimatedComponent.js

@@ -17,7 +17,7 @@ import {
   DefaultEntering,
   DefaultExiting,
   DefaultLayout,
-} from './reanimated2/layoutReanimation/defaultAnimationsBuilder';
+} from './reanimated2/layoutReanimation/defaultAnimations/Default';
 
 const NODE_MAPPING = new Map();
 

src/reanimated2/Easing.ts

@@ -54,7 +54,7 @@ import { Bezier } from './Bezier';
  * - [`out`](docs/easing.html#out) runs an easing function backwards
  */
 
-type EasingFn = (t: number) => number;
+export type EasingFn = (t: number) => number;
 /**
  * A linear function, `f(t) = t`. Position correlates to elapsed time one to
  * one.

src/reanimated2/animations.ts

@@ -179,7 +179,7 @@ export function withStartValue(startValue, animation) {
   });
 }
 
-export function withTiming(toValue, userConfig, callback) {
+export function withTiming(toValue: any, userConfig: any, callback?: any) {
   'worklet';
 
   return defineAnimation(toValue, () => {

src/reanimated2/globals.d.ts

@@ -1 +1,17 @@
 declare const _WORKLET: boolean;
+declare const _stopObservingProgress: (tag: number, flag: boolean) => void;
+declare const _startObservingProgress: (tag: number, flag: boolean) => void;
+declare namespace NodeJS {
+  interface Global {
+    LayoutAnimationRepository: {
+      configs: Record<string, unknown>;
+      registerConfig(tag: number, config: Record<string, unknown>): void;
+      removeConfig(tag: number): void;
+      startAnimationForTag(
+        tag: number,
+        type: unknown,
+        yogaValues: unknown
+      ): void;
+    };
+  }
+}

src/reanimated2/layoutReanimation/AnimatedRoot.tsx

@@ -1,6 +1,4 @@
 /* global _stopObservingProgress, _startObservingProgress */
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import { Platform, requireNativeComponent } from 'react-native';
 import React from 'react';
 import { runOnUI } from '../core';
@@ -12,14 +10,11 @@ if (Platform.OS === 'web' && !requireNativeComponent) {
 } else {
   REALayoutView = (requireNativeComponent(
     'REALayoutView'
-  ) as any) as React.Component;
+  ) as unknown) as React.Component;
 }
 
-export class AnimatedLayout extends React.Component<
-  Record<string, unknown>,
-  Record<string, unknown>
-> {
-  render() {
+export class AnimatedLayout extends React.Component {
+  render(): React.ReactElement {
     return <REALayoutView collapsable={false} {...this.props} />;
   }
 }

src/reanimated2/layoutReanimation/animationBuilder/BaseAnimationBuilder.ts

@@ -0,0 +1,207 @@
+import { withDelay, withTiming, withSpring } from '../../animations';
+import {
+  EntryExitAnimationFunction,
+  AnimationFunction,
+  BaseBuilderAnimationConfig,
+  LayoutAnimationAndConfig,
+  EntryExitAnimationBuild,
+} 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;
+
+  static createInstance: () => BaseAnimationBuilder;
+  build: EntryExitAnimationBuild;
+
+  static duration(durationMs: number): BaseAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.duration(durationMs);
+  }
+
+  duration(durationMs: number): BaseAnimationBuilder {
+    this.durationV = durationMs;
+    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);
+  }
+
+  delay(delayMs: number): BaseAnimationBuilder {
+    this.delayV = delayMs;
+    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
+  ): BaseAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.restDisplacementThreshold(restDisplacementThreshold);
+  }
+
+  restDisplacementThreshold(
+    restDisplacementThreshold: number
+  ): BaseAnimationBuilder {
+    this.restDisplacementThresholdV = restDisplacementThreshold;
+    return this;
+  }
+
+  static restSpeedThreshold(restSpeedThreshold: number): BaseAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.restSpeedThreshold(restSpeedThreshold);
+  }
+
+  restSpeedThreshold(restSpeedThreshold: number): BaseAnimationBuilder {
+    this.restSpeedThresholdV = restSpeedThreshold;
+    return this;
+  }
+
+  static build(): EntryExitAnimationFunction {
+    const instance = this.createInstance();
+    return instance.build();
+  }
+
+  getDelayFunction(): AnimationFunction {
+    const delay = this.delayV;
+    return delay
+      ? withDelay
+      : (_, animation) => {
+          'worklet';
+          return animation;
+        };
+  }
+
+  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];
+  }
+}

src/reanimated2/layoutReanimation/animationBuilder/BaseBounceAnimationBuilder.ts

@@ -0,0 +1,65 @@
+import { withDelay, withTiming } from '../../animations';
+import {
+  EntryExitAnimationFunction,
+  AnimationFunction,
+  LayoutAnimationAndConfig,
+  BounceBuilderAnimationConfig,
+  EntryExitAnimationBuild,
+} from './commonTypes';
+
+export class BaseBounceAnimationBuilder {
+  durationV: number;
+  delayV: number;
+
+  static createInstance: () => BaseBounceAnimationBuilder;
+  build: EntryExitAnimationBuild;
+
+  static duration(durationMs: number): BaseBounceAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.duration(durationMs);
+  }
+
+  duration(durationMs: number): BaseBounceAnimationBuilder {
+    this.durationV = durationMs;
+    return this;
+  }
+
+  static delay(delayMs: number): BaseBounceAnimationBuilder {
+    const instance = this.createInstance();
+    return instance.delay(delayMs);
+  }
+
+  delay(delayMs: number): BaseBounceAnimationBuilder {
+    this.delayV = delayMs;
+    return this;
+  }
+
+  getDelayFunction(): AnimationFunction {
+    const delay = this.delayV;
+    return delay
+      ? withDelay
+      : (_, animation) => {
+          'worklet';
+          return animation;
+        };
+  }
+
+  getAnimationAndConfig(): LayoutAnimationAndConfig {
+    const duration = this.durationV;
+    const type = withTiming;
+    const animation = type;
+
+    const config: BounceBuilderAnimationConfig = {};
+
+    if (duration) {
+      config.duration = duration;
+    }
+
+    return [animation, config];
+  }
+
+  static build(): EntryExitAnimationFunction {
+    const instance = this.createInstance();
+    return instance.build();
+  }
+}