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

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);
     }
   };
 }
@@ -209,6 +209,7 @@ const Reanimated = {
   },
   diff: NOOP,
   diffClamp: NOOP,
+  interpolate: NOOP,
   interpolateNode: NOOP,
   interpolateColors: NOOP,
   max: (a, b) => Math.max(getValue(a), getValue(b)),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.3.0-beta.3",
+  "version": "2.4.0",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
@@ -24,7 +24,8 @@
     "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.66.0",
+    "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

@@ -69,6 +69,7 @@ const globals = new Set([
   'global',
   '_measure',
   '_scrollTo',
+  '_setGestureState',
   '_getCurrentTime',
   '_eventTimestamp',
   '_frameTimestamp',
@@ -145,16 +146,23 @@ 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',
+  'onChange',
+  'onTouchesDown',
+  'onTouchesMove',
+  'onTouchesUp',
+  'onTouchesCancelled',
 ]);
 
 class ClosureGenerator {
@@ -652,7 +660,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

@@ -16,6 +16,7 @@ declare module 'react-native-reanimated' {
     TextProps,
     ImageProps,
     ScrollViewProps,
+    FlatListProps,
     StyleProp,
     RegisteredStyle,
     ViewStyle,
@@ -26,6 +27,7 @@ declare module 'react-native-reanimated' {
     Text as ReactNativeText,
     Image as ReactNativeImage,
     ScrollView as ReactNativeScrollView,
+    FlatList as ReactNativeFlatList,
     NativeScrollEvent,
     NativeSyntheticEvent,
     ColorValue,
@@ -246,16 +248,31 @@ declare module 'react-native-reanimated' {
     export class View extends Component<AnimateProps<ViewProps>> {
       getNode(): ReactNativeView;
     }
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface View extends ReactNativeView {}
     export class Text extends Component<AnimateProps<TextProps>> {
       getNode(): ReactNativeText;
     }
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface Text extends ReactNativeText {}
     export class Image extends Component<AnimateProps<ImageProps>> {
       getNode(): ReactNativeImage;
     }
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface Image extends ReactNativeImage {}
     export class ScrollView extends Component<AnimateProps<ScrollViewProps>> {
       getNode(): ReactNativeScrollView;
     }
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface ScrollView extends ReactNativeScrollView {}
+
     export class Code extends Component<CodeProps> {}
+    export class FlatList<T> extends Component<AnimateProps<FlatListProps<T>>> {
+      itemLayoutAnimation: ILayoutAnimationBuilder;
+      getNode(): ReactNativeFlatList;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface FlatList<T> extends ReactNativeView<T> {}
 
     type Options<P> = {
       setNativeProps: (ref: any, props: P) => void;
@@ -451,34 +468,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;
@@ -594,6 +622,42 @@ declare module 'react-native-reanimated' {
     colorSpace?: 'RGB' | 'HSV'
   ): string | number;
 
+  export enum ColorSpace {
+    RGB = 0,
+    HSV = 1,
+  }
+
+  export interface InterpolateRGB {
+    r: number[];
+    g: number[];
+    b: number[];
+    a: number[];
+  }
+
+  export interface InterpolateHSV {
+    h: number[];
+    s: number[];
+    v: number[];
+  }
+
+  export interface InterpolateConfig {
+    inputRange: readonly number[];
+    outputRange: readonly (string | number)[];
+    colorSpace: ColorSpace;
+    cache: SharedValue<InterpolateRGB | InterpolateHSV | null>;
+  }
+
+  export function useInterpolateConfig(
+    inputRange: readonly number[],
+    outputRange: readonly (string | number)[],
+    colorSpace?: ColorSpace
+  ): SharedValue<InterpolateConfig>;
+
+  export function interpolateSharableColor(
+    value: number,
+    interpolateConfig: SharedValue<InterpolateConfig>
+  ): string | number;
+
   export function makeMutable<T>(initialValue: T): SharedValue<T>;
 
   type DependencyList = ReadonlyArray<any>;
@@ -965,6 +1029,12 @@ declare module 'react-native-reanimated' {
       y1: number,
       x2: number,
       y2: number
+    ): { factory: () => Animated.EasingFunction };
+    bezierFn(
+      x1: number,
+      y1: number,
+      x2: number,
+      y2: number
     ): Animated.EasingFunction;
     in(easing: Animated.EasingFunction): Animated.EasingFunction;
     out(easing: Animated.EasingFunction): Animated.EasingFunction;
@@ -1071,4 +1141,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',
+]);