Layout animation for FlatList

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;

src/Animated.js

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

src/createAnimatedComponent.tsx

@@ -36,7 +36,7 @@ import { initialUpdaterRun } from './reanimated2/animation';
 import {
   BaseAnimationBuilder,
   EntryExitAnimationFunction,
-  LayoutAnimationFunction,
+  ILayoutAnimationBuilder,
 } from './reanimated2/layoutReanimation';
 import { SharedValue, StyleProps } from './reanimated2/commonTypes';
 import {
@@ -133,7 +133,7 @@ export type AnimatedComponentProps<P extends Record<string, unknown>> = P & {
   animatedStyle?: StyleProps;
   layout?:
     | BaseAnimationBuilder
-    | LayoutAnimationFunction
+    | ILayoutAnimationBuilder
     | typeof BaseAnimationBuilder;
   entering?:
     | BaseAnimationBuilder

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;

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;

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;