react-native-reanimated 2.4.0 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
@@ -18,14 +18,21 @@
     "format:common": "find Common/ -iname *.h -o -iname *.cpp | xargs clang-format -i",
     "release": "npm login && release-it",
     "type:check": "yarn tsc --noEmit",
-    "type:generate": "yarn type:generate:clean && yarn type:generate:cp-js-src && yarn type:generate:tsc && yarn type:generate:remove.ts && yarn type:generate:remove.tsx",
+    "type:generate": "yarn type:generate:clean && yarn type:generate:cp-js-src && yarn type:generate:tsc && yarn type:generate:tsc:declaration && yarn type:generate:remove.ts && yarn type:generate:remove.tsx && yarn type:generate:remove.js:from-src",
     "type:generate:clean": "rm -rf lib/ && mkdir lib/",
-    "type:generate:cp-js-src": "cp -RL src/ lib/",
+    "type:generate:cp-js-src": "cp -RL src/* lib/",
     "type:generate:tsc": "yarn tsc",
+    "type:generate:tsc:declaration": "yarn tsc --project tsconfig.json --pretty --declaration --emitDeclarationOnly --outDir lib/types",
     "type:generate:remove.ts": "find ./lib -type f -name \"*.ts\" -and -not -name \"*.d.ts\" -delete",
     "type:generate:remove.tsx": "find ./lib -type f -name \"*.tsx\" -and -not -name \"*.d.ts\" -delete",
+    "type:generate:remove.js:from-src": "find ./src/reanimated2 -type f -name \"*.js\" -delete",
     "prepare": "husky install",
-    "circular_dependency_check": "yarn madge --extensions js,ts,tsx --circular ./src"
+    "circular_dependency_check": "yarn madge --extensions js,ts,tsx --circular ./src",
+    "setup": "yarn && cd Example && yarn && cd ios && pod install --verbose && cd ../..",
+    "clean": "rm -rf node_modules && cd Example && rm -rf node_modules && cd ios && pod deintegrate && cd ../..",
+    "reset": "yarn clean && yarn setup",
+    "clean:deep": "cd android && rm -rf .cxx .gradle build && cd ../Example/android && rm -rf .gradle build app/build && cd ../.. && yarn clean",
+    "reset:deep": "yarn clean:deep && yarn setup"
   },
   "main": "lib/Animated.js",
   "module": "lib/Animated",
@@ -36,7 +43,6 @@
     "Common/",
     "src/",
     "lib/",
-    "libSo/",
     "android/src/main/AndroidManifest.xml",
     "android/src/main/java/",
     "android/build.gradle",
@@ -49,7 +55,6 @@
     "react-native-reanimated.d.ts",
     "mock.js",
     "plugin.js",
-    "expo-module.config.json",
     "!__snapshots__",
     "!*.test.js",
     "!*.test.js.map"
@@ -69,56 +74,57 @@
   },
   "homepage": "https://github.com/software-mansion/react-native-reanimated#readme",
   "dependencies": {
-    "@babel/plugin-transform-object-assign": "^7.10.4",
+    "@babel/plugin-transform-object-assign": "^7.16.7",
     "@types/invariant": "^2.2.35",
     "invariant": "^2.2.4",
     "lodash.isequal": "^4.5.0",
-    "mockdate": "^3.0.2",
-    "react-native-screens": "^3.4.0",
+    "react-native-screens": "^3.11.1",
+    "setimmediate": "^1.0.5",
     "string-hash-64": "^1.0.3"
   },
   "peerDependencies": {
+    "@babel/preset-typescript": "*",
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": "*"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.5",
-    "@babel/plugin-proposal-class-properties": "^7.7.4",
-    "@babel/preset-env": "^7.7.6",
-    "@babel/preset-typescript": "^7.7.4",
-    "@react-native-community/bob": "^0.14.3",
+    "@babel/core": "^7.17.2",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-typescript": "^7.16.7",
+    "@react-native-community/bob": "^0.17.1",
     "@react-native-community/eslint-config": "^0.0.5",
-    "@testing-library/jest-native": "^3.4.3",
+    "@testing-library/jest-native": "^4.0.4",
     "@testing-library/react-hooks": "^5.0.3",
     "@testing-library/react-native": "^7.1.0",
-    "@types/babel-types": "^7.0.9",
-    "@types/babel__core": "^7.1.12",
-    "@types/babel__generator": "^7.6.2",
-    "@types/babel__traverse": "^7.0.15",
-    "@types/jest": "^26.0.15",
-    "@types/react-native": "^0.65.1",
-    "@typescript-eslint/eslint-plugin": "^4.15.1",
-    "@typescript-eslint/parser": "^4.15.1",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^26.6.3",
+    "@types/babel-types": "^7.0.11",
+    "@types/babel__core": "^7.1.18",
+    "@types/babel__generator": "^7.6.4",
+    "@types/babel__traverse": "^7.14.2",
+    "@types/jest": "^27.4.0",
+    "@types/react-native": "^0.66.15",
+    "@typescript-eslint/eslint-plugin": "^5.11.0",
+    "@typescript-eslint/parser": "^5.11.0",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^27.5.1",
     "babel-plugin-module-resolver": "^4.1.0",
-    "clang-format": "^1.5.0",
-    "eslint": "^7.31.0",
-    "eslint-config-prettier": "^6.4.0",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-import-resolver-babel-module": "^5.2.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-node": "^10.0.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1",
-    "husky": "^7.0.0",
-    "jest": "^26.6.3",
+    "clang-format": "^1.6.0",
+    "eslint": "^8.8.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-import-resolver-babel-module": "^5.3.1",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-standard": "^5.0.0",
+    "husky": "^7.0.4",
+    "jest": "^27.5.1",
     "lint-staged": "^11.2.0",
     "madge": "^5.0.1",
-    "prettier": "^2.2.1",
+    "prettier": "^2.5.1",
     "react": "17.0.2",
-    "react-native": "0.67.2",
+    "react-native": "0.68.0",
     "react-native-codegen": "^0.0.7",
     "react-native-gesture-handler": "^1.6.1",
     "react-test-renderer": "17.0.2",

package/plugin.js

@@ -30,7 +30,9 @@ const objectHooks = new Set([
 const globals = new Set([
   'this',
   'console',
+  'performance',
   '_setGlobalConsole',
+  '_chronoNow',
   'Date',
   'Array',
   'ArrayBuffer',
@@ -85,6 +87,7 @@ const blacklistedFunctions = new Set([
   'toString',
   'map',
   'filter',
+  'findIndex',
   'forEach',
   'valueOf',
   'toPrecision',

package/react-native-reanimated.d.ts

@@ -7,8 +7,6 @@ declare module 'react-native-reanimated' {
     ReactNode,
     Component,
     RefObject,
-    ComponentType,
-    ComponentProps,
     FunctionComponent,
   } from 'react';
   import {
@@ -31,7 +29,6 @@ declare module 'react-native-reanimated' {
     NativeScrollEvent,
     NativeSyntheticEvent,
     ColorValue,
-    OpaqueColorValue,
     EasingFunction,
   } from 'react-native';
   import {
@@ -39,16 +36,24 @@ declare module 'react-native-reanimated' {
     PanGestureHandlerGestureEvent,
   } from 'react-native-gesture-handler';
 
-  export {
-    Animation,
-    TimingAnimation,
-    SpringAnimation,
-    DecayAnimation,
-    DelayAnimation,
-    RepeatAnimation,
-    SequenceAnimation,
-    StyleLayoutAnimation,
-  } from './src/reanimated2/animation/index';
+  import('./lib/reanimated2/globals');
+
+  export type TimingAnimation =
+    import('./lib/types/lib/reanimated2/animation/index').TimingAnimation;
+  export type SpringAnimation =
+    import('./lib/types/lib/reanimated2/animation/index').SpringAnimation;
+  export type DecayAnimation =
+    import('./lib/types/lib/reanimated2/animation/index').DecayAnimation;
+  export type DelayAnimation =
+    import('./lib/types/lib/reanimated2/animation/commonTypes').DelayAnimation;
+  export type RepeatAnimation =
+    import('./lib/types/lib/reanimated2/animation/index').RepeatAnimation;
+  export type SequenceAnimation =
+    import('./lib/types/lib/reanimated2/animation/index').SequenceAnimation;
+  export type StyleLayoutAnimation =
+    import('./lib/types/lib/reanimated2/animation/index').StyleLayoutAnimation;
+  export type Animation<T> =
+    import('./lib/types/lib/reanimated2/commonTypes').Animation<T>;
 
   namespace Animated {
     type Nullable<T> = T | null | undefined;
@@ -146,10 +151,14 @@ declare module 'react-native-reanimated' {
               >;
     };
 
+    export type StylesOrDefault<T> = 'style' extends keyof T
+      ? T['style']
+      : Record<string, unknown>;
+
     export type AnimateProps<P extends object> = {
-      [K in keyof P]: K extends 'style'
-        ? StyleProp<AnimateStyle<P[K]>>
-        : P[K] | AnimatedNode<P[K]>;
+      [K in keyof P]: P[K] | AnimatedNode<P[K]>;
+    } & {
+      style?: StyleProp<AnimateStyle<StylesOrDefault<P>>>;
     } & {
       animatedProps?: Partial<AnimateProps<P>>;
       layout?:
@@ -390,16 +399,16 @@ declare module 'react-native-reanimated' {
       value: Adaptable<number>,
       config: InterpolationConfig
     ): AnimatedNode<number>;
-    export function interpolateColors(
+    export function interpolateColors<T extends string | number>(
       animationValue: Adaptable<number>,
       {
         inputRange,
         outputColorRange,
       }: {
         inputRange: ReadonlyArray<Adaptable<number>>;
-        outputColorRange: ReadonlyArray<Adaptable<number | string>>;
+        outputColorRange: ReadonlyArray<Adaptable<T>>;
       }
-    ): AnimatedNode<number | string>;
+    ): AnimatedNode<T>;
     export const max: BinaryOperator;
     export const min: BinaryOperator;
 
@@ -477,6 +486,23 @@ declare module 'react-native-reanimated' {
     targetGlobalOriginY: number;
   }
 
+  export enum SensorType {
+    ACCELEROMETER = 1,
+    GYROSCOPE = 2,
+    GRAVITY = 3,
+    MAGNETIC_FIELD = 4,
+    ROTATION = 5,
+  }
+
+  export type SensorConfig = {
+    interval: number;
+  };
+
+  export function useAnimatedSensor(
+    sensorType: SensorType,
+    userConfig?: SensorConfig
+  );
+
   export interface ExitAnimationsValues {
     currentOriginX: number;
     currentOriginY: number;
@@ -553,9 +579,10 @@ declare module 'react-native-reanimated' {
     finished?: boolean,
     current?: AnimatableValue
   ) => void;
+  export type EasingFunctionFactory = { factory: () => EasingFunction };
   export interface WithTimingConfig {
     duration?: number;
-    easing?: EasingFunction;
+    easing?: EasingFunction | EasingFunctionFactory;
   }
   export interface WithDecayConfig {
     deceleration?: number;
@@ -572,29 +599,29 @@ declare module 'react-native-reanimated' {
     restDisplacementThreshold?: number;
     velocity?: number;
   }
-  export function withTiming(
-    toValue: AnimatableValue,
+  export function withTiming<T extends AnimatableValue>(
+    toValue: T,
     userConfig?: WithTimingConfig,
     callback?: AnimationCallback
-  ): number;
-  export function withSpring(
-    toValue: AnimatableValue,
+  ): T;
+  export function withSpring<T extends AnimatableValue>(
+    toValue: T,
     userConfig?: WithSpringConfig,
     callback?: AnimationCallback
-  ): number;
+  ): T;
   export function withDecay(
     userConfig: WithDecayConfig,
     callback?: AnimationCallback
   ): number;
   export function cancelAnimation<T>(sharedValue: SharedValue<T>): void;
-  export function withDelay(delayMS: number, delayedAnimation: number): number;
-  export function withRepeat(
-    animation: number,
+  export function withDelay<T extends AnimatableValue>(delayMS: number, delayedAnimation: T): T;
+  export function withRepeat<T extends AnimatableValue>(
+    animation: T,
     numberOfReps?: number,
     reverse?: boolean,
     callback?: AnimationCallback
-  ): number;
-  export function withSequence(...animations: [number, ...number[]]): number;
+  ): T;
+  export function withSequence<T extends AnimatableValue>(...animations: [T, ...T[]]): T;
 
   // reanimated2 functions
   export function runOnUI<A extends any[], R>(
@@ -615,12 +642,12 @@ declare module 'react-native-reanimated' {
     fn: (...args: A) => R
   ): (...args: Parameters<typeof fn>) => R;
 
-  export function interpolateColor(
+  export function interpolateColor<T extends string | number>(
     value: number,
     inputRange: readonly number[],
-    outputRange: readonly (string | number)[],
+    outputRange: readonly T[],
     colorSpace?: 'RGB' | 'HSV'
-  ): string | number;
+  ): T;
 
   export enum ColorSpace {
     RGB = 0,
@@ -825,6 +852,9 @@ declare module 'react-native-reanimated' {
       callback: (finished: boolean) => void
     ): ComplexAnimationBuilder;
 
+    static withInitialValues(values: StyleProps): BaseAnimationBuilder;
+    withInitialValues(values: StyleProps): BaseAnimationBuilder;
+
     static easing(easingFunction: EasingFunction): ComplexAnimationBuilder;
     easing(easingFunction: EasingFunction): ComplexAnimationBuilder;
     static springify(): ComplexAnimationBuilder;

package/src/ConfigHelper.ts

@@ -1,4 +1,4 @@
-import ReanimatedModule from './ReanimatedModule';
+import { configureProps as jsiConfigureProps } from './reanimated2/core';
 
 /**
  * Styles allowed to be direcly updated in UI thread
@@ -107,9 +107,9 @@ let NATIVE_THREAD_PROPS_WHITELIST: Record<string, boolean> = {
 };
 
 function configureProps(): void {
-  ReanimatedModule.configureProps(
-    Object.keys(NATIVE_THREAD_PROPS_WHITELIST),
-    Object.keys(UI_THREAD_PROPS_WHITELIST)
+  jsiConfigureProps(
+    Object.keys(UI_THREAD_PROPS_WHITELIST),
+    Object.keys(NATIVE_THREAD_PROPS_WHITELIST)
   );
 }
 

package/src/createAnimatedComponent.tsx

@@ -161,7 +161,7 @@ interface ComponentRef extends Component {
   getScrollableNode?: () => ComponentRef;
 }
 
-interface InitialComponentProps extends Record<string, unknown> {
+export interface InitialComponentProps extends Record<string, unknown> {
   ref?: Ref<Component>;
   collapsable?: boolean;
 }
@@ -194,6 +194,7 @@ export default function createAnimatedComponent(
     _viewTag = -1;
     _isFirstRender = true;
     animatedStyle: { value: StyleProps } = { value: {} };
+    initialStyle = {};
     sv: SharedValue<null | Record<string, unknown>> | null;
     _propsAnimated?: PropsAnimated;
     _component: ComponentRef | null = null;
@@ -606,13 +607,12 @@ export default function createAnimatedComponent(
               // this is how we recognize styles returned by useAnimatedStyle
               style.viewsRef.add(this);
               if (this._isFirstRender) {
-                return {
+                this.initialStyle = {
                   ...style.initial.value,
                   ...initialUpdaterRun<StyleProps>(style.initial.updater),
                 };
-              } else {
-                return style.initial.value;
               }
+              return this.initialStyle;
             } else {
               return style;
             }

package/src/reanimated1/core/AnimatedFunction.js

@@ -37,7 +37,7 @@ export function createAnimatedFunction(cb) {
   for (let i = 0; i < params.length; i++) {
     params[i] = createAnimatedParam();
   }
-  // eslint-disable-next-line standard/no-callback-literal
+  // eslint-disable-next-line node/no-callback-literal
   const what = cb(...params);
   const func = new AnimatedFunction(what, ...params);
   return (...args) => {

package/src/reanimated1/derived/interpolate.js

@@ -128,15 +128,13 @@ export default function interpolate(value, config) {
   const right = extrapolateRight || extrapolate;
   let output = interpolateInternal(value, inputRange, outputRange);
 
-  if (left === Extrapolate.EXTEND) {
-  } else if (left === Extrapolate.CLAMP) {
+  if (left === Extrapolate.CLAMP) {
     output = cond(lessThan(value, inputRange[0]), outputRange[0], output);
   } else if (left === Extrapolate.IDENTITY) {
     output = cond(lessThan(value, inputRange[0]), value, output);
   }
 
-  if (right === Extrapolate.EXTEND) {
-  } else if (right === Extrapolate.CLAMP) {
+  if (right === Extrapolate.CLAMP) {
     output = cond(
       greaterThan(value, inputRange[inputRange.length - 1]),
       outputRange[outputRange.length - 1],

package/src/reanimated2/Colors.ts

@@ -64,7 +64,8 @@ function getMatchers(): Matchers {
       'hsla' + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER)
     );
     cachedMatchers.hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
-    cachedMatchers.hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+    cachedMatchers.hex4 =
+      /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
     cachedMatchers.hex6 = /^#([0-9a-fA-F]{6})$/;
     cachedMatchers.hex8 = /^#([0-9a-fA-F]{8})$/;
   }

package/src/reanimated2/NativeReanimated/NativeReanimated.ts

@@ -1,31 +1,54 @@
-import { SharedValue } from '../commonTypes';
+import { NativeModules } from 'react-native';
+import {
+  SharedValue,
+  SensorValue3D,
+  SensorValueRotation,
+} from '../commonTypes';
 import { Descriptor } from '../hook/commonTypes';
 
-const InnerNativeModule = global.__reanimatedModuleProxy;
-
 export class NativeReanimated {
   native: boolean;
-  useOnlyV1: boolean;
+  private InnerNativeModule: any;
 
   constructor(native = true) {
+    if (global.__reanimatedModuleProxy === undefined) {
+      const { ReanimatedModule } = NativeModules;
+      ReanimatedModule?.installTurboModule();
+    }
+    this.InnerNativeModule = global.__reanimatedModuleProxy;
     this.native = native;
-    this.useOnlyV1 = InnerNativeModule === null;
   }
 
   installCoreFunctions(valueSetter: <T>(value: T) => void): void {
-    return InnerNativeModule.installCoreFunctions(valueSetter);
+    return this.InnerNativeModule.installCoreFunctions(valueSetter);
   }
 
   makeShareable<T>(value: T): T {
-    return InnerNativeModule.makeShareable(value);
+    return this.InnerNativeModule.makeShareable(value);
   }
 
   makeMutable<T>(value: T): SharedValue<T> {
-    return InnerNativeModule.makeMutable(value);
+    return this.InnerNativeModule.makeMutable(value);
   }
 
   makeRemote<T>(object = {}): T {
-    return InnerNativeModule.makeRemote(object);
+    return this.InnerNativeModule.makeRemote(object);
+  }
+
+  registerSensor(
+    sensorType: number,
+    interval: number,
+    sensorData: SensorValue3D | SensorValueRotation
+  ) {
+    return this.InnerNativeModule.registerSensor(
+      sensorType,
+      interval,
+      sensorData
+    );
+  }
+
+  unregisterSensor(sensorId: number) {
+    return this.InnerNativeModule.unregisterSensor(sensorId);
   }
 
   startMapper(
@@ -35,7 +58,7 @@ export class NativeReanimated {
     updater: () => void,
     viewDescriptors: Descriptor[] | SharedValue<Descriptor[]>
   ): number {
-    return InnerNativeModule.startMapper(
+    return this.InnerNativeModule.startMapper(
       mapper,
       inputs,
       outputs,
@@ -45,18 +68,18 @@ export class NativeReanimated {
   }
 
   stopMapper(mapperId: number): void {
-    return InnerNativeModule.stopMapper(mapperId);
+    return this.InnerNativeModule.stopMapper(mapperId);
   }
 
   registerEventHandler<T>(
     eventHash: string,
     eventHandler: (event: T) => void
   ): string {
-    return InnerNativeModule.registerEventHandler(eventHash, eventHandler);
+    return this.InnerNativeModule.registerEventHandler(eventHash, eventHandler);
   }
 
   unregisterEventHandler(id: string): void {
-    return InnerNativeModule.unregisterEventHandler(id);
+    return this.InnerNativeModule.unregisterEventHandler(id);
   }
 
   getViewProp<T>(
@@ -64,10 +87,14 @@ export class NativeReanimated {
     propName: string,
     callback?: (result: T) => void
   ): Promise<T> {
-    return InnerNativeModule.getViewProp(viewTag, propName, callback);
+    return this.InnerNativeModule.getViewProp(viewTag, propName, callback);
   }
 
   enableLayoutAnimations(flag: boolean): void {
-    InnerNativeModule.enableLayoutAnimations(flag);
+    this.InnerNativeModule.enableLayoutAnimations(flag);
+  }
+
+  configureProps(uiProps: string[], nativeProps: string[]): void {
+    this.InnerNativeModule.configureProps(uiProps, nativeProps);
   }
 }

package/src/reanimated2/NativeReanimated/index.ts

@@ -1,6 +1,5 @@
 import reanimatedJS from '../js-reanimated';
 import { shouldBeUseWeb } from '../PlatformChecker';
-import { Platform } from 'react-native';
 import { NativeReanimated } from './NativeReanimated';
 
 let exportedModule;
@@ -8,11 +7,6 @@ if (shouldBeUseWeb()) {
   exportedModule = reanimatedJS;
 } else {
   exportedModule = new NativeReanimated();
-  if (exportedModule.useOnlyV1 && Platform.OS === 'android') {
-    console.warn(
-      `If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/installation`
-    );
-  }
 }
 
 export default exportedModule as NativeReanimated;

package/src/reanimated2/ViewDescriptorsSet.ts

@@ -2,7 +2,7 @@ import { useRef } from 'react';
 import { makeMutable } from './core';
 import { SharedValue } from './commonTypes';
 import { Descriptor } from './hook/commonTypes';
-import { Platform } from 'react-native';
+import { shouldBeUseWeb } from './PlatformChecker';
 
 export interface ViewRefSet<T> {
   items: Set<T>;
@@ -24,8 +24,7 @@ export interface ViewDescriptorsSet {
   ) => void;
 }
 
-const scheduleUpdates =
-  Platform.OS === 'web' ? requestAnimationFrame : setImmediate;
+const scheduleUpdates = shouldBeUseWeb() ? requestAnimationFrame : setImmediate;
 
 export function makeViewDescriptorsSet(): ViewDescriptorsSet {
   const ref = useRef<ViewDescriptorsSet | null>(null);

package/src/reanimated2/animation/index.ts

@@ -1,6 +1,7 @@
 export {
   HigherOrderAnimation,
   NextAnimation,
+  DelayAnimation,
   RepeatAnimation,
   SequenceAnimation,
   StyleLayoutAnimation,

package/src/reanimated2/animation/styleAnimation.ts

@@ -57,9 +57,8 @@ export function setPath<T>(
     currObj = currObj[keys[i]];
   }
 
-  (currObj as { [key: string]: NestedObjectValues<T> })[
-    keys[keys.length - 1]
-  ] = value;
+  (currObj as { [key: string]: NestedObjectValues<T> })[keys[keys.length - 1]] =
+    value;
 }
 
 interface NestedObjectEntry<T> {
@@ -83,7 +82,8 @@ export function withStyleAnimation(
         { value: animation.styleAnimations, path: [] },
       ];
       while (entriesToCheck.length > 0) {
-        const currentEntry: NestedObjectEntry<AnimationObject> = entriesToCheck.pop() as NestedObjectEntry<AnimationObject>;
+        const currentEntry: NestedObjectEntry<AnimationObject> =
+          entriesToCheck.pop() as NestedObjectEntry<AnimationObject>;
         if (Array.isArray(currentEntry.value)) {
           for (let index = 0; index < currentEntry.value.length; index++) {
             entriesToCheck.push({
@@ -103,7 +103,8 @@ export function withStyleAnimation(
             });
           }
         } else {
-          const currentStyleAnimation: AnimationObject = currentEntry.value as AnimationObject;
+          const currentStyleAnimation: AnimationObject =
+            currentEntry.value as AnimationObject;
           if (currentStyleAnimation.finished) {
             continue;
           }
@@ -211,7 +212,8 @@ export function withStyleAnimation(
           styleAnimations,
         ];
         while (animationsToCheck.length > 0) {
-          const currentAnimation: NestedObjectValues<AnimationObject> = animationsToCheck.pop() as NestedObjectValues<AnimationObject>;
+          const currentAnimation: NestedObjectValues<AnimationObject> =
+            animationsToCheck.pop() as NestedObjectValues<AnimationObject>;
           if (Array.isArray(currentAnimation)) {
             for (const element of currentAnimation) {
               animationsToCheck.push(element);
@@ -224,7 +226,8 @@ export function withStyleAnimation(
               animationsToCheck.push(value);
             }
           } else {
-            const currentStyleAnimation: AnimationObject = currentAnimation as AnimationObject;
+            const currentStyleAnimation: AnimationObject =
+              currentAnimation as AnimationObject;
             if (
               !currentStyleAnimation.finished &&
               currentStyleAnimation.callback

package/src/reanimated2/animation/timing.ts

@@ -80,7 +80,9 @@ export function withTiming(
         // new timing over the old one with the same parameters. If so, we want
         // to copy animation timeline properties
         animation.startTime = (previousAnimation as TimingAnimation).startTime;
-        animation.startValue = (previousAnimation as TimingAnimation).startValue;
+        animation.startValue = (
+          previousAnimation as TimingAnimation
+        ).startValue;
       } else {
         animation.startTime = now;
         animation.startValue = value;