fix: messages content overlap when bottom sheet is shown

patches/react-native-reanimated+3.16.3+001+mock-useDerivedValue-getter.patch

@@ -0,0 +1,18 @@
+diff --git a/node_modules/react-native-reanimated/src/mock.ts b/node_modules/react-native-reanimated/src/mock.ts
+index 3d8e3f8..5eba613 100644
+--- a/node_modules/react-native-reanimated/src/mock.ts
++++ b/node_modules/react-native-reanimated/src/mock.ts
+@@ -87,7 +87,12 @@ const hook = {
+   useAnimatedReaction: NOOP,
+   useAnimatedRef: () => ({ current: null }),
+   useAnimatedScrollHandler: NOOP_FACTORY,
+-  useDerivedValue: <Value>(processor: () => Value) => ({ value: processor() }),
++  // https://github.com/software-mansion/react-native-reanimated/pull/6809
++  useDerivedValue: <Value>(processor: () => Value) => {
++    const result = processor();
++
++    return { value: result, get: () => result };
++  },
+   useAnimatedSensor: () => ({
+     sensor: {
+       value: {

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 * as ActionSheetAwareScrollView from './components/ActionSheetAwareScrollView';
 import ActiveElementRoleProvider from './components/ActiveElementRoleProvider';
 import ActiveWorkspaceContextProvider from './components/ActiveWorkspaceProvider';
 import ColorSchemeWrapper from './components/ColorSchemeWrapper';
@@ -88,6 +89,7 @@ function App({url}: AppProps) {
                                 CustomStatusBarAndBackgroundContextProvider,
                                 ActiveElementRoleProvider,
                                 ActiveWorkspaceContextProvider,
+                                ActionSheetAwareScrollView.ActionSheetAwareScrollViewProvider,
                                 ReportIDsContextProvider,
                                 PlaybackContextProvider,
                                 FullScreenContextProvider,

src/components/ActionSheetAwareScrollView/ActionSheetAwareScrollViewContext.tsx

@@ -0,0 +1,139 @@
+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 {ActionWithPayload, State} from '@hooks/useWorkletStateMachine';
+import useWorkletStateMachine from '@hooks/useWorkletStateMachine';
+
+type MeasuredElements = {
+    fy?: number;
+    popoverHeight?: number;
+    height?: number;
+    composerHeight?: number;
+};
+
+type Context = {
+    currentActionSheetState: SharedValue<State<MeasuredElements>>;
+    transitionActionSheetState: (action: ActionWithPayload) => void;
+    transitionActionSheetStateWorklet: (action: ActionWithPayload) => void;
+    resetStateMachine: () => void;
+};
+
+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',
+};
+
+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',
+};
+
+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,
+    },
+    [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<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};

src/components/ActionSheetAwareScrollView/ActionSheetKeyboardSpace.tsx

@@ -0,0 +1,223 @@
+import React, {useContext, useEffect} from 'react';
+import type {ViewProps} from 'react-native';
+import {useKeyboardHandler} from 'react-native-keyboard-controller';
+import Reanimated, {useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring, withTiming} from 'react-native-reanimated';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import {Actions, ActionSheetAwareScrollViewContext, States} from './ActionSheetAwareScrollViewContext';
+
+const KeyboardState = {
+    UNKNOWN: 0,
+    OPENING: 1,
+    OPEN: 2,
+    CLOSING: 3,
+    CLOSED: 4,
+};
+
+const SPRING_CONFIG = {
+    mass: 3,
+    stiffness: 1000,
+    damping: 500,
+};
+
+const useAnimatedKeyboard = () => {
+    const state = useSharedValue(KeyboardState.UNKNOWN);
+    const height = useSharedValue(0);
+    const lastHeight = useSharedValue(0);
+    const heightWhenOpened = useSharedValue(0);
+
+    useKeyboardHandler(
+        {
+            onStart: (e) => {
+                'worklet';
+
+                // Save the last keyboard height
+                if (e.height !== 0) {
+                    heightWhenOpened.set(e.height);
+                    height.set(0);
+                }
+                height.set(heightWhenOpened.get());
+                lastHeight.set(e.height);
+                state.set(e.height > 0 ? KeyboardState.OPENING : KeyboardState.CLOSING);
+            },
+            onMove: (e) => {
+                'worklet';
+
+                height.set(e.height);
+            },
+            onEnd: (e) => {
+                'worklet';
+
+                state.set(e.height > 0 ? KeyboardState.OPEN : KeyboardState.CLOSED);
+                height.set(e.height);
+            },
+        },
+        [],
+    );
+
+    return {state, height, heightWhenOpened};
+};
+
+const useSafeAreaPaddings = () => {
+    const StyleUtils = useStyleUtils();
+    const insets = useSafeAreaInsets();
+    const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets ?? undefined);
+
+    return {top: paddingTop, bottom: paddingBottom};
+};
+
+function ActionSheetKeyboardSpace(props: ViewProps) {
+    const styles = useThemeStyles();
+    const safeArea = useSafeAreaPaddings();
+    const keyboard = useAnimatedKeyboard();
+
+    // Similar to using `global` in worklet but it's just a local object
+    const syncLocalWorkletState = useSharedValue(KeyboardState.UNKNOWN);
+    const {windowHeight} = useWindowDimensions();
+    const {currentActionSheetState, transitionActionSheetStateWorklet: transition, resetStateMachine} = useContext(ActionSheetAwareScrollViewContext);
+
+    // Reset state machine when component unmounts
+    // eslint-disable-next-line arrow-body-style
+    useEffect(() => {
+        return () => resetStateMachine();
+    }, [resetStateMachine]);
+
+    useAnimatedReaction(
+        () => keyboard.state.get(),
+        (lastState) => {
+            if (lastState === syncLocalWorkletState.get()) {
+                return;
+            }
+            // eslint-disable-next-line react-compiler/react-compiler
+            syncLocalWorkletState.set(lastState);
+
+            if (lastState === KeyboardState.OPEN) {
+                transition({type: Actions.OPEN_KEYBOARD});
+            } else if (lastState === KeyboardState.CLOSED) {
+                transition({type: Actions.CLOSE_KEYBOARD});
+            }
+        },
+        [],
+    );
+
+    const translateY = useDerivedValue(() => {
+        const {current, previous} = currentActionSheetState.get();
+
+        // We don't need to run any additional logic. it will always return 0 for idle state
+        if (current.state === States.IDLE) {
+            return withSpring(0, SPRING_CONFIG);
+        }
+
+        const keyboardHeight = keyboard.height.get() === 0 ? 0 : keyboard.height.get() - safeArea.bottom;
+
+        // Sometimes we need to know the last keyboard height
+        const lastKeyboardHeight = keyboard.heightWhenOpened.get() - safeArea.bottom;
+        const {popoverHeight = 0, fy, height} = current.payload ?? {};
+        const invertedKeyboardHeight = keyboard.state.get() === KeyboardState.CLOSED ? lastKeyboardHeight : 0;
+        const elementOffset = fy !== undefined && height !== undefined && popoverHeight !== undefined ? fy + safeArea.top + height - (windowHeight - popoverHeight) : 0;
+
+        // when the state is not idle we know for sure we have the previous state
+        const previousPayload = previous.payload ?? {};
+        const previousElementOffset =
+            previousPayload.fy !== undefined && previousPayload.height !== undefined && previousPayload.popoverHeight !== undefined
+                ? previousPayload.fy + safeArea.top + previousPayload.height - (windowHeight - previousPayload.popoverHeight)
+                : 0;
+
+        const isOpeningKeyboard = syncLocalWorkletState.get() === 1;
+        const isClosingKeyboard = syncLocalWorkletState.get() === 3;
+        const isClosedKeyboard = syncLocalWorkletState.get() === 4;
+
+        // Depending on the current and sometimes previous state we can return
+        // either animation or just a value
+        switch (current.state) {
+            case States.KEYBOARD_OPEN: {
+                if (isClosedKeyboard || isOpeningKeyboard) {
+                    return lastKeyboardHeight - keyboardHeight;
+                }
+                if (previous.state === States.KEYBOARD_CLOSED_POPOVER || (previous.state === States.KEYBOARD_OPEN && elementOffset < 0)) {
+                    return Math.max(keyboard.heightWhenOpened.get() - keyboard.height.get() - safeArea.bottom, 0) + Math.max(elementOffset, 0);
+                }
+                return withSpring(0, SPRING_CONFIG);
+            }
+
+            case States.POPOVER_CLOSED: {
+                return withSpring(0, SPRING_CONFIG, () => {
+                    transition({
+                        type: Actions.END_TRANSITION,
+                    });
+                });
+            }
+
+            case States.POPOVER_OPEN: {
+                if (popoverHeight) {
+                    if (previousElementOffset !== 0 || elementOffset > previousElementOffset) {
+                        return withSpring(elementOffset < 0 ? 0 : elementOffset, SPRING_CONFIG);
+                    }
+
+                    return withSpring(Math.max(previousElementOffset, 0), SPRING_CONFIG);
+                }
+
+                return 0;
+            }
+
+            case States.KEYBOARD_POPOVER_OPEN: {
+                if (keyboard.state.get() === KeyboardState.OPEN) {
+                    return withSpring(0, SPRING_CONFIG);
+                }
+
+                const nextOffset = elementOffset + lastKeyboardHeight;
+
+                if (keyboard.state.get() === KeyboardState.CLOSED && nextOffset > invertedKeyboardHeight) {
+                    return withSpring(nextOffset < 0 ? 0 : nextOffset, SPRING_CONFIG);
+                }
+
+                if (elementOffset < 0) {
+                    return isClosingKeyboard ? 0 : lastKeyboardHeight - keyboardHeight;
+                }
+
+                return lastKeyboardHeight;
+            }
+
+            case States.KEYBOARD_CLOSED_POPOVER: {
+                if (elementOffset < 0) {
+                    transition({type: Actions.END_TRANSITION});
+
+                    return 0;
+                }
+
+                if (keyboard.state.get() === KeyboardState.CLOSED) {
+                    return elementOffset + lastKeyboardHeight;
+                }
+
+                if (keyboard.height.get() > 0) {
+                    return keyboard.heightWhenOpened.get() - keyboard.height.get() + elementOffset;
+                }
+
+                return withTiming(elementOffset + lastKeyboardHeight, {
+                    duration: 0,
+                });
+            }
+
+            default:
+                return 0;
+        }
+    }, []);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        paddingTop: translateY.get(),
+    }));
+
+    return (
+        <Reanimated.View
+            style={[styles.flex1, animatedStyle]}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+        />
+    );
+}
+
+ActionSheetKeyboardSpace.displayName = 'ActionSheetKeyboardSpace';
+
+export default ActionSheetKeyboardSpace;