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

package/src/reanimated2/component/FlatList.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { FlatList, FlatListProps, LayoutChangeEvent } from 'react-native';
+import WrappedComponents from './WrappedComponents';
+import createAnimatedComponent from '../../createAnimatedComponent';
+import { ILayoutAnimationBuilder } from '../layoutReanimation/animationBuilder/commonTypes';
+
+const AnimatedFlatList = createAnimatedComponent(FlatList as any) as any;
+
+const createCellRenderer = (itemLayoutAnimation?: ILayoutAnimationBuilder) => {
+  const cellRenderer: React.FC<{
+    onLayout: (event: LayoutChangeEvent) => void;
+  }> = (props) => {
+    return (
+      <WrappedComponents.View
+        layout={itemLayoutAnimation}
+        onLayout={props.onLayout}>
+        {props.children}
+      </WrappedComponents.View>
+    );
+  };
+
+  return cellRenderer;
+};
+
+interface ReanimatedFlatlistProps<ItemT> extends FlatListProps<ItemT> {
+  itemLayoutAnimation?: ILayoutAnimationBuilder;
+}
+
+type ReanimatedFlatListFC<T = any> = React.FC<ReanimatedFlatlistProps<T>>;
+
+const ReanimatedFlatlist: ReanimatedFlatListFC = ({
+  itemLayoutAnimation,
+  ...restProps
+}) => {
+  const cellRenderer = React.useMemo(
+    () => createCellRenderer(itemLayoutAnimation),
+    []
+  );
+  return (
+    <AnimatedFlatList {...restProps} CellRendererComponent={cellRenderer} />
+  );
+};
+
+export default ReanimatedFlatlist;

package/src/reanimated2/component/WrappedComponents.ts

@@ -0,0 +1,11 @@
+import { Image, ScrollView, Text, View } from 'react-native';
+import createAnimatedComponent from '../../createAnimatedComponent';
+
+const WrappedComponents = {
+  View: createAnimatedComponent(View),
+  Text: createAnimatedComponent(Text as any),
+  Image: createAnimatedComponent(Image as any),
+  ScrollView: createAnimatedComponent(ScrollView),
+};
+
+export default WrappedComponents;

package/src/reanimated2/component/index.ts

@@ -0,0 +1,9 @@
+import ReanimatedFlatlist from './FlatList';
+import WrappedComponents from './WrappedComponents';
+
+const ReanimatedComponents = {
+  ...WrappedComponents,
+  FlatList: ReanimatedFlatlist,
+};
+
+export default ReanimatedComponents;

package/src/reanimated2/core.ts

@@ -383,6 +383,9 @@ if (!NativeReanimatedModule.useOnlyV1) {
         info: runOnJS(capturableConsole.info),
       };
       _setGlobalConsole(console);
+      global.performance = {
+        now: global._chronoNow,
+      };
     })();
 }
 

package/src/reanimated2/globals.d.ts

@@ -26,6 +26,7 @@ declare global {
     y: number,
     animated: boolean
   ) => void;
+  const _chronoNow: () => number;
   namespace NodeJS {
     interface Global {
       __reanimatedWorkletInit: (worklet: WorkletFunction) => void;
@@ -37,6 +38,8 @@ declare global {
       _frameTimestamp: number | null;
       _measure: () => MeasuredDimensions;
       _scrollTo: () => void;
+      _chronoNow: () => number;
+      performance: { now: () => number };
       LayoutAnimationRepository: {
         configs: Record<string, unknown>;
         registerConfig(tag: number, config: Record<string, unknown>): void;

package/src/reanimated2/layoutReanimation/animationBuilder/commonTypes.ts

@@ -14,32 +14,43 @@ export type LayoutAnimation = {
 
 export type AnimationFunction = (a?: any, b?: any, c?: any) => any; // this is just a temporary mock
 
-export interface 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 AnimationConfigFunction<T> = (targetValues: T) => LayoutAnimation;
+
 export interface 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;
 }
@@ -76,3 +87,11 @@ export type LayoutAnimationAndConfig = [
 export interface IEntryExitAnimationBuilder {
   build: () => EntryExitAnimationFunction;
 }
+
+export interface IEntryAnimationBuilder {
+  build: () => AnimationConfigFunction<EntryAnimationsValues>;
+}
+
+export interface IExitAnimationBuilder {
+  build: () => AnimationConfigFunction<ExitAnimationsValues>;
+}

package/src/reanimated2/layoutReanimation/animationBuilder/index.ts

@@ -4,8 +4,12 @@ export { Keyframe } from './Keyframe';
 export {
   LayoutAnimation,
   AnimationFunction,
-  EntryExitAnimationsValues,
+  EntryAnimationsValues,
+  ExitAnimationsValues,
   EntryExitAnimationFunction,
+  AnimationConfigFunction,
+  IEntryAnimationBuilder,
+  IExitAnimationBuilder,
   LayoutAnimationsValues,
   LayoutAnimationFunction,
   ILayoutAnimationBuilder,

package/src/reanimated2/layoutReanimation/defaultAnimations/Default.ts

@@ -1,42 +1,48 @@
 import {
   LayoutAnimationFunction,
-  EntryExitAnimationFunction,
+  EntryAnimationsValues,
+  ExitAnimationsValues,
+  AnimationConfigFunction,
 } from '../animationBuilder/commonTypes';
 
 export const DefaultLayout: LayoutAnimationFunction = (values) => {
   'worklet';
   return {
     initialValues: {
-      originX: values.originX,
-      originY: values.originY,
-      width: values.width,
-      height: values.height,
+      originX: values.targetOriginX,
+      originY: values.targetOriginY,
+      width: values.targetWidth,
+      height: values.targetHeight,
     },
     animations: {},
   };
 };
 
-export const DefaultEntering: EntryExitAnimationFunction = (targetValues) => {
+export const DefaultEntering: AnimationConfigFunction<EntryAnimationsValues> = (
+  values
+) => {
   'worklet';
   return {
     initialValues: {
-      originX: targetValues.originX,
-      originY: targetValues.originY,
-      width: targetValues.width,
-      height: targetValues.height,
+      originX: values.targetOriginX,
+      originY: values.targetOriginY,
+      width: values.targetWidth,
+      height: values.targetHeight,
     },
     animations: {},
   };
 };
 
-export const DefaultExiting: EntryExitAnimationFunction = (startValues) => {
+export const DefaultExiting: AnimationConfigFunction<ExitAnimationsValues> = (
+  values
+) => {
   'worklet';
   return {
     initialValues: {
-      originX: startValues.originX,
-      originY: startValues.originY,
-      width: startValues.width,
-      height: startValues.height,
+      originX: values.currentOriginX,
+      originY: values.currentOriginY,
+      width: values.currentWidth,
+      height: values.currentHeight,
     },
     animations: {},
   };

package/src/reanimated2/layoutReanimation/defaultAnimations/Flip.ts

@@ -1,17 +1,22 @@
 import {
   IEntryExitAnimationBuilder,
   EntryExitAnimationFunction,
+  EntryAnimationsValues,
+  ExitAnimationsValues,
+  AnimationConfigFunction,
+  IEntryAnimationBuilder,
+  IExitAnimationBuilder,
 } from '../animationBuilder/commonTypes';
 import { ComplexAnimationBuilder } from '../animationBuilder';
 
 export class FlipInXUp
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): FlipInXUp {
     return new FlipInXUp();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -24,7 +29,7 @@ export class FlipInXUp
           transform: [
             { perspective: 500 },
             { rotateX: '90deg' },
-            { translateY: -targetValues.height },
+            { translateY: -targetValues.targetHeight },
           ],
         },
         animations: {
@@ -42,12 +47,12 @@ export class FlipInXUp
 
 export class FlipInYLeft
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): FlipInYLeft {
     return new FlipInYLeft();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -60,7 +65,7 @@ export class FlipInYLeft
           transform: [
             { perspective: 500 },
             { rotateY: '-90deg' },
-            { translateX: -targetValues.width },
+            { translateX: -targetValues.targetWidth },
           ],
         },
         animations: {
@@ -78,12 +83,12 @@ export class FlipInYLeft
 
 export class FlipInXDown
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): FlipInXDown {
     return new FlipInXDown();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -96,7 +101,7 @@ export class FlipInXDown
           transform: [
             { perspective: 500 },
             { rotateX: '-90deg' },
-            { translateY: targetValues.height },
+            { translateY: targetValues.targetHeight },
           ],
         },
         animations: {
@@ -114,12 +119,12 @@ export class FlipInXDown
 
 export class FlipInYRight
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IEntryAnimationBuilder {
   static createInstance(): FlipInYRight {
     return new FlipInYRight();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<EntryAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -132,7 +137,7 @@ export class FlipInYRight
           transform: [
             { perspective: 500 },
             { rotateY: '90deg' },
-            { translateX: targetValues.width },
+            { translateX: targetValues.targetWidth },
           ],
         },
         animations: {
@@ -212,12 +217,12 @@ export class FlipInEasyY
 
 export class FlipOutXUp
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): FlipOutXUp {
     return new FlipOutXUp();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -240,7 +245,7 @@ export class FlipOutXUp
             {
               translateY: delayFunction(
                 delay,
-                animation(-targetValues.height, config)
+                animation(-targetValues.currentHeight, config)
               ),
             },
           ],
@@ -253,12 +258,12 @@ export class FlipOutXUp
 
 export class FlipOutYLeft
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): FlipOutYLeft {
     return new FlipOutYLeft();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -281,7 +286,7 @@ export class FlipOutYLeft
             {
               translateX: delayFunction(
                 delay,
-                animation(-targetValues.width, config)
+                animation(-targetValues.currentWidth, config)
               ),
             },
           ],
@@ -294,12 +299,12 @@ export class FlipOutYLeft
 
 export class FlipOutXDown
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): FlipOutXDown {
     return new FlipOutXDown();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -322,7 +327,7 @@ export class FlipOutXDown
             {
               translateY: delayFunction(
                 delay,
-                animation(targetValues.height, config)
+                animation(targetValues.currentHeight, config)
               ),
             },
           ],
@@ -335,12 +340,12 @@ export class FlipOutXDown
 
 export class FlipOutYRight
   extends ComplexAnimationBuilder
-  implements IEntryExitAnimationBuilder {
+  implements IExitAnimationBuilder {
   static createInstance(): FlipOutYRight {
     return new FlipOutYRight();
   }
 
-  build = (): EntryExitAnimationFunction => {
+  build = (): AnimationConfigFunction<ExitAnimationsValues> => {
     const delayFunction = this.getDelayFunction();
     const [animation, config] = this.getAnimationAndConfig();
     const delay = this.getDelay();
@@ -363,7 +368,7 @@ export class FlipOutYRight
             {
               translateX: delayFunction(
                 delay,
-                animation(targetValues.width, config)
+                animation(targetValues.currentWidth, config)
               ),
             },
           ],