fix: Teleported active item flickering (#405)

## Description

Describe what was changed in this pull request

## Changes showcase

Include example images/recordings if the new feature introduces some
visual changes or the PR fixes a UI bug

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: MatiPl01

packages/react-native-sortables/src/components/shared/AnimatedOnLayoutView.tsx

@@ -11,12 +11,12 @@ import { componentWithRef } from '../../utils/react';
  * (onLayout is called with 0 dimensions for views which have display: none,
  * so it gets called on navigation between screens)
  */
-const AnimatedViewWeb = componentWithRef<
+const AnimatedOnLayoutView = componentWithRef<
   View,
   Omit<AnimatedProps<ViewProps>, 'onLayout'> & {
-    onLayout: NonNullable<ViewProps['onLayout']>;
+    onLayout: ViewProps['onLayout'];
   }
->(function AnimatedViewWeb({ onLayout, ...rest }, ref) {
+>(function AnimatedOnLayoutView({ onLayout, ...rest }, ref) {
   return (
     <Animated.View
       {...rest}
@@ -26,11 +26,11 @@ const AnimatedViewWeb = componentWithRef<
         // We want to call onLayout only for displayed views to prevent
         // layout updates on navigation between screens
         if (el?.offsetParent) {
-          onLayout(e);
+          onLayout?.(e);
         }
       }}
     />
   );
 });
 
-export default IS_WEB ? AnimatedViewWeb : Animated.View;
+export default IS_WEB ? AnimatedOnLayoutView : Animated.View;

packages/react-native-sortables/src/components/shared/DraggableView/ActiveItemPortal.tsx

@@ -1,68 +1,58 @@
-import type { PropsWithChildren, ReactNode } from 'react';
-import { useEffect } from 'react';
-import type { SharedValue } from 'react-native-reanimated';
-import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
+import { type PropsWithChildren, type ReactNode, useEffect } from 'react';
+import {
+  runOnJS,
+  type SharedValue,
+  useAnimatedReaction,
+  useSharedValue
+} from 'react-native-reanimated';
 
 import { usePortalContext } from '../../../providers';
-import { ItemPortalState } from '../../../types';
 
 type ActiveItemPortalProps = PropsWithChildren<{
   teleportedItemId: string;
   activationAnimationProgress: SharedValue<number>;
-  portalState: SharedValue<ItemPortalState>;
   renderTeleportedItemCell: () => ReactNode;
+  setIsTeleported: (isTeleported: boolean) => void;
 }>;
 
 export default function ActiveItemPortal({
   activationAnimationProgress,
   children,
-  portalState,
   renderTeleportedItemCell,
+  setIsTeleported,
   teleportedItemId
 }: ActiveItemPortalProps) {
-  const { subscribe, teleport } = usePortalContext()!;
+  const { teleport } = usePortalContext()!;
+  const teleportEnabled = useSharedValue(false);
 
   useEffect(() => {
-    const unsubscribe = subscribe(teleportedItemId, teleported => {
-      if (teleported) {
-        portalState.value = ItemPortalState.TELEPORTED;
-      }
-    });
-
-    return () => {
-      unsubscribe();
-      teleport(teleportedItemId, null);
-    };
-  }, [portalState, subscribe, teleport, teleportedItemId]);
-
-  useEffect(() => {
-    if (portalState.value === ItemPortalState.TELEPORTED) {
-      // Renders a component in the portal outlet
+    if (teleportEnabled.value) {
       teleport(teleportedItemId, renderTeleportedItemCell());
     }
-  }, [
-    portalState,
-    teleportedItemId,
-    renderTeleportedItemCell,
-    teleport,
-    children
-  ]);
+    // This is fine, we want to update the teleported item cell only when
+    // the children change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [children]);
 
   const enableTeleport = () => {
     teleport(teleportedItemId, renderTeleportedItemCell());
+    setIsTeleported(true);
+  };
+
+  const disableTeleport = () => {
+    runOnJS(teleport)(teleportedItemId, null);
+    setIsTeleported(false);
   };
 
   useAnimatedReaction(
     () => activationAnimationProgress.value,
     progress => {
-      if (progress > 0 && portalState.value === ItemPortalState.IDLE) {
-        portalState.value = ItemPortalState.TELEPORTING;
+      if (progress > 0 && !teleportEnabled.value) {
+        teleportEnabled.value = true;
         runOnJS(enableTeleport)();
-      } else if (
-        progress === 0 &&
-        portalState.value === ItemPortalState.TELEPORTED
-      ) {
-        portalState.value = ItemPortalState.EXITING;
+      } else if (progress === 0 && teleportEnabled.value) {
+        teleportEnabled.value = false;
+        runOnJS(disableTeleport)();
       }
     }
   );

packages/react-native-sortables/src/components/shared/DraggableView/DraggableView.tsx

@@ -1,5 +1,6 @@
 import type { PropsWithChildren, ReactNode } from 'react';
-import { Fragment, memo, useEffect } from 'react';
+import { Fragment, memo, useEffect, useState } from 'react';
+import { StyleSheet, type ViewStyle } from 'react-native';
 import { GestureDetector } from 'react-native-gesture-handler';
 import {
   LayoutAnimationConfig,
@@ -17,12 +18,7 @@ import {
   useMeasurementsContext,
   usePortalContext
 } from '../../../providers';
-import {
-  type AnimatedStyleProp,
-  ItemPortalState,
-  type LayoutAnimation,
-  type MeasureCallback
-} from '../../../types';
+import type { AnimatedStyleProp, LayoutAnimation } from '../../../types';
 import { getContextProvider } from '../../../utils';
 import ActiveItemPortal from './ActiveItemPortal';
 import ItemCell from './ItemCell';
@@ -50,21 +46,22 @@ function DraggableView({
   const { activeItemKey, componentId, customHandle, itemsOverridesStyle } =
     commonValuesContext;
 
+  const teleportedItemId = `${componentId}-${key}`;
+
+  const [isTeleported, setIsTeleported] = useState(false);
   const activationAnimationProgress = useSharedValue(0);
   const isActive = useDerivedValue(() => activeItemKey.value === key);
-  const portalState = useSharedValue(ItemPortalState.IDLE);
   const layoutStyles = useItemLayoutStyles(key, activationAnimationProgress);
   const decorationStyles = useItemDecorationStyles(
     key,
     isActive,
-    activationAnimationProgress,
-    portalState
+    activationAnimationProgress
   );
   const gesture = useItemPanGesture(key, activationAnimationProgress);
 
   useEffect(() => {
     return () => removeItemMeasurements(key);
-  }, [key, removeItemMeasurements]);
+  }, [key, removeItemMeasurements, teleportedItemId]);
 
   const withItemContext = (component: ReactNode) => (
     <ItemContextProvider
@@ -76,14 +73,16 @@ function DraggableView({
     </ItemContextProvider>
   );
 
-  const renderItemCell = (onMeasure: MeasureCallback) => {
+  const renderItemCell = (styleOverride?: ViewStyle) => {
     const innerComponent = (
       <ItemCell
         {...layoutAnimations}
-        cellStyle={[style, layoutStyles]}
+        cellStyle={[style, layoutStyles, styleOverride]}
         decorationStyles={decorationStyles}
         itemsOverridesStyle={itemsOverridesStyle}
-        onMeasure={onMeasure}>
+        onMeasure={(width, height) =>
+          handleItemMeasurement(key, { height, width })
+        }>
         <LayoutAnimationConfig skipEntering={false} skipExiting={false}>
           {children}
         </LayoutAnimationConfig>
@@ -104,27 +103,11 @@ function DraggableView({
   // NORMAL CASE (no portal)
 
   if (!portalContext) {
-    return renderItemCell((width, height) =>
-      handleItemMeasurement(key, { height, width })
-    );
+    return renderItemCell();
   }
 
   // PORTAL CASE
 
-  const teleportedItemId = `${componentId}-${key}`;
-
-  const onMeasureItem = (width: number, height: number) => {
-    const state = portalState.value;
-    if (state === ItemPortalState.EXITING) {
-      if (height > 0 && width > 0) {
-        portalContext.teleport(teleportedItemId, null);
-        portalState.value = ItemPortalState.IDLE;
-      }
-    } else if (state !== ItemPortalState.TELEPORTED) {
-      handleItemMeasurement(key, { height, width });
-    }
-  };
-
   const renderTeleportedItemCell = () => (
     // We have to wrap the TeleportedItemCell in context providers as they won't
     // be accessible otherwise, when the item is rendered in the portal outlet
@@ -135,9 +118,7 @@ function DraggableView({
           baseCellStyle={style}
           isActive={isActive}
           itemKey={key}
-          itemsOverridesStyle={itemsOverridesStyle}
-          teleportedItemId={teleportedItemId}
-          onMeasure={onMeasureItem}>
+          itemsOverridesStyle={itemsOverridesStyle}>
           {children}
         </TeleportedItemCell>
       )}
@@ -146,16 +127,24 @@ function DraggableView({
 
   return (
     <Fragment>
-      {renderItemCell(onMeasureItem)}
+      {/* We cannot unmount this item as its gesture detector must be still
+      mounted to continue handling the pan gesture */}
+      {renderItemCell(isTeleported ? styles.hidden : undefined)}
       <ActiveItemPortal
         activationAnimationProgress={activationAnimationProgress}
-        portalState={portalState}
         renderTeleportedItemCell={renderTeleportedItemCell}
+        setIsTeleported={setIsTeleported}
         teleportedItemId={teleportedItemId}>
         {children}
       </ActiveItemPortal>
     </Fragment>
   );
 }
 
+const styles = StyleSheet.create({
+  hidden: {
+    opacity: 0
+  }
+});
+
 export default memo(DraggableView);

packages/react-native-sortables/src/components/shared/DraggableView/ItemCell.tsx

@@ -1,5 +1,5 @@
-import { type PropsWithChildren } from 'react';
-import { type ViewStyle } from 'react-native';
+import type { PropsWithChildren } from 'react';
+import type { LayoutChangeEvent, ViewStyle } from 'react-native';
 import type { AnimatedStyle } from 'react-native-reanimated';
 import Animated from 'react-native-reanimated';
 
@@ -14,7 +14,7 @@ export type ItemCellProps = PropsWithChildren<{
   decorationStyles: AnimatedStyleProp;
   itemsOverridesStyle: AnimatedStyle<ViewStyle>;
   cellStyle: AnimatedStyleProp;
-  onMeasure: MeasureCallback;
+  onMeasure?: MeasureCallback;
   entering?: LayoutAnimation;
   exiting?: LayoutAnimation;
 }>;
@@ -28,19 +28,23 @@ export default function ItemCell({
   itemsOverridesStyle,
   onMeasure
 }: ItemCellProps) {
+  const maybeOnLayout = onMeasure
+    ? ({
+        nativeEvent: {
+          layout: { height, width }
+        }
+      }: LayoutChangeEvent) => {
+        onMeasure(width, height);
+      }
+    : undefined;
+
   return (
     <Animated.View style={cellStyle}>
       <AnimatedOnLayoutView
         entering={entering}
         exiting={exiting}
         style={[itemsOverridesStyle, decorationStyles]}
-        onLayout={({
-          nativeEvent: {
-            layout: { height, width }
-          }
-        }) => {
-          onMeasure(width, height);
-        }}>
+        onLayout={maybeOnLayout}>
         {children}
       </AnimatedOnLayoutView>
     </Animated.View>

packages/react-native-sortables/src/components/shared/DraggableView/TeleportedItemCell.tsx

@@ -1,38 +1,31 @@
-import type { SharedValue } from 'react-native-reanimated';
+import type { PropsWithChildren } from 'react';
+import type { ViewStyle } from 'react-native';
+import type { AnimatedStyle, SharedValue } from 'react-native-reanimated';
 import { LayoutAnimationConfig } from 'react-native-reanimated';
 
 import {
   useItemDecorationStyles,
-  usePortalContext,
   useTeleportedItemStyles
 } from '../../../providers';
 import type { AnimatedStyleProp } from '../../../types';
-import type { ItemCellProps } from './ItemCell';
 import ItemCell from './ItemCell';
 
-type TeleportedItemCellProps = Omit<
-  ItemCellProps,
-  'cellStyle' | 'decorationStyles' | 'entering' | 'exiting' | 'layout'
-> & {
+type TeleportedItemCellProps = PropsWithChildren<{
+  itemsOverridesStyle: AnimatedStyle<ViewStyle>;
   activationAnimationProgress: SharedValue<number>;
   baseCellStyle: AnimatedStyleProp;
   isActive: SharedValue<boolean>;
-  teleportedItemId: string;
   itemKey: string;
-};
+}>;
 
 export default function TeleportedItemCell({
   activationAnimationProgress,
   baseCellStyle,
   children,
   isActive,
   itemKey,
-  itemsOverridesStyle,
-  onMeasure,
-  teleportedItemId
+  itemsOverridesStyle
 }: TeleportedItemCellProps) {
-  const { notifyRendered } = usePortalContext() ?? {};
-
   const teleportedItemStyles = useTeleportedItemStyles(
     itemKey,
     isActive,
@@ -44,23 +37,11 @@ export default function TeleportedItemCell({
     activationAnimationProgress
   );
 
-  if (!notifyRendered) {
-    return null;
-  }
-
   return (
     <ItemCell
       cellStyle={[baseCellStyle, teleportedItemStyles]}
       decorationStyles={decorationStyles}
-      itemsOverridesStyle={itemsOverridesStyle}
-      onMeasure={(width, height) => {
-        onMeasure(width, height);
-        // Mark the teleported item as rendered only after it appeared
-        // on the screen and its layout calculation is completed
-        // (see useTeleportedItemStyles in which we set display property
-        // to 'none' when the animated style is not ready)
-        notifyRendered(teleportedItemId);
-      }}>
+      itemsOverridesStyle={itemsOverridesStyle}>
       <LayoutAnimationConfig skipEntering>{children}</LayoutAnimationConfig>
     </ItemCell>
   );