Merge pull request Expensify#68610 from Eskalifer1/fix/68139

fix/68139: Add dragArea false to TestDriveBanner

Author: marcaaron

src/components/TestDrive/TestDriveBanner.tsx

@@ -4,6 +4,7 @@ import Button from '@components/Button';
 import HeaderGap from '@components/HeaderGap';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useRefreshKeyAfterInteraction from '@hooks/useRefreshKeyAfterInteraction';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 
@@ -17,8 +18,20 @@ function TestDriveBanner({onPress}: TestDriveBannerProps) {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {translate} = useLocalize();
 
+    // Forcing a key change here forces React to fully re-mount this component
+    // This helps reset the underlying drag region boundaries so that
+    // interactive elements (like buttons) become clickable again after certain UI changes.
+    // Without this, the OS-level drag region overlap clickable elements,
+    // making them unresponsive until the container is refreshed.
+    // For more context: https://github.com/Expensify/App/issues/68139
+    const key = useRefreshKeyAfterInteraction('test-drive-banner');
+
     return (
-        <View style={styles.highlightBG}>
+        <View
+            style={[styles.highlightBG]}
+            dataSet={{dragArea: false}}
+            key={key}
+        >
             <HeaderGap styles={styles.testDriveBannerGap} />
             <View style={[styles.gap2, styles.alignItemsCenter, styles.flexRow, styles.justifyContentCenter, styles.h10]}>
                 <Text>

src/hooks/useRefreshKeyAfterInteraction/index.desktop.tsx

@@ -0,0 +1,16 @@
+import {useEffect, useState} from 'react';
+import {InteractionManager} from 'react-native';
+
+function useRefreshKeyAfterInteraction(defaultValue: string) {
+    const [counter, setCounter] = useState(0);
+
+    useEffect(() => {
+        InteractionManager.runAfterInteractions(() => {
+            setCounter((prev) => prev + 1);
+        });
+    }, []);
+
+    return `${defaultValue}-${counter}`;
+}
+
+export default useRefreshKeyAfterInteraction;

src/hooks/useRefreshKeyAfterInteraction/index.tsx

@@ -0,0 +1,5 @@
+function useRefreshKeyAfterInteraction(defaultValue: string) {
+    return defaultValue;
+}
+
+export default useRefreshKeyAfterInteraction;