npm - react-native-reanimated - Versions diffs - 2.3.0-beta.4 → 2.4.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (109) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/mock.js CHANGED Viewed

@@ -209,7 +209,9 @@ const Reanimated = {
   },
   diff: NOOP,
   diffClamp: NOOP,
+  interpolate: NOOP,
   interpolateNode: NOOP,
+  interpolateColor: NOOP,
   interpolateColors: NOOP,
   max: (a, b) => Math.max(getValue(a), getValue(b)),
   min: (a, b) => Math.min(getValue(a), getValue(b)),

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.3.0-beta.4",
+  "version": "2.4.1",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
@@ -20,11 +20,12 @@
     "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: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: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",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "circular_dependency_check": "yarn madge --extensions js,ts,tsx --circular ./src"
   },
   "main": "lib/Animated.js",
   "module": "lib/Animated",
@@ -48,6 +49,7 @@
     "react-native-reanimated.d.ts",
     "mock.js",
     "plugin.js",
+    "expo-module.config.json",
     "!__snapshots__",
     "!*.test.js",
     "!*.test.js.map"
@@ -113,9 +115,10 @@
     "husky": "^7.0.0",
     "jest": "^26.6.3",
     "lint-staged": "^11.2.0",
+    "madge": "^5.0.1",
     "prettier": "^2.2.1",
     "react": "17.0.2",
-    "react-native": "0.67.0-rc.3",
+    "react-native": "0.67.2",
     "react-native-codegen": "^0.0.7",
     "react-native-gesture-handler": "^1.6.1",
     "react-test-renderer": "17.0.2",
@@ -124,7 +127,7 @@
   },
   "lint-staged": {
     "*.(js|ts|tsx)": [
-      "eslint --ext '.js,.ts,.tsx' src/ --ignore-pattern src/reanimated1 --ignore-pattern react-native-reanimated.d.ts",
+      "eslint --ext '.js,.ts,.tsx' src/ --ignore-pattern src/reanimated1 --ignore-pattern react-native-reanimated.d.ts --ignore-pattern docs",
       "prettier --write"
     ],
     "**/*.{h,cpp}": "yarn lint:cpp",

package/plugin.js CHANGED Viewed

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