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

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

@@ -22,8 +22,8 @@ export class RotateInDownLeft extends ComplexAnimationBuilder {
                         opacity: 0,
                         transform: [
                             { rotate: '-90deg' },
-                            { translateX: values.width / 2 - values.height / 2 },
-                            { translateY: -(values.width / 2 - values.height / 2) },
+                            { translateX: values.targetWidth / 2 - values.targetHeight / 2 },
+                            { translateY: -(values.targetWidth / 2 - values.targetHeight / 2) },
                         ],
                     },
                     callback: callback,
@@ -58,8 +58,8 @@ export class RotateInDownRight extends ComplexAnimationBuilder {
                         opacity: 0,
                         transform: [
                             { rotate: '90deg' },
-                            { translateX: -(values.width / 2 - values.height / 2) },
-                            { translateY: -(values.width / 2 - values.height / 2) },
+                            { translateX: -(values.targetWidth / 2 - values.targetHeight / 2) },
+                            { translateY: -(values.targetWidth / 2 - values.targetHeight / 2) },
                         ],
                     },
                     callback: callback,
@@ -94,8 +94,8 @@ export class RotateInUpLeft extends ComplexAnimationBuilder {
                         opacity: 0,
                         transform: [
                             { rotate: '90deg' },
-                            { translateX: values.width / 2 - values.height / 2 },
-                            { translateY: values.width / 2 - values.height / 2 },
+                            { translateX: values.targetWidth / 2 - values.targetHeight / 2 },
+                            { translateY: values.targetWidth / 2 - values.targetHeight / 2 },
                         ],
                     },
                     callback: callback,
@@ -130,8 +130,8 @@ export class RotateInUpRight extends ComplexAnimationBuilder {
                         opacity: 0,
                         transform: [
                             { rotate: '-90deg' },
-                            { translateX: -(values.width / 2 - values.height / 2) },
-                            { translateY: values.width / 2 - values.height / 2 },
+                            { translateX: -(values.targetWidth / 2 - values.targetHeight / 2) },
+                            { translateY: values.targetWidth / 2 - values.targetHeight / 2 },
                         ],
                     },
                     callback: callback,
@@ -159,10 +159,10 @@ export class RotateOutDownLeft extends ComplexAnimationBuilder {
                         transform: [
                             { rotate: delayFunction(delay, animation('90deg', config)) },
                             {
-                                translateX: delayFunction(delay, animation(values.width / 2 - values.height / 2, config)),
+                                translateX: delayFunction(delay, animation(values.currentWidth / 2 - values.currentHeight / 2, config)),
                             },
                             {
-                                translateY: delayFunction(delay, animation(values.width / 2 - values.height / 2, config)),
+                                translateY: delayFunction(delay, animation(values.currentWidth / 2 - values.currentHeight / 2, config)),
                             },
                         ],
                     },
@@ -195,10 +195,10 @@ export class RotateOutDownRight extends ComplexAnimationBuilder {
                         transform: [
                             { rotate: delayFunction(delay, animation('-90deg', config)) },
                             {
-                                translateX: delayFunction(delay, animation(-(values.width / 2 - values.height / 2), config)),
+                                translateX: delayFunction(delay, animation(-(values.currentWidth / 2 - values.currentHeight / 2), config)),
                             },
                             {
-                                translateY: delayFunction(delay, animation(values.width / 2 - values.height / 2, config)),
+                                translateY: delayFunction(delay, animation(values.currentWidth / 2 - values.currentHeight / 2, config)),
                             },
                         ],
                     },
@@ -231,10 +231,10 @@ export class RotateOutUpLeft extends ComplexAnimationBuilder {
                         transform: [
                             { rotate: delayFunction(delay, animation('-90deg', config)) },
                             {
-                                translateX: delayFunction(delay, animation(values.width / 2 - values.height / 2, config)),
+                                translateX: delayFunction(delay, animation(values.currentWidth / 2 - values.currentHeight / 2, config)),
                             },
                             {
-                                translateY: delayFunction(delay, animation(-(values.width / 2 - values.height / 2), config)),
+                                translateY: delayFunction(delay, animation(-(values.currentWidth / 2 - values.currentHeight / 2), config)),
                             },
                         ],
                     },
@@ -267,10 +267,10 @@ export class RotateOutUpRight extends ComplexAnimationBuilder {
                         transform: [
                             { rotate: delayFunction(delay, animation('90deg', config)) },
                             {
-                                translateX: delayFunction(delay, animation(-(values.width / 2 - values.height / 2), config)),
+                                translateX: delayFunction(delay, animation(-(values.currentWidth / 2 - values.currentHeight / 2), config)),
                             },
                             {
-                                translateY: delayFunction(delay, animation(-(values.width / 2 - values.height / 2), config)),
+                                translateY: delayFunction(delay, animation(-(values.currentWidth / 2 - values.currentHeight / 2), config)),
                             },
                         ],
                     },

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

@@ -13,10 +13,10 @@ export class SlideInRight extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originX: delayFunction(delay, animation(values.originX, config)),
+                        originX: delayFunction(delay, animation(values.targetOriginX, config)),
                     },
                     initialValues: {
-                        originX: values.originX + width,
+                        originX: values.targetOriginX + width,
                     },
                     callback: callback,
                 };
@@ -39,10 +39,10 @@ export class SlideInLeft extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originX: delayFunction(delay, animation(values.originX, config)),
+                        originX: delayFunction(delay, animation(values.targetOriginX, config)),
                     },
                     initialValues: {
-                        originX: values.originX - width,
+                        originX: values.targetOriginX - width,
                     },
                     callback: callback,
                 };
@@ -65,10 +65,10 @@ export class SlideOutRight extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originX: delayFunction(delay, animation(Math.max(values.originX + width, width), config)),
+                        originX: delayFunction(delay, animation(Math.max(values.currentOriginX + width, width), config)),
                     },
                     initialValues: {
-                        originX: values.originX,
+                        originX: values.currentOriginX,
                     },
                     callback: callback,
                 };
@@ -91,10 +91,10 @@ export class SlideOutLeft extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originX: delayFunction(delay, animation(Math.min(values.originX - width, -width), config)),
+                        originX: delayFunction(delay, animation(Math.min(values.currentOriginX - width, -width), config)),
                     },
                     initialValues: {
-                        originX: values.originX,
+                        originX: values.currentOriginX,
                     },
                     callback: callback,
                 };
@@ -117,7 +117,7 @@ export class SlideInUp extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originY: delayFunction(delay, animation(values.originY, config)),
+                        originY: delayFunction(delay, animation(values.targetOriginY, config)),
                     },
                     initialValues: {
                         originY: -height,
@@ -143,10 +143,10 @@ export class SlideInDown extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originY: delayFunction(delay, animation(values.originY, config)),
+                        originY: delayFunction(delay, animation(values.targetOriginY, config)),
                     },
                     initialValues: {
-                        originY: values.originY + height,
+                        originY: values.targetOriginY + height,
                     },
                     callback: callback,
                 };
@@ -169,9 +169,9 @@ export class SlideOutUp extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originY: delayFunction(delay, animation(Math.min(values.originY - height, -height), config)),
+                        originY: delayFunction(delay, animation(Math.min(values.currentOriginY - height, -height), config)),
                     },
-                    initialValues: { originY: values.originY },
+                    initialValues: { originY: values.currentOriginY },
                     callback: callback,
                 };
             };
@@ -193,9 +193,9 @@ export class SlideOutDown extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     animations: {
-                        originY: delayFunction(delay, animation(Math.max(values.originY + height, height), config)),
+                        originY: delayFunction(delay, animation(Math.max(values.currentOriginY + height, height), config)),
                     },
-                    initialValues: { originY: values.originY },
+                    initialValues: { originY: values.currentOriginY },
                     callback: callback,
                 };
             };

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

@@ -191,7 +191,7 @@ export class ZoomInEasyUp extends ComplexAnimationBuilder {
                         ],
                     },
                     initialValues: {
-                        transform: [{ translateY: -values.height }, { scale: 0 }],
+                        transform: [{ translateY: -values.targetHeight }, { scale: 0 }],
                     },
                     callback: callback,
                 };
@@ -220,7 +220,7 @@ export class ZoomInEasyDown extends ComplexAnimationBuilder {
                         ],
                     },
                     initialValues: {
-                        transform: [{ translateY: values.height }, { scale: 0 }],
+                        transform: [{ translateY: values.targetHeight }, { scale: 0 }],
                     },
                     callback: callback,
                 };
@@ -417,7 +417,7 @@ export class ZoomOutEasyUp extends ComplexAnimationBuilder {
                     animations: {
                         transform: [
                             {
-                                translateY: delayFunction(delay, animation(-values.height, config)),
+                                translateY: delayFunction(delay, animation(-values.currentHeight, config)),
                             },
                             { scale: delayFunction(delay, animation(0, config)) },
                         ],
@@ -448,7 +448,7 @@ export class ZoomOutEasyDown extends ComplexAnimationBuilder {
                     animations: {
                         transform: [
                             {
-                                translateY: delayFunction(delay, animation(values.height, config)),
+                                translateY: delayFunction(delay, animation(values.currentHeight, config)),
                             },
                             { scale: delayFunction(delay, animation(0, config)) },
                         ],

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

@@ -24,16 +24,28 @@ export class CurvedTransition extends BaseAnimationBuilder {
                 'worklet';
                 return {
                     initialValues: {
-                        originX: values.boriginX,
-                        originY: values.boriginY,
-                        width: values.bwidth,
-                        height: values.bheight,
+                        originX: values.currentOriginX,
+                        originY: values.currentOriginY,
+                        width: values.currentWidth,
+                        height: values.currentHeight,
                     },
                     animations: {
-                        originX: delayFunction(delay, withTiming(values.originX, { duration, easing: easing.easingX })),
-                        originY: delayFunction(delay, withTiming(values.originY, { duration, easing: easing.easingY })),
-                        width: delayFunction(delay, withTiming(values.width, { duration, easing: easing.easingWidth })),
-                        height: delayFunction(delay, withTiming(values.height, { duration, easing: easing.easingHeight })),
+                        originX: delayFunction(delay, withTiming(values.targetOriginX, {
+                            duration,
+                            easing: easing.easingX,
+                        })),
+                        originY: delayFunction(delay, withTiming(values.targetOriginY, {
+                            duration,
+                            easing: easing.easingY,
+                        })),
+                        width: delayFunction(delay, withTiming(values.targetWidth, {
+                            duration,
+                            easing: easing.easingWidth,
+                        })),
+                        height: delayFunction(delay, withTiming(values.targetHeight, {
+                            duration,
+                            easing: easing.easingHeight,
+                        })),
                     },
                     callback: callback,
                 };

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

@@ -96,8 +96,8 @@ export class EntryExitTransition extends BaseAnimationBuilder {
                     return value;
                 }));
                 return {
-                    initialValues: Object.assign(Object.assign({}, exitingValues.initialValues), { originX: values.boriginX, originY: values.boriginY, width: values.bwidth, height: values.bheight, transform: mergedTransform }),
-                    animations: Object.assign({ originX: delayFunction(delay + exitingDuration, withTiming(values.originX, { duration: exitingDuration })), originY: delayFunction(delay + exitingDuration, withTiming(values.originY, { duration: exitingDuration })), width: delayFunction(delay + exitingDuration, withTiming(values.width, { duration: exitingDuration })), height: delayFunction(delay + exitingDuration, withTiming(values.height, { duration: exitingDuration })) }, animations),
+                    initialValues: Object.assign(Object.assign({}, exitingValues.initialValues), { originX: values.currentOriginX, originY: values.currentOriginY, width: values.currentWidth, height: values.currentHeight, transform: mergedTransform }),
+                    animations: Object.assign({ originX: delayFunction(delay + exitingDuration, withTiming(values.targetOriginX, { duration: exitingDuration })), originY: delayFunction(delay + exitingDuration, withTiming(values.targetOriginY, { duration: exitingDuration })), width: delayFunction(delay + exitingDuration, withTiming(values.targetWidth, { duration: exitingDuration })), height: delayFunction(delay + exitingDuration, withTiming(values.targetHeight, { duration: exitingDuration })) }, animations),
                     callback: callback,
                 };
             };

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

@@ -14,17 +14,17 @@ export class FadingTransition extends BaseAnimationBuilder {
                 return {
                     initialValues: {
                         opacity: 1,
-                        originX: values.boriginX,
-                        originY: values.boriginY,
-                        width: values.bwidth,
-                        height: values.bheight,
+                        originX: values.currentOriginX,
+                        originY: values.currentOriginY,
+                        width: values.currentWidth,
+                        height: values.currentHeight,
                     },
                     animations: {
                         opacity: delayFunction(delay, withSequence(withTiming(0, { duration: duration }), withTiming(1, { duration: duration }))),
-                        originX: delayFunction(delay + duration, withTiming(values.originX, { duration: 50 })),
-                        originY: delayFunction(delay + duration, withTiming(values.originY, { duration: 50 })),
-                        width: delayFunction(delay + duration, withTiming(values.width, { duration: 50 })),
-                        height: delayFunction(delay + duration, withTiming(values.height, { duration: 50 })),
+                        originX: delayFunction(delay + duration, withTiming(values.targetOriginX, { duration: 50 })),
+                        originY: delayFunction(delay + duration, withTiming(values.targetOriginY, { duration: 50 })),
+                        width: delayFunction(delay + duration, withTiming(values.targetWidth, { duration: 50 })),
+                        height: delayFunction(delay + duration, withTiming(values.targetHeight, { duration: 50 })),
                     },
                     callback: callback,
                 };

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

@@ -13,22 +13,22 @@ export class JumpingTransition extends BaseAnimationBuilder {
             const config = { duration: duration * 2 };
             return (values) => {
                 'worklet';
-                const d = Math.max(Math.abs(values.originX - values.boriginX), Math.abs(values.originY - values.boriginY));
+                const d = Math.max(Math.abs(values.targetOriginX - values.currentOriginX), Math.abs(values.targetOriginY - values.currentOriginY));
                 return {
                     initialValues: {
-                        originX: values.boriginX,
-                        originY: values.boriginY,
-                        width: values.bwidth,
-                        height: values.bheight,
+                        originX: values.currentOriginX,
+                        originY: values.currentOriginY,
+                        width: values.currentWidth,
+                        height: values.currentHeight,
                     },
                     animations: {
-                        originX: delayFunction(delay, withTiming(values.originX, config)),
-                        originY: delayFunction(delay, withSequence(withTiming(Math.min(values.originY, values.boriginY) - d, {
+                        originX: delayFunction(delay, withTiming(values.targetOriginX, config)),
+                        originY: delayFunction(delay, withSequence(withTiming(Math.min(values.targetOriginY, values.currentOriginY) - d, {
                             duration,
                             easing: Easing.out(Easing.exp),
-                        }), withTiming(values.originY, Object.assign(Object.assign({}, config), { duration, easing: Easing.bounce })))),
-                        width: delayFunction(delay, withTiming(values.width, config)),
-                        height: delayFunction(delay, withTiming(values.height, config)),
+                        }), withTiming(values.targetOriginY, Object.assign(Object.assign({}, config), { duration, easing: Easing.bounce })))),
+                        width: delayFunction(delay, withTiming(values.targetWidth, config)),
+                        height: delayFunction(delay, withTiming(values.targetHeight, config)),
                     },
                     callback: callback,
                 };

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

@@ -11,16 +11,16 @@ export class LinearTransition extends ComplexAnimationBuilder {
                 'worklet';
                 return {
                     initialValues: {
-                        originX: values.boriginX,
-                        originY: values.boriginY,
-                        width: values.bwidth,
-                        height: values.bheight,
+                        originX: values.currentOriginX,
+                        originY: values.currentOriginY,
+                        width: values.currentWidth,
+                        height: values.currentHeight,
                     },
                     animations: {
-                        originX: delayFunction(delay, animation(values.originX, config)),
-                        originY: delayFunction(delay, animation(values.originY, config)),
-                        width: delayFunction(delay, animation(values.width, config)),
-                        height: delayFunction(delay, animation(values.height, config)),
+                        originX: delayFunction(delay, animation(values.targetOriginX, config)),
+                        originY: delayFunction(delay, animation(values.targetOriginY, config)),
+                        width: delayFunction(delay, animation(values.targetWidth, config)),
+                        height: delayFunction(delay, animation(values.targetHeight, config)),
                     },
                     callback: callback,
                 };

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

@@ -16,16 +16,16 @@ export class SequencedTransition extends BaseAnimationBuilder {
                 'worklet';
                 return {
                     initialValues: {
-                        originX: values.boriginX,
-                        originY: values.boriginY,
-                        width: values.bwidth,
-                        height: values.bheight,
+                        originX: values.currentOriginX,
+                        originY: values.currentOriginY,
+                        width: values.currentWidth,
+                        height: values.currentHeight,
                     },
                     animations: {
-                        originX: delayFunction(delay, withSequence(withTiming(reverse ? values.boriginX : values.originX, config), withTiming(values.originX, config))),
-                        originY: delayFunction(delay, withSequence(withTiming(reverse ? values.originY : values.boriginY, config), withTiming(values.originY, config))),
-                        width: delayFunction(delay, withSequence(withTiming(reverse ? values.bwidth : values.width, config), withTiming(values.width, config))),
-                        height: delayFunction(delay, withSequence(withTiming(reverse ? values.height : values.bheight, config), withTiming(values.height, config))),
+                        originX: delayFunction(delay, withSequence(withTiming(reverse ? values.currentOriginX : values.targetOriginX, config), withTiming(values.targetOriginX, config))),
+                        originY: delayFunction(delay, withSequence(withTiming(reverse ? values.targetOriginY : values.currentOriginY, config), withTiming(values.targetOriginY, config))),
+                        width: delayFunction(delay, withSequence(withTiming(reverse ? values.currentWidth : values.targetWidth, config), withTiming(values.targetWidth, config))),
+                        height: delayFunction(delay, withSequence(withTiming(reverse ? values.targetHeight : values.currentHeight, config), withTiming(values.targetHeight, config))),
                     },
                     callback: callback,
                 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.3.0-beta.4",
+  "version": "2.3.0",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
@@ -48,6 +48,7 @@
     "react-native-reanimated.d.ts",
     "mock.js",
     "plugin.js",
+    "expo-module.config.json",
     "!__snapshots__",
     "!*.test.js",
     "!*.test.js.map"
@@ -115,7 +116,7 @@
     "lint-staged": "^11.2.0",
     "prettier": "^2.2.1",
     "react": "17.0.2",
-    "react-native": "0.67.0-rc.3",
+    "react-native": "0.67.0-rc.4",
     "react-native-codegen": "^0.0.7",
     "react-native-gesture-handler": "^1.6.1",
     "react-test-renderer": "17.0.2",

package/plugin.js

@@ -146,7 +146,7 @@ const gestureHandlerGestureObjects = new Set([
   'LongPress',
   'ForceTouch',
   'Native',
-  'Custom',
+  'Manual',
   'Race',
   'Simultaneous',
   'Exclusive',
@@ -156,6 +156,7 @@ const gestureHandlerBuilderMethods = new Set([
   'onBegin',
   'onStart',
   'onEnd',
+  'onFinalize',
   'onUpdate',
   'onTouchesDown',
   'onTouchesMove',

package/react-native-reanimated.d.ts

@@ -26,6 +26,7 @@ declare module 'react-native-reanimated' {
     Text as ReactNativeText,
     Image as ReactNativeImage,
     ScrollView as ReactNativeScrollView,
+    FlatList as ReactNativeFlatList,
     NativeScrollEvent,
     NativeSyntheticEvent,
     ColorValue,
@@ -256,6 +257,10 @@ declare module 'react-native-reanimated' {
       getNode(): ReactNativeScrollView;
     }
     export class Code extends Component<CodeProps> {}
+    export class FlatList extends Component<AnimateProps<FlatList>> {
+      itemLayoutAnimation: ILayoutAnimationBuilder;
+      getNode(): ReactNativeFlatList;
+    }
 
     type Options<P> = {
       setNativeProps: (ref: any, props: P) => void;
@@ -451,34 +456,45 @@ declare module 'react-native-reanimated' {
     animations: AnimateStyle;
   };
 
-  export type EntryExitAnimationsValues = {
-    originX: number;
-    originY: number;
-    width: number;
-    height: number;
-    globalOriginX: number;
-    globalOriginY: number;
-  };
+  export interface EntryAnimationsValues {
+    targetOriginX: number;
+    targetOriginY: number;
+    targetWidth: number;
+    targetHeight: number;
+    targetGlobalOriginX: number;
+    targetGlobalOriginY: number;
+  }
+
+  export interface ExitAnimationsValues {
+    currentOriginX: number;
+    currentOriginY: number;
+    currentWidth: number;
+    currentHeight: number;
+    currentGlobalOriginX: number;
+    currentGlobalOriginY: number;
+  }
+
   export type EntryExitAnimationFunction = (
-    targetValues: EntryExitAnimationsValues
+    targetValues: EntryAnimationsValues | ExitAnimationsValues
   ) => LayoutAnimation;
 
   export type LayoutAnimationsValues = {
-    originX: number;
-    originY: number;
-    width: number;
-    height: number;
-    globalOriginX: number;
-    globalOriginY: number;
-    boriginX: number;
-    boriginY: number;
-    bwidth: number;
-    bheight: number;
-    bglobalOriginX: number;
-    bglobalOriginY: number;
+    currentOriginX: number;
+    currentOriginY: number;
+    currentWidth: number;
+    currentHeight: number;
+    currentGlobalOriginX: number;
+    currentGlobalOriginY: number;
+    targetOriginX: number;
+    targetOriginY: number;
+    targetWidth: number;
+    targetHeight: number;
+    targetGlobalOriginX: number;
+    targetGlobalOriginY: number;
     windowWidth: number;
     windowHeight: number;
   };
+
   export type LayoutAnimationFunction = (
     targetValues: LayoutAnimationsValues
   ) => LayoutAnimation;

package/src/Animated.js

@@ -1,17 +1,15 @@
-import { Image, ScrollView, Text, View, LogBox } from 'react-native';
+import { LogBox } from 'react-native';
 import createAnimatedComponent from './createAnimatedComponent';
 import {
   addWhitelistedNativeProps,
   addWhitelistedUIProps,
 } from './ConfigHelper';
 import * as reanimated1 from './reanimated1';
+import ReanimatedComponents from './reanimated2/component';
 
 const Animated = {
   // components
-  View: createAnimatedComponent(View),
-  Text: createAnimatedComponent(Text),
-  Image: createAnimatedComponent(Image),
-  ScrollView: createAnimatedComponent(ScrollView),
+  ...ReanimatedComponents,
   createAnimatedComponent,
   // configuration
   addWhitelistedNativeProps,

package/src/createAnimatedComponent.tsx

@@ -36,7 +36,7 @@ import { initialUpdaterRun } from './reanimated2/animation';
 import {
   BaseAnimationBuilder,
   EntryExitAnimationFunction,
-  LayoutAnimationFunction,
+  ILayoutAnimationBuilder,
 } from './reanimated2/layoutReanimation';
 import { SharedValue, StyleProps } from './reanimated2/commonTypes';
 import {
@@ -100,12 +100,17 @@ function onlyAnimatedStyles(styles: StyleProps[]) {
   return styles.filter((style) => style?.viewDescriptors);
 }
 
-function isSameAnimatedStyle(style1: StyleProps, style2: StyleProps): boolean {
+function isSameAnimatedStyle(
+  style1?: StyleProps,
+  style2?: StyleProps
+): boolean {
   // We cannot use equality check to compare useAnimatedStyle outputs directly.
   // Instead, we can compare its viewsRefs.
-  return style1.viewsRef === style2.viewsRef;
+  return style1?.viewsRef === style2?.viewsRef;
 }
 
+const isSameAnimatedProps = isSameAnimatedStyle;
+
 const has = <K extends string>(
   key: K,
   x: unknown
@@ -133,7 +138,7 @@ export type AnimatedComponentProps<P extends Record<string, unknown>> = P & {
   animatedStyle?: StyleProps;
   layout?:
     | BaseAnimationBuilder
-    | LayoutAnimationFunction
+    | ILayoutAnimationBuilder
     | typeof BaseAnimationBuilder;
   entering?:
     | BaseAnimationBuilder
@@ -481,7 +486,10 @@ export default function createAnimatedComponent(
       });
 
       // detach old animatedProps
-      if (prevAnimatedProps && prevAnimatedProps !== this.props.animatedProps) {
+      if (
+        prevAnimatedProps &&
+        !isSameAnimatedProps(prevAnimatedProps, this.props.animatedProps)
+      ) {
         prevAnimatedProps.viewDescriptors!.remove(viewTag as number);
       }
 

package/src/reanimated1/core/Core.test.js

@@ -5,7 +5,7 @@ import renderer from 'react-test-renderer';
 
 jest.mock('../../ReanimatedEventEmitter');
 jest.mock('../../ReanimatedModule');
-jest.mock('../../reanimated2/NativeReanimated');
+jest.mock('../../reanimated2/NativeReanimated/NativeReanimated');
 
 describe('Core Animated components', () => {
   xit('fails if something other then a node or function that returns a node is passed to Animated.Code exec prop', () => {