add experimental support for layout animations

Author: computerjazz

README.md

@@ -60,7 +60,8 @@ All props are spread onto underlying [FlatList](https://facebook.github.io/react
 | `simultaneousHandlers`     | `React.Ref<any>` or `React.Ref<any>[]`                                                    | References to other gesture handlers, mainly useful when using this component within a `ScrollView`. See [Cross handler interactions](https://docs.swmansion.com/react-native-gesture-handler/docs/interactions/). |
 |`itemEnteringAnimation`| Reanimated `AnimationBuilder` ([docs](https://docs.swmansion.com/react-native-reanimated/docs/api/LayoutAnimations/entryAnimations)) | Animation when item is added to list.|
 |`itemExitingAnimation`| Reanimated `AnimationBuilder` ([docs](https://docs.swmansion.com/react-native-reanimated/docs/api/LayoutAnimations/exitAnimations))| Animation when item is removed from list.|
-|`itemLayoutAnimation`| Reanimated `AnimationBuilder` ([docs](https://docs.swmansion.com/react-native-reanimated/docs/api/LayoutAnimations/layoutTransitions))| Animation when list items change position.|
+|`itemLayoutAnimation`| Reanimated `AnimationBuilder` ([docs](https://docs.swmansion.com/react-native-reanimated/docs/api/LayoutAnimations/layoutTransitions))| Animation when list items change position (`enableLayoutAnimationExperimental` prop must be `true`).|
+|`enableLayoutAnimationExperimental`| `boolean`| Flag to turn on experimental support for `itemLayoutAnimation`.|
 
 
 

src/components/CellRendererComponent.tsx

@@ -1,12 +1,14 @@
 import React, { useEffect, useMemo, useRef } from "react";
 import {
+  findNodeHandle,
   LayoutChangeEvent,
   MeasureLayoutOnSuccessCallback,
   StyleProp,
   StyleSheet,
   ViewStyle,
 } from "react-native";
 import Animated, {
+  runOnUI,
   useAnimatedStyle,
   useSharedValue,
 } from "react-native-reanimated";
@@ -38,6 +40,7 @@ function CellRendererComponent<T>(props: Props<T>) {
     activeKey,
     keyExtractor,
     horizontal,
+    layoutAnimationDisabled,
   } = useDraggableFlatListContext<T>();
 
   const key = keyExtractor(item, index);
@@ -124,14 +127,36 @@ function CellRendererComponent<T>(props: Props<T>) {
     itemLayoutAnimation,
   } = propsRef.current;
 
+  useEffect(() => {
+    if (!propsRef.current.enableLayoutAnimationExperimental) return;
+    const tag = findNodeHandle(viewRef.current);
+
+    runOnUI((t: number | null, _layoutDisabled) => {
+      "worklet";
+      if (!t) return;
+      const config = global.LayoutAnimationRepository.configs[t];
+      if (config) stashConfig(t, config);
+      const stashedConfig = getStashedConfig(t);
+      if (_layoutDisabled) {
+        global.LayoutAnimationRepository.removeConfig(t);
+      } else if (stashedConfig) {
+        global.LayoutAnimationRepository.registerConfig(t, stashedConfig);
+      }
+    })(tag, layoutAnimationDisabled);
+  }, [layoutAnimationDisabled]);
+
   return (
     <Animated.View
       {...rest}
       ref={viewRef}
       onLayout={onCellLayout}
       entering={itemEnteringAnimation}
       exiting={itemExitingAnimation}
-      layout={itemLayoutAnimation}
+      layout={
+        propsRef.current.enableLayoutAnimationExperimental
+          ? itemLayoutAnimation
+          : undefined
+      }
       style={[
         props.style,
         baseStyle,
@@ -151,3 +176,29 @@ const styles = StyleSheet.create({
     transform: [{ translateX: 0 }, { translateY: 0 }],
   },
 });
+
+declare global {
+  namespace NodeJS {
+    interface Global {
+      RNDFLLayoutAnimationConfigStash: Record<string, unknown>;
+    }
+  }
+}
+
+runOnUI(() => {
+  "worklet";
+  global.RNDFLLayoutAnimationConfigStash = {};
+})();
+
+function stashConfig(tag: number, config: unknown) {
+  "worklet";
+  if (!global.RNDFLLayoutAnimationConfigStash)
+    global.RNDFLLayoutAnimationConfigStash = {};
+  global.RNDFLLayoutAnimationConfigStash[tag] = config;
+}
+
+function getStashedConfig(tag: number) {
+  "worklet";
+  if (!global.RNDFLLayoutAnimationConfigStash) return null;
+  return global.RNDFLLayoutAnimationConfigStash[tag] as Record<string, unknown>;
+}

src/components/DraggableFlatList.tsx

@@ -1,5 +1,6 @@
 import React, {
   useCallback,
+  useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -94,6 +95,9 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
   } = props;
 
   let [activeKey, setActiveKey] = useState<string | null>(null);
+  const [layoutAnimationDisabled, setLayoutAnimationDisabled] = useState(
+    !propsRef.current.enableLayoutAnimationExperimental
+  );
 
   const keyExtractor = useStableCallback((item: T, index: number) => {
     if (!props.keyExtractor) {
@@ -112,6 +116,19 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
     activeKey = null;
   }
 
+  useEffect(() => {
+    if (!propsRef.current.enableLayoutAnimationExperimental) return;
+    if (activeKey) {
+      setLayoutAnimationDisabled(true);
+    } else {
+      // setTimeout result of trial-and-error to determine how long to wait before
+      // re-enabling layout animations so that a drag reorder does not trigger it.
+      setTimeout(() => {
+        setLayoutAnimationDisabled(false);
+      }, 100);
+    }
+  }, [activeKey]);
+
   useLayoutEffect(() => {
     props.data.forEach((d, i) => {
       const key = keyExtractor(d, i);
@@ -328,6 +345,7 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
       activeKey={activeKey}
       keyExtractor={keyExtractor}
       horizontal={!!props.horizontal}
+      layoutAnimationDisabled={layoutAnimationDisabled}
     >
       <GestureDetector gesture={panGesture}>
         <Animated.View

src/context/draggableFlatListContext.tsx

@@ -4,6 +4,7 @@ type Props<T> = {
   activeKey: string | null;
   keyExtractor: (item: T, index: number) => string;
   horizontal: boolean;
+  layoutAnimationDisabled: boolean;
   children: React.ReactNode;
 };
 
@@ -17,15 +18,17 @@ export default function DraggableFlatListProvider<T>({
   activeKey,
   keyExtractor,
   horizontal,
+  layoutAnimationDisabled,
   children,
 }: Props<T>) {
   const value = useMemo(
     () => ({
       activeKey,
       keyExtractor,
       horizontal,
+      layoutAnimationDisabled,
     }),
-    [activeKey, keyExtractor, horizontal]
+    [activeKey, keyExtractor, horizontal, layoutAnimationDisabled]
   );
 
   return (

src/types.ts

@@ -48,6 +48,7 @@ export type DraggableFlatListProps<T> = Modify<
     itemEnteringAnimation?: AnimateProps<Animated.View>["entering"];
     itemExitingAnimation?: AnimateProps<Animated.View>["exiting"];
     itemLayoutAnimation?: AnimateProps<Animated.View>["layout"];
+    enableLayoutAnimationExperimental?: boolean;
     onContainerLayout?: (params: {
       layout: LayoutChangeEvent["nativeEvent"]["layout"];
       containerRef: React.RefObject<Animated.View>;