When you long-press on a message in iOS mobile, the message moves out of the screen frame and is hidden (iOS only)

ios/Podfile.lock

@@ -1176,6 +1176,8 @@ PODS:
     - React-Core
   - react-native-key-command (1.0.6):
     - React-Core
+  - react-native-keyboard-controller (1.10.3):
+    - React-Core
   - react-native-netinfo (11.2.1):
     - React-Core
   - react-native-pager-view (6.2.2):
@@ -1522,6 +1524,7 @@ DEPENDENCIES:
   - "react-native-image-manipulator (from `../node_modules/@oguzhnatly/react-native-image-manipulator`)"
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - react-native-key-command (from `../node_modules/react-native-key-command`)
+  - react-native-keyboard-controller (from `../node_modules/react-native-keyboard-controller`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-pager-view (from `../node_modules/react-native-pager-view`)
   - react-native-pdf (from `../node_modules/react-native-pdf`)
@@ -1715,6 +1718,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-image-picker"
   react-native-key-command:
     :path: "../node_modules/react-native-key-command"
+  react-native-keyboard-controller:
+    :path: "../node_modules/react-native-keyboard-controller"
   react-native-netinfo:
     :path: "../node_modules/@react-native-community/netinfo"
   react-native-pager-view:
@@ -1909,6 +1914,7 @@ SPEC CHECKSUMS:
   react-native-image-manipulator: c48f64221cfcd46e9eec53619c4c0374f3328a56
   react-native-image-picker: c33d4e79f0a14a2b66e5065e14946ae63749660b
   react-native-key-command: 5af6ee30ff4932f78da6a2109017549042932aa5
+  react-native-keyboard-controller: 7f36466494e6b8d74f1d786bbd7a40a2273fef94
   react-native-netinfo: 8a7fd3f7130ef4ad2fb4276d5c9f8d3f28d2df3d
   react-native-pager-view: 02a5c4962530f7efc10dd51ee9cdabeff5e6c631
   react-native-pdf: b4ca3d37a9a86d9165287741c8b2ef4d8940c00e

package.json

@@ -139,6 +139,7 @@
     "react-native-image-picker": "^5.1.0",
     "react-native-image-size": "git+https://github.com/Expensify/react-native-image-size#8393b7e58df6ff65fd41f60aee8ece8822c91e2b",
     "react-native-key-command": "^1.0.6",
+    "react-native-keyboard-controller": "^1.10.3",
     "react-native-launch-arguments": "^4.0.2",
     "react-native-linear-gradient": "^2.8.1",
     "react-native-localize": "^2.2.6",

src/App.js

@@ -1,10 +1,11 @@
 import {PortalProvider} from '@gorhom/portal';
 import React from 'react';
-import {LogBox} from 'react-native';
+import {LogBox, Platform} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import Onyx from 'react-native-onyx';
 import {PickerStateProvider} from 'react-native-picker-select';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {KeyboardProvider} from 'react-native-keyboard-controller';
 import '../wdyr';
 import ColorSchemeWrapper from './components/ColorSchemeWrapper';
 import ComposeProviders from './components/ComposeProviders';
@@ -26,6 +27,7 @@ import {WindowDimensionsProvider} from './components/withWindowDimensions';
 import Expensify from './Expensify';
 import useDefaultDragAndDrop from './hooks/useDefaultDragAndDrop';
 import OnyxUpdateManager from './libs/actions/OnyxUpdateManager';
+import * as ActionSheetAwareScrollView from './components/ActionSheetAwareScrollView';
 import * as Session from './libs/actions/Session';
 import * as Environment from './libs/Environment/Environment';
 import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext';
@@ -69,14 +71,17 @@ function App() {
                     PickerStateProvider,
                     EnvironmentProvider,
                     CustomStatusBarAndBackgroundContextProvider,
+                    ActionSheetAwareScrollView.ActionSheetAwareScrollViewProvider,
                 ]}
             >
-                <CustomStatusBarAndBackground />
-                <ErrorBoundary errorMessage="NewExpensify crash caught by error boundary">
-                    <ColorSchemeWrapper>
-                        <Expensify />
-                    </ColorSchemeWrapper>
-                </ErrorBoundary>
+                <KeyboardProvider enabled={Platform.OS === "ios"}>
+                    <CustomStatusBarAndBackground />
+                    <ErrorBoundary errorMessage="NewExpensify crash caught by error boundary">
+                        <ColorSchemeWrapper>
+                            <Expensify />
+                        </ColorSchemeWrapper>
+                    </ErrorBoundary>
+                </KeyboardProvider>
             </ComposeProviders>
         </GestureHandlerRootView>
     );

src/components/ActionSheetAwareScrollView/ActionSheetAwareScrollViewContext.tsx

@@ -0,0 +1,198 @@
+import noop from "lodash/noop"
+import type {PropsWithChildren} from 'react';
+import React, { createContext, useMemo} from 'react';
+import PropTypes from 'prop-types';
+
+import type { ActionWithPayload, State } from '@hooks/useWorkletStateMachine';
+import useWorkletStateMachine from '@hooks/useWorkletStateMachine';
+import type { SharedValue } from 'react-native-reanimated';
+
+type Context = {
+    currentActionSheetState: SharedValue<State>,
+    transitionActionSheetState: (action: ActionWithPayload) => void,
+    transitionActionSheetStateWorklet: (action: ActionWithPayload) => void;
+    resetStateMachine: () => void;
+};
+const defaultValue: Context = {
+    currentActionSheetState: {
+        value: {
+            previous: null,
+            current: {
+                state: 'idle',
+                payload: null,
+            },
+        },
+        addListener: noop,
+        removeListener: noop,
+        modify: noop,
+    },
+    transitionActionSheetState: noop,
+    transitionActionSheetStateWorklet: noop,
+    resetStateMachine: noop,
+};
+
+const ActionSheetAwareScrollViewContext = createContext<Context>(defaultValue);
+
+const Actions = {
+    OPEN_KEYBOARD: 'KEYBOARD_OPEN',
+    CLOSE_KEYBOARD: 'CLOSE_KEYBOARD',
+    OPEN_POPOVER: 'OPEN_POPOVER',
+    CLOSE_POPOVER: 'CLOSE_POPOVER',
+    MEASURE_POPOVER: 'MEASURE_POPOVER',
+    MEASURE_COMPOSER: 'MEASURE_COMPOSER',
+    POPOVER_ANY_ACTION: 'POPOVER_ANY_ACTION',
+    OPEN_EMOJI_PICKER_POPOVER: 'OPEN_EMOJI_PICKER_POPOVER',
+    OPEN_EMOJI_PICKER_POPOVER_STANDALONE: 'OPEN_EMOJI_PICKER_POPOVER_STANDALONE',
+    CLOSE_EMOJI_PICKER_POPOVER: 'CLOSE_EMOJI_PICKER_POPOVER',
+    MEASURE_EMOJI_PICKER_POPOVER: 'MEASURE_EMOJI_PICKER_POPOVER',
+    HIDE_WITHOUT_ANIMATION: 'HIDE_WITHOUT_ANIMATION',
+    EDIT_REPORT: 'EDIT_REPORT',
+    SHOW_DELETE_CONFIRM_MODAL: 'SHOW_DELETE_CONFIRM_MODAL',
+    END_TRANSITION: 'END_TRANSITION',
+    OPEN_CALL_POPOVER: 'OPEN_CALL_POPOVER',
+    CLOSE_CONFIRM_MODAL: 'CLOSE_CONFIRM_MODAL',
+    MEASURE_CONFIRM_MODAL: 'MEASURE_CONFIRM_MODAL',
+    SHOW_ATTACHMENTS_POPOVER: 'SHOW_ATTACHMENTS_POPOVER',
+    CLOSE_ATTACHMENTS_POPOVER: 'CLOSE_ATTACHMENTS_POPOVER',
+    SHOW_ATTACHMENTS_PICKER_POPOVER: 'SHOW_ATTACHMENTS_PICKER_POPOVER',
+    CLOSE_EMOJI_PICKER_POPOVER_STANDALONE: 'CLOSE_EMOJI_PICKER_POPOVER_STANDALONE',
+    MEASURE_CALL_POPOVER: 'MEASURE_CALL_POPOVER',
+    CLOSE_CALL_POPOVER: 'CLOSE_CALL_POPOVER'
+};
+
+const States = {
+    IDLE: 'idle',
+    KEYBOARD_OPEN: 'keyboardOpen',
+    POPOVER_OPEN: 'popoverOpen',
+    POPOVER_CLOSED: 'popoverClosed',
+    KEYBOARD_POPOVER_CLOSED: 'keyboardPopoverClosed',
+    KEYBOARD_POPOVER_OPEN: 'keyboardPopoverOpen',
+    KEYBOARD_CLOSED_POPOVER: 'keyboardClosingPopover',
+    POPOVER_MEASURED: 'popoverMeasured',
+    EMOJI_PICKER_POPOVER_OPEN: 'emojiPickerPopoverOpen',
+    DELETE_MODAL_OPEN: 'deleteModalOpen',
+    DELETE_MODAL_WITH_KEYBOARD_OPEN: 'deleteModalWithKeyboardOpen',
+    EMOJI_PICKER_POPOVER_WITH_KEYBOARD_OPEN: 'emojiPickerPopoverWithKeyboardOpen',
+    EMOJI_PICKER_WITH_KEYBOARD_OPEN: 'emojiPickerWithKeyboardOpen',
+    CALL_POPOVER_WITH_KEYBOARD_OPEN: 'callPopoverWithKeyboardOpen',
+    CALL_POPOVER_WITH_KEYBOARD_CLOSED: 'callPopoverWithKeyboardClosed',
+    ATTACHMENTS_POPOVER_WITH_KEYBOARD_OPEN: 'attachmentsPopoverWithKeyboardOpen',
+    ATTACHMENTS_POPOVER_WITH_KEYBOARD_CLOSED: 'attachmentsPopoverWithKeyboardClosed',
+    MODAL_DELETED: 'modalDeleted',
+    MODAL_WITH_KEYBOARD_OPEN_DELETED: 'modalWithKeyboardOpenDeleted'
+};
+
+const STATE_MACHINE = {
+    [States.IDLE]: {
+        [Actions.OPEN_POPOVER]: States.POPOVER_OPEN,
+        [Actions.OPEN_KEYBOARD]: States.KEYBOARD_OPEN,
+        [Actions.MEASURE_POPOVER]: States.IDLE,
+        [Actions.MEASURE_COMPOSER]: States.IDLE,
+        [Actions.OPEN_EMOJI_PICKER_POPOVER]: States.EMOJI_PICKER_POPOVER_OPEN,
+        [Actions.SHOW_ATTACHMENTS_PICKER_POPOVER]: States.ATTACHMENTS_POPOVER_WITH_KEYBOARD_OPEN,
+    },
+    [States.POPOVER_OPEN]: {
+        [Actions.CLOSE_POPOVER]: States.POPOVER_CLOSED,
+        [Actions.MEASURE_POPOVER]: States.POPOVER_OPEN,
+        [Actions.MEASURE_COMPOSER]: States.POPOVER_OPEN,
+        [Actions.OPEN_EMOJI_PICKER_POPOVER]: States.EMOJI_PICKER_POPOVER_OPEN,
+        [Actions.POPOVER_ANY_ACTION]: States.POPOVER_CLOSED,
+        [Actions.HIDE_WITHOUT_ANIMATION]: States.IDLE,
+        [Actions.EDIT_REPORT]: States.IDLE,
+        [Actions.SHOW_DELETE_CONFIRM_MODAL]: States.MODAL_DELETED,
+    },
+    [States.POPOVER_CLOSED]: {
+        [Actions.END_TRANSITION]: States.IDLE,
+    },
+    [States.EMOJI_PICKER_POPOVER_OPEN]: {
+        [Actions.MEASURE_EMOJI_PICKER_POPOVER]: States.EMOJI_PICKER_POPOVER_OPEN,
+        [Actions.CLOSE_EMOJI_PICKER_POPOVER]: States.POPOVER_CLOSED,
+    },
+    [States.MODAL_DELETED]: {
+        [Actions.MEASURE_CONFIRM_MODAL]: States.MODAL_DELETED,
+        [Actions.CLOSE_CONFIRM_MODAL]: States.POPOVER_CLOSED,
+    },
+    [States.KEYBOARD_OPEN]: {
+        [Actions.OPEN_KEYBOARD]: States.KEYBOARD_OPEN,
+        [Actions.OPEN_POPOVER]: States.KEYBOARD_POPOVER_OPEN,
+        [Actions.OPEN_EMOJI_PICKER_POPOVER]: States.KEYBOARD_POPOVER_OPEN,
+        [Actions.OPEN_EMOJI_PICKER_POPOVER_STANDALONE]: States.EMOJI_PICKER_WITH_KEYBOARD_OPEN,
+        [Actions.CLOSE_KEYBOARD]: States.IDLE,
+        [Actions.OPEN_CALL_POPOVER]: States.CALL_POPOVER_WITH_KEYBOARD_OPEN,
+        [Actions.SHOW_ATTACHMENTS_POPOVER]: States.ATTACHMENTS_POPOVER_WITH_KEYBOARD_OPEN,
+        [Actions.SHOW_ATTACHMENTS_PICKER_POPOVER]: States.ATTACHMENTS_POPOVER_WITH_KEYBOARD_OPEN,
+        [Actions.MEASURE_COMPOSER]: States.KEYBOARD_OPEN,
+    },
+    [States.KEYBOARD_POPOVER_OPEN]: {
+        [Actions.MEASURE_POPOVER]: States.KEYBOARD_POPOVER_OPEN,
+        [Actions.MEASURE_COMPOSER]: States.KEYBOARD_POPOVER_OPEN,
+        [Actions.CLOSE_POPOVER]: States.KEYBOARD_CLOSED_POPOVER,
+        [Actions.CLOSE_EMOJI_PICKER_POPOVER]: States.KEYBOARD_CLOSED_POPOVER,
+        [Actions.MEASURE_EMOJI_PICKER_POPOVER]: States.KEYBOARD_POPOVER_OPEN,
+        [Actions.OPEN_EMOJI_PICKER_POPOVER]: States.EMOJI_PICKER_POPOVER_WITH_KEYBOARD_OPEN,
+        [Actions.SHOW_DELETE_CONFIRM_MODAL]: States.MODAL_WITH_KEYBOARD_OPEN_DELETED,
+    },
+    [States.MODAL_WITH_KEYBOARD_OPEN_DELETED]: {
+        [Actions.MEASURE_CONFIRM_MODAL]: States.MODAL_WITH_KEYBOARD_OPEN_DELETED,
+        [Actions.CLOSE_CONFIRM_MODAL]: States.KEYBOARD_CLOSED_POPOVER,
+    },
+    [States.EMOJI_PICKER_POPOVER_WITH_KEYBOARD_OPEN]: {
+        [Actions.MEASURE_EMOJI_PICKER_POPOVER]: States.EMOJI_PICKER_POPOVER_WITH_KEYBOARD_OPEN,
+        [Actions.CLOSE_EMOJI_PICKER_POPOVER]: States.KEYBOARD_CLOSED_POPOVER,
+    },
+    [States.EMOJI_PICKER_WITH_KEYBOARD_OPEN]: {
+        [Actions.MEASURE_EMOJI_PICKER_POPOVER]: States.EMOJI_PICKER_WITH_KEYBOARD_OPEN,
+        [Actions.CLOSE_EMOJI_PICKER_POPOVER_STANDALONE]: States.KEYBOARD_POPOVER_CLOSED,
+    },
+    [States.CALL_POPOVER_WITH_KEYBOARD_OPEN]: {
+        [Actions.MEASURE_POPOVER]: States.CALL_POPOVER_WITH_KEYBOARD_OPEN,
+        [Actions.MEASURE_CALL_POPOVER]: States.CALL_POPOVER_WITH_KEYBOARD_OPEN,
+        [Actions.CLOSE_CALL_POPOVER]: States.CALL_POPOVER_WITH_KEYBOARD_CLOSED,
+    },
+    [States.CALL_POPOVER_WITH_KEYBOARD_CLOSED]: {
+        [Actions.OPEN_KEYBOARD]: States.KEYBOARD_OPEN,
+    },
+    [States.ATTACHMENTS_POPOVER_WITH_KEYBOARD_OPEN]: {
+        [Actions.MEASURE_POPOVER]: States.ATTACHMENTS_POPOVER_WITH_KEYBOARD_OPEN,
+        [Actions.MEASURE_COMPOSER]: States.ATTACHMENTS_POPOVER_WITH_KEYBOARD_OPEN,
+        [Actions.CLOSE_ATTACHMENTS_POPOVER]: States.ATTACHMENTS_POPOVER_WITH_KEYBOARD_CLOSED,
+    },
+    [States.ATTACHMENTS_POPOVER_WITH_KEYBOARD_CLOSED]: {
+        [Actions.OPEN_KEYBOARD]: States.KEYBOARD_OPEN,
+    },
+    [States.KEYBOARD_POPOVER_CLOSED]: {
+        [Actions.OPEN_KEYBOARD]: States.KEYBOARD_OPEN,
+    },
+    [States.KEYBOARD_CLOSED_POPOVER]: {
+        [Actions.OPEN_KEYBOARD]: States.KEYBOARD_OPEN,
+        [Actions.END_TRANSITION]: States.KEYBOARD_OPEN,
+    },
+};
+
+function ActionSheetAwareScrollViewProvider(props: PropsWithChildren<unknown>) {
+    const {currentState, transition, transitionWorklet, reset} = useWorkletStateMachine(STATE_MACHINE, {
+        previous: null,
+        current: {
+            state: 'idle',
+            payload: null,
+        },
+    });
+
+    const value = useMemo(
+        () => ({
+            currentActionSheetState: currentState,
+            transitionActionSheetState: transition,
+            transitionActionSheetStateWorklet: transitionWorklet,
+            resetStateMachine: reset,
+        }),
+        [currentState, reset, transition, transitionWorklet],
+    );
+
+    return <ActionSheetAwareScrollViewContext.Provider value={value}>{props.children}</ActionSheetAwareScrollViewContext.Provider>;
+}
+
+ActionSheetAwareScrollViewProvider.propTypes = {
+    children: PropTypes.node.isRequired,
+};
+
+export {ActionSheetAwareScrollViewContext, ActionSheetAwareScrollViewProvider, Actions, States};