react-native-reanimated 2.3.0-beta.3 → 2.3.2

package/lib/{reanimated2 → src/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 → src/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,10 +117,10 @@ 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,
+                        originY: -height,
                     },
                     callback: callback,
                 };
@@ -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 → src/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 → src/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 → src/reanimated2}/layoutReanimation/defaultTransitions/EntryExitTransition.js

@@ -60,7 +60,7 @@ export class EntryExitTransition extends BaseAnimationBuilder {
                                 (_a = animations.transform) === null || _a === void 0 ? void 0 : _a.push({
                                     [transformProp]: delayFunction(delay + exitingDuration, withSequence(withTiming(enteringValues.initialValues.transform
                                         ? enteringValues.initialValues.transform[index][transformProp]
-                                        : 0, { duration: 0 }), value[transformProp])),
+                                        : 0, { duration: exitingDuration }), value[transformProp])),
                                 });
                             }
                         });
@@ -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: 0 })), originY: delayFunction(delay + exitingDuration, withTiming(values.originY, { duration: 0 })), width: delayFunction(delay + exitingDuration, withTiming(values.width, { duration: 0 })), height: delayFunction(delay + exitingDuration, withTiming(values.height, { duration: 0 })) }, 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 → src/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 → src/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 → src/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 → src/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/mock.js

@@ -86,7 +86,7 @@ function createTransitioningComponent(Component) {
     }
 
     render() {
-      return <Component {...this.props} />;
+      return React.createElement(Component, this.props);
     }
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.3.0-beta.3",
+  "version": "2.3.2",
   "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.66.0",
+    "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",
@@ -124,7 +125,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

@@ -69,6 +69,7 @@ const globals = new Set([
   'global',
   '_measure',
   '_scrollTo',
+  '_setGestureState',
   '_getCurrentTime',
   '_eventTimestamp',
   '_frameTimestamp',
@@ -145,16 +146,22 @@ const gestureHandlerGestureObjects = new Set([
   'LongPress',
   'ForceTouch',
   'Native',
+  'Manual',
   'Race',
   'Simultaneous',
   'Exclusive',
 ]);
 
-const gestureHandlerCallbackMethods = new Set([
-  'onBegan',
+const gestureHandlerBuilderMethods = new Set([
+  'onBegin',
   'onStart',
   'onEnd',
+  'onFinalize',
   'onUpdate',
+  'onTouchesDown',
+  'onTouchesMove',
+  'onTouchesUp',
+  'onTouchesCancelled',
 ]);
 
 class ClosureGenerator {
@@ -652,7 +659,7 @@ function isGestureObjectEventCallbackMethod(t, node) {
   return (
     t.isMemberExpression(node) &&
     t.isIdentifier(node.property) &&
-    gestureHandlerCallbackMethods.has(node.property.name) &&
+    gestureHandlerBuilderMethods.has(node.property.name) &&
     containsGestureObject(t, node.object)
   );
 }

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 type EntryExitAnimationFunction = (
-    targetValues: EntryExitAnimationsValues
-  ) => LayoutAnimation;
+  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: EntryAnimationsValues) => LayoutAnimation)
+    | ((targetValues: 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;
@@ -1071,4 +1087,5 @@ declare module 'react-native-reanimated' {
   export const SpringUtils: typeof Animated.SpringUtils;
   export const useValue: typeof Animated.useValue;
   export const ReverseAnimation: typeof Animated.ReverseAnimation;
+  export function enableLayoutAnimations(flag: boolean): void;
 }

package/src/Animated.js

@@ -1,17 +1,15 @@
-import { Image, ScrollView, Text, View } 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,
@@ -23,3 +21,11 @@ const Animated = {
 export * from './reanimated2';
 export * from './reanimated1';
 export default Animated;
+
+// I think we can ignore this message as long as Gesture Handler doesn't
+// try to load the Reanimated module. I figured it should be here instead of
+// RNGH because this prevents the message from being displayed for all
+// versions of RNGH.
+LogBox.ignoreLogs([
+  'RCTBridge required dispatch_sync to load RNGestureHandlerModule. This may lead to deadlocks',
+]);