fix: messages content overlap when bottom sheet is shown

jest/setup.ts

@@ -78,6 +78,8 @@ jest.mock('react-native-reanimated', () => ({
     ...jest.requireActual<typeof Animated>('react-native-reanimated/mock'),
     createAnimatedPropAdapter: jest.fn,
     useReducedMotion: jest.fn,
+    useScrollViewOffset: jest.fn(() => 0),
+    useAnimatedRef: jest.fn(() => jest.fn()),
     LayoutAnimationConfig: jest.fn,
 }));
 
@@ -164,3 +166,9 @@ jest.mock('@libs/prepareRequestPayload/index.native.ts', () => ({
         return Promise.resolve(formData);
     }),
 }));
+
+jest.mock('@src/hooks/useWorkletStateMachine/executeOnUIRuntimeSync', () => ({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __esModule: true,
+    default: jest.fn(() => jest.fn()), // Return a function that returns a function
+}));

src/App.tsx

@@ -5,6 +5,7 @@ import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {PickerStateProvider} from 'react-native-picker-select';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import '../wdyr';
+import {ActionSheetAwareScrollViewProvider} from './components/ActionSheetAwareScrollView';
 import ActiveElementRoleProvider from './components/ActiveElementRoleProvider';
 import ColorSchemeWrapper from './components/ColorSchemeWrapper';
 import ComposeProviders from './components/ComposeProviders';
@@ -102,6 +103,7 @@ function App({url, hybridAppSettings, timestamp}: AppProps) {
                                 EnvironmentProvider,
                                 CustomStatusBarAndBackgroundContextProvider,
                                 ActiveElementRoleProvider,
+                                ActionSheetAwareScrollViewProvider,
                                 PlaybackContextProvider,
                                 FullScreenContextProvider,
                                 VolumeContextProvider,

src/components/ActionSheetAwareScrollView/ActionSheetAwareScrollViewContext.tsx

@@ -0,0 +1,141 @@
+import noop from 'lodash/noop';
+import PropTypes from 'prop-types';
+import type {PropsWithChildren} from 'react';
+import React, {createContext, useMemo} from 'react';
+import type {SharedValue} from 'react-native-reanimated';
+import type {ValueOf} from 'type-fest';
+import type {ActionWithPayload, State, StateMachine} from '@hooks/useWorkletStateMachine';
+import useWorkletStateMachine from '@hooks/useWorkletStateMachine';
+
+type MeasuredElements = {
+    frameY?: number;
+    popoverHeight?: number;
+    height?: number;
+    composerHeight?: number;
+};
+
+type Context = {
+    currentActionSheetState: SharedValue<State<MeasuredElements>>;
+    transitionActionSheetState: (action: ActionWithPayload) => void;
+    transitionActionSheetStateWorklet: (action: ActionWithPayload) => void;
+    resetStateMachine: () => void;
+};
+
+/** Holds all information that is needed to coordinate the state value for the action sheet state machine. */
+const currentActionSheetStateValue = {
+    previous: {
+        state: 'idle',
+        payload: null,
+    },
+    current: {
+        state: 'idle',
+        payload: null,
+    },
+};
+const defaultValue: Context = {
+    currentActionSheetState: {
+        value: currentActionSheetStateValue,
+        addListener: noop,
+        removeListener: noop,
+        modify: noop,
+        get: () => currentActionSheetStateValue,
+        set: 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',
+    HIDE_WITHOUT_ANIMATION: 'HIDE_WITHOUT_ANIMATION',
+    END_TRANSITION: 'END_TRANSITION',
+} as const;
+
+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',
+    MODAL_WITH_KEYBOARD_OPEN_DELETED: 'modalWithKeyboardOpenDeleted',
+} as const;
+
+const STATE_MACHINE: StateMachine<ValueOf<typeof States>, ValueOf<typeof Actions>> = {
+    [States.IDLE]: {
+        [Actions.OPEN_POPOVER]: States.POPOVER_OPEN,
+        [Actions.OPEN_KEYBOARD]: States.KEYBOARD_OPEN,
+        [Actions.MEASURE_POPOVER]: States.IDLE,
+        [Actions.MEASURE_COMPOSER]: States.IDLE,
+    },
+    [States.POPOVER_OPEN]: {
+        [Actions.CLOSE_POPOVER]: States.POPOVER_CLOSED,
+        [Actions.MEASURE_POPOVER]: States.POPOVER_OPEN,
+        [Actions.MEASURE_COMPOSER]: States.POPOVER_OPEN,
+        [Actions.POPOVER_ANY_ACTION]: States.POPOVER_CLOSED,
+        [Actions.HIDE_WITHOUT_ANIMATION]: States.IDLE,
+    },
+    [States.POPOVER_CLOSED]: {
+        [Actions.END_TRANSITION]: States.IDLE,
+    },
+    [States.KEYBOARD_OPEN]: {
+        [Actions.OPEN_KEYBOARD]: States.KEYBOARD_OPEN,
+        [Actions.OPEN_POPOVER]: States.KEYBOARD_POPOVER_OPEN,
+        [Actions.CLOSE_KEYBOARD]: States.IDLE,
+        [Actions.MEASURE_COMPOSER]: States.KEYBOARD_OPEN,
+    },
+    [States.KEYBOARD_POPOVER_OPEN]: {
+        [Actions.MEASURE_POPOVER]: States.KEYBOARD_POPOVER_OPEN,
+        [Actions.CLOSE_POPOVER]: States.KEYBOARD_CLOSED_POPOVER,
+        [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<typeof STATE_MACHINE, MeasuredElements>(STATE_MACHINE, {
+        previous: {
+            state: 'idle',
+            payload: 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};