feat: created hook useRefreshKeyAfterInteraction

Author: Eskalifer1

src/components/TestDrive/TestDriveBanner.tsx

@@ -1,13 +1,12 @@
-import React, {useEffect, useState} from 'react';
-import {InteractionManager, View} from 'react-native';
+import React from 'react';
+import {View} from 'react-native';
 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';
-import getPlatform from '@libs/getPlatform';
-import CONST from '@src/CONST';
 
 type TestDriveBannerProps = {
     /** Callback to finish the test drive */
@@ -18,31 +17,20 @@ function TestDriveBanner({onPress}: TestDriveBannerProps) {
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {translate} = useLocalize();
-    const [refreshKey, setRefreshKey] = useState(0);
 
     // 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
-    useEffect(() => {
-        const isDesktop = getPlatform() === CONST.PLATFORM.DESKTOP;
-
-        if (!isDesktop) {
-            return;
-        }
-
-        InteractionManager.runAfterInteractions(() => {
-            setRefreshKey((prev) => prev + 1);
-        });
-    }, []);
+    const key = useRefreshKeyAfterInteraction('key');
 
     return (
         <View
             style={[styles.highlightBG]}
             dataSet={{dragArea: false}}
-            key={refreshKey}
+            key={key}
         >
             <HeaderGap styles={styles.testDriveBannerGap} />
             <View style={[styles.gap2, styles.alignItemsCenter, styles.flexRow, styles.justifyContentCenter, styles.h10]}>

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;