react-native-reanimated 2.4.1 → 2.5.0

package/lib/reanimated2/layoutReanimation/defaultAnimations/Zoom.js

@@ -9,15 +9,14 @@ export class ZoomIn extends ComplexAnimationBuilder {
             const [animation, config] = this.getAnimationAndConfig();
             const delay = this.getDelay();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
                     animations: {
                         transform: [{ scale: delayFunction(delay, animation(1, config)) }],
                     },
-                    initialValues: {
-                        transform: [{ scale: 0 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ scale: 0 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -36,6 +35,7 @@ export class ZoomInRotate extends ComplexAnimationBuilder {
             const delay = this.getDelay();
             const rotate = this.rotateV ? this.rotateV : '0.3';
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -45,9 +45,7 @@ export class ZoomInRotate extends ComplexAnimationBuilder {
                             { rotate: delayFunction(delay, animation(0, config)) },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ scale: 0 }, { rotate: rotate }],
-                    },
+                    initialValues: Object.assign({ transform: [{ scale: 0 }, { rotate: rotate }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -65,6 +63,7 @@ export class ZoomInLeft extends ComplexAnimationBuilder {
             const [animation, config] = this.getAnimationAndConfig();
             const delay = this.getDelay();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -74,9 +73,7 @@ export class ZoomInLeft extends ComplexAnimationBuilder {
                             { scale: delayFunction(delay, animation(1, config)) },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ translateX: -width }, { scale: 0 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ translateX: -width }, { scale: 0 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -94,6 +91,7 @@ export class ZoomInRight extends ComplexAnimationBuilder {
             const [animation, config] = this.getAnimationAndConfig();
             const delay = this.getDelay();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -103,9 +101,7 @@ export class ZoomInRight extends ComplexAnimationBuilder {
                             { scale: delayFunction(delay, animation(1, config)) },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ translateX: width }, { scale: 0 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ translateX: width }, { scale: 0 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -123,6 +119,7 @@ export class ZoomInUp extends ComplexAnimationBuilder {
             const [animation, config] = this.getAnimationAndConfig();
             const delay = this.getDelay();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -132,9 +129,7 @@ export class ZoomInUp extends ComplexAnimationBuilder {
                             { scale: delayFunction(delay, animation(1, config)) },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ translateY: -height }, { scale: 0 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ translateY: -height }, { scale: 0 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -152,6 +147,7 @@ export class ZoomInDown extends ComplexAnimationBuilder {
             const [animation, config] = this.getAnimationAndConfig();
             const delay = this.getDelay();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -161,9 +157,7 @@ export class ZoomInDown extends ComplexAnimationBuilder {
                             { scale: delayFunction(delay, animation(1, config)) },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ translateY: height }, { scale: 0 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ translateY: height }, { scale: 0 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -181,6 +175,7 @@ export class ZoomInEasyUp extends ComplexAnimationBuilder {
             const [animation, config] = this.getAnimationAndConfig();
             const delay = this.getDelay();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return (values) => {
                 'worklet';
                 return {
@@ -190,9 +185,7 @@ export class ZoomInEasyUp extends ComplexAnimationBuilder {
                             { scale: delayFunction(delay, animation(1, config)) },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ translateY: -values.targetHeight }, { scale: 0 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ translateY: -values.targetHeight }, { scale: 0 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -210,6 +203,7 @@ export class ZoomInEasyDown extends ComplexAnimationBuilder {
             const [animation, config] = this.getAnimationAndConfig();
             const delay = this.getDelay();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return (values) => {
                 'worklet';
                 return {
@@ -219,9 +213,7 @@ export class ZoomInEasyDown extends ComplexAnimationBuilder {
                             { scale: delayFunction(delay, animation(1, config)) },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ translateY: values.targetHeight }, { scale: 0 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ translateY: values.targetHeight }, { scale: 0 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -239,15 +231,14 @@ export class ZoomOut extends ComplexAnimationBuilder {
             const [animation, config] = this.getAnimationAndConfig();
             const delay = this.getDelay();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
                     animations: {
                         transform: [{ scale: delayFunction(delay, animation(0, config)) }],
                     },
-                    initialValues: {
-                        transform: [{ scale: 1 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ scale: 1 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -266,6 +257,7 @@ export class ZoomOutRotate extends ComplexAnimationBuilder {
             const delay = this.getDelay();
             const rotate = this.rotateV ? this.rotateV : '0.3';
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -275,9 +267,7 @@ export class ZoomOutRotate extends ComplexAnimationBuilder {
                             { rotate: delayFunction(delay, animation(rotate, config)) },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ scale: 1 }, { rotate: '0' }],
-                    },
+                    initialValues: Object.assign({ transform: [{ scale: 1 }, { rotate: '0' }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -295,6 +285,7 @@ export class ZoomOutLeft extends ComplexAnimationBuilder {
             const [animation, config] = this.getAnimationAndConfig();
             const delay = this.getDelay();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -304,9 +295,7 @@ export class ZoomOutLeft extends ComplexAnimationBuilder {
                             { scale: delayFunction(delay, animation(0, config)) },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ translateX: 0 }, { scale: 1 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ translateX: 0 }, { scale: 1 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -324,6 +313,7 @@ export class ZoomOutRight extends ComplexAnimationBuilder {
             const [animation, config] = this.getAnimationAndConfig();
             const delay = this.getDelay();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -333,9 +323,7 @@ export class ZoomOutRight extends ComplexAnimationBuilder {
                             { scale: delayFunction(delay, animation(0, config)) },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ translateX: 0 }, { scale: 1 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ translateX: 0 }, { scale: 1 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -353,6 +341,7 @@ export class ZoomOutUp extends ComplexAnimationBuilder {
             const [animation, config] = this.getAnimationAndConfig();
             const delay = this.getDelay();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -362,9 +351,7 @@ export class ZoomOutUp extends ComplexAnimationBuilder {
                             { scale: delayFunction(delay, animation(0, config)) },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ translateY: 0 }, { scale: 1 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ translateY: 0 }, { scale: 1 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -382,6 +369,7 @@ export class ZoomOutDown extends ComplexAnimationBuilder {
             const [animation, config] = this.getAnimationAndConfig();
             const delay = this.getDelay();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return () => {
                 'worklet';
                 return {
@@ -391,9 +379,7 @@ export class ZoomOutDown extends ComplexAnimationBuilder {
                             { scale: delayFunction(delay, animation(0, config)) },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ translateY: 0 }, { scale: 1 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ translateY: 0 }, { scale: 1 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -411,6 +397,7 @@ export class ZoomOutEasyUp extends ComplexAnimationBuilder {
             const [animation, config] = this.getAnimationAndConfig();
             const delay = this.getDelay();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return (values) => {
                 'worklet';
                 return {
@@ -422,9 +409,7 @@ export class ZoomOutEasyUp extends ComplexAnimationBuilder {
                             { scale: delayFunction(delay, animation(0, config)) },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ translateY: 0 }, { scale: 1 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ translateY: 0 }, { scale: 1 }] }, initialValues),
                     callback: callback,
                 };
             };
@@ -442,6 +427,7 @@ export class ZoomOutEasyDown extends ComplexAnimationBuilder {
             const [animation, config] = this.getAnimationAndConfig();
             const delay = this.getDelay();
             const callback = this.callbackV;
+            const initialValues = this.initialValues;
             return (values) => {
                 'worklet';
                 return {
@@ -453,9 +439,7 @@ export class ZoomOutEasyDown extends ComplexAnimationBuilder {
                             { scale: delayFunction(delay, animation(0, config)) },
                         ],
                     },
-                    initialValues: {
-                        transform: [{ translateY: 0 }, { scale: 1 }],
-                    },
+                    initialValues: Object.assign({ transform: [{ translateY: 0 }, { scale: 1 }] }, initialValues),
                     callback: callback,
                 };
             };

package/lib/reanimated2/layoutReanimation/defaultTransitions/EntryExitTransition.js

@@ -74,24 +74,28 @@ export class EntryExitTransition extends BaseAnimationBuilder {
                     }
                 }
                 const mergedTransform = ((_c = exitingValues.initialValues.transform) !== null && _c !== void 0 ? _c : []).concat(((_d = enteringValues.animations.transform) !== null && _d !== void 0 ? _d : []).map((value) => {
-                    for (const transformProp of Object.keys(value)) {
-                        const current = value[transformProp].current;
-                        if (typeof current === 'string') {
-                            if (current.includes('deg'))
-                                return {
-                                    [transformProp]: '0deg',
-                                };
-                            else
-                                return {
-                                    [transformProp]: '0',
-                                };
-                        }
-                        else if (transformProp.includes('translate')) {
-                            return { [transformProp]: 0 };
-                        }
-                        else {
-                            return { [transformProp]: 1 };
-                        }
+                    const objectKeys = Object.keys(value);
+                    if ((objectKeys === null || objectKeys === void 0 ? void 0 : objectKeys.length) < 1) {
+                        console.error(`[Reanimated]: \${value} is not a valid Transform object`);
+                        return value;
+                    }
+                    const transformProp = objectKeys[0];
+                    const current = value[transformProp].current;
+                    if (typeof current === 'string') {
+                        if (current.includes('deg'))
+                            return {
+                                [transformProp]: '0deg',
+                            };
+                        else
+                            return {
+                                [transformProp]: '0',
+                            };
+                    }
+                    else if (transformProp.includes('translate')) {
+                        return { [transformProp]: 0 };
+                    }
+                    else {
+                        return { [transformProp]: 1 };
                     }
                     return value;
                 }));

package/lib/reanimated2/mock.js

@@ -1,5 +1,5 @@
 "use strict";
-/* eslint-disable standard/no-callback-literal */
+/* eslint-disable node/no-callback-literal */
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 const NOOP = () => {
@@ -58,7 +58,8 @@ const ReanimatedV2 = {
         elastic: ID,
         back: ID,
         bounce: ID,
-        bezier: ID,
+        bezier: () => ({ factory: ID }),
+        bezierFn: ID,
         in: ID,
         out: ID,
         inOut: ID,

package/mock.js

@@ -28,7 +28,7 @@ function simulateCallbackFactory(...params) {
     callback &&
       setTimeout(() => {
         // user defined callback
-        // eslint-disable-next-line standard/no-callback-literal
+        // eslint-disable-next-line node/no-callback-literal
         callback(...params);
       }, 0);
   };
@@ -73,9 +73,9 @@ function createMockComponent(name) {
 
 function createTransitioningComponent(Component) {
   return class extends React.Component {
-    static displayName = `Transitioning.${Component.displayName ||
-      Component.name ||
-      'Component'}`;
+    static displayName = `Transitioning.${
+      Component.displayName || Component.name || 'Component'
+    }`;
 
     setNativeProps() {
       // noop

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.4.1",
+  "version": "2.5.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,20 @@
     "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: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:tsc": "yarn tsc",
     "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 +42,6 @@
     "Common/",
     "src/",
     "lib/",
-    "libSo/",
     "android/src/main/AndroidManifest.xml",
     "android/src/main/java/",
     "android/build.gradle",
@@ -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-rc.2",
     "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',

package/react-native-reanimated.d.ts

@@ -39,16 +39,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('./src/reanimated2/globals');
+
+  export type TimingAnimation =
+    import('./src/reanimated2/animation/index').TimingAnimation;
+  export type SpringAnimation =
+    import('./src/reanimated2/animation/index').SpringAnimation;
+  export type DecayAnimation =
+    import('./src/reanimated2/animation/index').DecayAnimation;
+  export type DelayAnimation =
+    import('./src/reanimated2/animation/commonTypes').DelayAnimation;
+  export type RepeatAnimation =
+    import('./src/reanimated2/animation/index').RepeatAnimation;
+  export type SequenceAnimation =
+    import('./src/reanimated2/animation/index').SequenceAnimation;
+  export type StyleLayoutAnimation =
+    import('./src/reanimated2/animation/index').StyleLayoutAnimation;
+  export type Animation<T> =
+    import('./src/reanimated2/commonTypes').Animation<T>;
 
   namespace Animated {
     type Nullable<T> = T | null | undefined;
@@ -150,7 +158,7 @@ declare module 'react-native-reanimated' {
       ? T['style']
       : Record<string, unknown>;
 
-    export type AnimateProps<P extends Record<string, unknown>> = {
+    export type AnimateProps<P extends object> = {
       [K in keyof P]: P[K] | AnimatedNode<P[K]>;
     } & {
       style?: StyleProp<AnimateStyle<StylesOrDefault<P>>>;
@@ -481,6 +489,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;
@@ -557,9 +582,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;
@@ -829,6 +855,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

@@ -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) => {