diff --git a/src/libs/DoInteractionTask/index.desktop.ts b/src/libs/DoInteractionTask/index.desktop.ts new file mode 100644 index 000000000000..73b3cb19ec32 --- /dev/null +++ b/src/libs/DoInteractionTask/index.desktop.ts @@ -0,0 +1,10 @@ +import {InteractionManager} from 'react-native'; + +// For desktop, we should call the callback after all interactions to prevent freezing. See more detail in https://github.com/Expensify/App/issues/28916 +function doInteractionTask(callback: () => void) { + return InteractionManager.runAfterInteractions(() => { + callback(); + }); +} + +export default doInteractionTask; diff --git a/src/libs/DoInteractionTask/index.ts b/src/libs/DoInteractionTask/index.ts new file mode 100644 index 000000000000..dffbb0562b98 --- /dev/null +++ b/src/libs/DoInteractionTask/index.ts @@ -0,0 +1,6 @@ +function doInteractionTask(callback: () => void) { + callback(); + return null; +} + +export default doInteractionTask; diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js index 3a58727eddb7..b90ce6bbc247 100755 --- a/src/pages/NewChatPage.js +++ b/src/pages/NewChatPage.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; -import {InteractionManager, View} from 'react-native'; +import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; @@ -15,6 +15,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import compose from '@libs/compose'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; +import doInteractionTask from '@libs/DoInteractionTask'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; import variables from '@styles/variables'; @@ -209,11 +210,16 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i }, [reports, personalDetails, searchTerm]); useEffect(() => { - const interactionTask = InteractionManager.runAfterInteractions(() => { + const interactionTask = doInteractionTask(() => { setDidScreenTransitionEnd(true); }); - return interactionTask.cancel; + return () => { + if (!interactionTask) { + return; + } + interactionTask.cancel(); + }; }, []); useEffect(() => {