feat: add support for layout animations

Closes #23.

Author: omahili

README.md

@@ -66,6 +66,7 @@ This component uses a [FlatList](https://reactnative.dev/docs/flatlist) and it e
 | autoscrollActivationDelta | `number`                                         | No       | `5`                        | Allows configuring the delta for autoscroll activation when dragging an item in the same direction as the autoscroll. This is particularly useful when an item is dragged within the autoscroll area to account for minor unintentional movements.                                                                                                                                                             |
 | animationDuration         | `number`                                         | No       | `200`                      | Duration of the animations in milliseconds. Users won't be able to drag a new item until the dragged item is released and its animation to its new position ends.                                                                                                                                                                                                                                              |
 | cellAnimations            | `ReorderableListCellAnimations`                  | No       | N/A                        | Allows passing an object with values and/or shared values that can animate a cell, for example by using the `onDragStart` and `onDragEnd` events. Supports view style properties. Override opacity and/or transform to disable the default animation, e.g. `{opacity: 1, transform: []}`. Check the [examples](https://github.com/omahili/react-native-reorderable-list/tree/master/example) for more details. |
+| itemLayoutAnimation            | `ComponentProps<typeof Animated.View>['layout']>`      | No       | N/A                        | Layout animation when the item is added to and/or removed from the view hierarchy. To skip entering or exiting animations use the LayoutAnimationConfig component from [Reanimated](https://docs.swmansion.com/react-native-reanimated). |
 |  dragEnabled           | `boolean`                  | No       | `true`                        | Whether dragging items is enabled. |
 | shouldUpdateActiveItem    | boolean                                          | No       | `false`                    | Whether the active item should be updated. Enables usage of `useIsActive` hook.                                                                                                                                                                                                                                                                                                                                |
 | panGesture                | `PanGesture`                                     | No       | N/A                        | Custom instance of pan gesture. See [GestureHandler docs](https://docs.swmansion.com/react-native-gesture-handler) for further info.                                                                                                                                                                                                                                                                           |

…/src/SwipeableList/SwipeableListItem.tsx …ayoutAnimations/LayoutAnimationsItem.tsxexample/src/SwipeableList/SwipeableListItem.tsx renamed to example/src/LayoutAnimations/LayoutAnimationsItem.tsx example/src/SwipeableList/SwipeableListItem.tsx renamed to example/src/LayoutAnimations/LayoutAnimationsItem.tsx

@@ -5,12 +5,12 @@ import Swipeable from 'react-native-gesture-handler/Swipeable';
 
 import {ListItem, ListItemProps} from '../common';
 
-interface SwipeableListItemProps extends ListItemProps {
+interface LayoutAnimationsItemProps extends ListItemProps {
   id: string;
   onDeletePress: (id: string) => void;
 }
 
-export const SwipeableListItem: React.FC<SwipeableListItemProps> = memo(
+export const LayoutAnimationsItem: React.FC<LayoutAnimationsItemProps> = memo(
   ({id, onDeletePress, ...rest}) => {
     const renderRightActions = () => (
       <Pressable

…rc/SwipeableList/SwipeableListScreen.tsx …outAnimations/LayoutAnimationsScreen.tsxexample/src/SwipeableList/SwipeableListScreen.tsx renamed to example/src/LayoutAnimations/LayoutAnimationsScreen.tsx example/src/SwipeableList/SwipeableListScreen.tsx renamed to example/src/LayoutAnimations/LayoutAnimationsScreen.tsx

@@ -1,6 +1,7 @@
 import React, {useCallback, useState} from 'react';
 import {Button, ListRenderItemInfo, StyleSheet, View} from 'react-native';
 
+import {LinearTransition} from 'react-native-reanimated';
 import ReorderableList, {
   ReorderableListReorderEvent,
   reorderItems,
@@ -9,30 +10,39 @@ import ReorderableList, {
 import {
   ItemSeparator,
   SeedDataItem,
+  createDataItem,
   usePanGesture,
   useSeedData,
 } from '../common';
-import {SwipeableListItem} from './SwipeableListItem';
+import {LayoutAnimationsItem} from './LayoutAnimationsItem';
 
-export const SwipeableListScreen = () => {
+export const LayoutAnimationsScreen = () => {
   const seedData = useSeedData(5);
   const [data, setData] = useState(seedData);
   const panGesture = usePanGesture();
 
-  const handleReorder = ({from, to}: ReorderableListReorderEvent) => {
-    setData(value => reorderItems(value, from, to));
-  };
+  const handleReorder = useCallback(
+    ({from, to}: ReorderableListReorderEvent) => {
+      setData(value => reorderItems(value, from, to));
+    },
+    [],
+  );
+
+  const handleAddPress = useCallback(() => {
+    setData(value => [createDataItem(), ...value]);
+  }, []);
 
   const handleDeletePress = useCallback((id: string) => {
     setData(value => value.filter(x => x.id !== id));
   }, []);
 
-  const renderItem = ({item}: ListRenderItemInfo<SeedDataItem>) => (
-    <SwipeableListItem {...item} onDeletePress={handleDeletePress} />
+  const renderItem = useCallback(
+    ({item}: ListRenderItemInfo<SeedDataItem>) => (
+      <LayoutAnimationsItem {...item} onDeletePress={handleDeletePress} />
+    ),
+    [handleDeletePress],
   );
 
-  const handleResetPress = () => setData(seedData);
-
   return (
     <View style={styles.container}>
       <ReorderableList
@@ -43,12 +53,13 @@ export const SwipeableListScreen = () => {
         ItemSeparatorComponent={ItemSeparator}
         contentContainerStyle={styles.listContentContainer}
         panGesture={panGesture}
+        itemLayoutAnimation={LinearTransition}
         cellAnimations={{
           // Disable opacity animation to avoid seeing the delete action underneath.
           opacity: 1,
         }}
       />
-      <Button title="Reset" onPress={handleResetPress} />
+      <Button title="Add" onPress={handleAddPress} />
     </View>
   );
 };

example/src/LayoutAnimations/index.ts

@@ -0,0 +1 @@
+export {LayoutAnimationsScreen} from './LayoutAnimationsScreen';

example/src/SwipeableList/index.ts

@@ -9,25 +9,24 @@ export interface SeedDataItem {
   description: string;
 }
 
+export const createDataItem = () => ({
+  id: faker.string.uuid(),
+  image: faker.image.urlPicsumPhotos({
+    width: 50,
+    height: 50,
+  }),
+  title: faker.lorem.sentence(5).slice(0, -1),
+  description: faker.lorem.paragraph({
+    min: 1,
+    max: 3,
+  }),
+});
+
 export const useSeedData = (count = 20) =>
   useMemo(
     () =>
-      faker.helpers.multiple(
-        () => ({
-          id: faker.string.uuid(),
-          image: faker.image.urlPicsumPhotos({
-            width: 50,
-            height: 50,
-          }),
-          title: faker.lorem.sentence(5).slice(0, -1),
-          description: faker.lorem.paragraph({
-            min: 1,
-            max: 3,
-          }),
-        }),
-        {
-          count,
-        },
-      ),
+      faker.helpers.multiple(createDataItem, {
+        count,
+      }),
     [count],
   );

example/src/common/useSeedData.ts

@@ -8,13 +8,13 @@ import {DynamicHeightsScreen} from './DynamicHeights';
 import {FloatingHeaderFooterScreen} from './FloatingHeaderFooter';
 import {HeaderFooterScreen} from './HeaderFooter';
 import {IndexChangeScreen} from './IndexChange';
+import {LayoutAnimationsScreen} from './LayoutAnimations';
 import {MultipleListsScreen} from './MultipleLists';
 import {NestedListsScreen} from './NestedLists';
 import {NestedScrollableListsScreen} from './NestedScrollableLists';
 import {PlaylistScreen} from './Playlist';
 import {ReadmeExampleScreen} from './ReadmeExample';
 import {RefreshControlScreen} from './RefreshControl';
-import {SwipeableListScreen} from './SwipeableList';
 
 const screens = [
   {
@@ -79,8 +79,8 @@ const screens = [
   },
   {
     id: '12',
-    name: 'Swipeable List',
-    component: SwipeableListScreen,
+    name: 'Layout Animations',
+    component: LayoutAnimationsScreen,
   },
   {
     id: '13',

example/src/screens.ts

@@ -38,8 +38,14 @@ export const ReorderableListCell = memo(
     draggedIndex,
     animationDuration,
   }: ReorderableListCellProps<T>) => {
-    const {currentIndex, draggedHeight, activeIndex, cellAnimations} =
-      useContext(ReorderableListContext);
+    const {
+      currentIndex,
+      draggedHeight,
+      activeIndex,
+      cellAnimations,
+      itemLayoutAnimation,
+    } = useContext(ReorderableListContext);
+
     const dragHandler = useCallback(
       () => runOnUI(startDrag)(index),
       [startDrag, index],
@@ -141,7 +147,10 @@ export const ReorderableListCell = memo(
 
     return (
       <ReorderableCellContext.Provider value={contextValue}>
-        <Animated.View style={animatedStyle} onLayout={handleLayout}>
+        <Animated.View
+          style={animatedStyle}
+          onLayout={handleLayout}
+          layout={itemLayoutAnimation.current}>
           {children}
         </Animated.View>
       </ReorderableCellContext.Provider>

src/components/ReorderableListCell.tsx

@@ -3,6 +3,7 @@ import {
   CellRendererProps,
   FlatList,
   FlatListProps,
+  InteractionManager,
   LayoutChangeEvent,
   Platform,
   ScrollView,
@@ -42,7 +43,7 @@ import {
   SCALE_ANIMATION_CONFIG_DEFAULT,
 } from './constants';
 import {ReorderableListCell} from './ReorderableListCell';
-import {usePropAsSharedValue} from '../hooks';
+import {usePropAsSharedValue, useStableCallback} from '../hooks';
 
 const AnimatedFlatList = Animated.createAnimatedComponent(
   FlatList,
@@ -87,17 +88,20 @@ const ReorderableListCore = <T,>(
     cellAnimations,
     dragEnabled = true,
     shouldUpdateActiveItem,
+    itemLayoutAnimation,
     panGesture,
     panEnabled = true,
     panActivateAfterLongPress,
     data,
+    keyExtractor,
     ...rest
   }: ReorderableListCoreProps<T>,
   ref: React.ForwardedRef<FlatList<T>>,
 ) => {
   const scrollEnabled = rest.scrollEnabled ?? true;
 
   const flatListRef = useAnimatedRef<FlatList>();
+  const markedCellsRef = useRef<Map<string, 1>>();
   const [activeIndex, setActiveIndex] = useState(-1);
   const prevItemCount = useRef(data.length);
 
@@ -139,6 +143,12 @@ const ReorderableListCore = <T,>(
   const dragDirection = useSharedValue(0);
   const lastDragDirectionPivot = useSharedValue<number | null>(null);
 
+  const itemLayoutAnimationPropRef = useRef(itemLayoutAnimation);
+  itemLayoutAnimationPropRef.current = itemLayoutAnimation;
+
+  const keyExtractorPropRef = useRef(keyExtractor);
+  keyExtractorPropRef.current = keyExtractor;
+
   const scrollEnabledProp = usePropAsSharedValue(scrollEnabled);
   const animationDurationProp = usePropAsSharedValue(animationDuration);
   const autoscrollActivationDeltaProp = usePropAsSharedValue(
@@ -169,13 +179,50 @@ const ReorderableListCore = <T,>(
     prevItemCount.current = data.length;
   }, [data.length, itemHeight, itemOffset, itemCount]);
 
+  useEffect(() => {
+    if (
+      !markedCellsRef.current ||
+      // Clean keys once they surpass by 10% the size of the list itself.
+      markedCellsRef.current.size <= data.length + Math.ceil(data.length * 0.1)
+    ) {
+      return;
+    }
+
+    // Can be heavy to loop through all items, defer the task to run after interactions.
+    const task = InteractionManager.runAfterInteractions(() => {
+      if (!markedCellsRef.current) {
+        return;
+      }
+
+      const map = new Map<string, 1>();
+      for (let i = 0; i < data.length; i++) {
+        const key = keyExtractorPropRef.current?.(data[i], i) || i.toString();
+        if (markedCellsRef.current.has(key)) {
+          map.set(key, markedCellsRef.current.get(key)!);
+        }
+      }
+
+      markedCellsRef.current = map;
+    });
+
+    return () => {
+      task.cancel();
+    };
+  }, [data]);
+
+  const createCellKey = useCallback((cellKey: string) => {
+    const mark = markedCellsRef.current?.get(cellKey) || 0;
+    return `${cellKey}#${mark}`;
+  }, []);
+
   const listContextValue = useMemo(
     () => ({
       draggedHeight,
       currentIndex,
       draggedIndex,
       dragEndHandlers,
       activeIndex,
+      itemLayoutAnimation: itemLayoutAnimationPropRef,
       cellAnimations: {
         ...cellAnimations,
         transform:
@@ -195,6 +242,7 @@ const ReorderableListCore = <T,>(
       dragEndHandlers,
       activeIndex,
       cellAnimations,
+      itemLayoutAnimationPropRef,
       scaleDefault,
       opacityDefault,
     ],
@@ -394,9 +442,28 @@ const ReorderableListCore = <T,>(
     setTimeout(runOnUI(resetSharedValues), animationDurationProp.value);
   }, [resetSharedValues, animationDurationProp]);
 
+  const markCells = (fromIndex: number, toIndex: number) => {
+    if (!markedCellsRef.current) {
+      markedCellsRef.current = new Map();
+    }
+
+    const start = Math.min(fromIndex, toIndex);
+    const end = Math.max(fromIndex, toIndex);
+    for (let i = start; i <= end; i++) {
+      const cellKey = keyExtractorPropRef.current?.(data[i], i) || i.toString();
+      if (!markedCellsRef.current.has(cellKey)) {
+        markedCellsRef.current.set(cellKey, 1);
+      } else {
+        markedCellsRef.current.delete(cellKey);
+      }
+    }
+  };
+
   const reorder = (fromIndex: number, toIndex: number) => {
     runOnUI(resetSharedValues)();
 
+    markCells(fromIndex, toIndex);
+
     if (fromIndex !== toIndex) {
       onReorder({from: fromIndex, to: toIndex});
     }
@@ -950,12 +1017,12 @@ const ReorderableListCore = <T,>(
     onScroll || null,
   ]);
 
-  const renderAnimatedCell = useCallback(
+  const renderAnimatedCell = useStableCallback(
     ({cellKey, ...props}: CellRendererProps<T>) => (
       <ReorderableListCell
         {...props}
         // forces remount with key change on reorder
-        key={`${cellKey}+${props.index}`}
+        key={createCellKey(cellKey)}
         itemOffset={itemOffset}
         itemHeight={itemHeight}
         dragY={dragY}
@@ -964,14 +1031,6 @@ const ReorderableListCore = <T,>(
         startDrag={startDrag}
       />
     ),
-    [
-      itemOffset,
-      itemHeight,
-      dragY,
-      draggedIndex,
-      animationDurationProp,
-      startDrag,
-    ],
   );
 
   return (
@@ -981,6 +1040,7 @@ const ReorderableListCore = <T,>(
           {...rest}
           ref={handleRef}
           data={data}
+          keyExtractor={keyExtractor}
           CellRendererComponent={renderAnimatedCell}
           onLayout={handleFlatListLayout}
           onScroll={composedScrollHandler}

src/components/ReorderableListCore.tsx

@@ -2,13 +2,14 @@ import React from 'react';
 
 import type {SharedValue} from 'react-native-reanimated';
 
-import {ReorderableListCellAnimations} from '../types';
+import {ItemLayoutAnimation, ReorderableListCellAnimations} from '../types';
 
 interface ReorderableListContextData {
   currentIndex: SharedValue<number>;
   draggedHeight: SharedValue<number>;
   dragEndHandlers: SharedValue<((from: number, to: number) => void)[][]>;
   activeIndex: number;
+  itemLayoutAnimation: React.MutableRefObject<ItemLayoutAnimation | undefined>;
   cellAnimations: ReorderableListCellAnimations;
 }