From e275bd060a6abd03cbe91fd89bb78bcb2c9bd53c Mon Sep 17 00:00:00 2001 From: Ashoat Tevosyan Date: Tue, 18 Jul 2023 22:29:30 -0400 Subject: [PATCH] [native] Disable stack gestures while editing messages Summary: See [ENG-4412](https://linear.app/comm/issue/ENG-4412/swipe-to-go-back-while-editing-message-on-native-breaks-navigation) to see the bug this diff solves. I was unable to disable gestures using `gestureEnabled` for some reason. This appears to be a React Navigation bug reported [here](https://github.com/react-navigation/react-navigation/issues/10394). I tried disabling gestures via `options` for `MessageList`, `screenOptions` for `Chat.Navigator`, and even using an effect that calls `setOptions` from `ChatInputBar`. None of them worked. Instead, I found that setting `gestureResponseDistance` to 0 has the desired effect (disabling gestures). Test Plan: Confirm that I can no longer use gestures to go back while in edit mode Reviewers: atul, tomek, kamil Reviewed By: kamil Differential Revision: https://phab.comm.dev/D8543 --- native/chat/chat.react.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/native/chat/chat.react.js b/native/chat/chat.react.js index 2c79057126..760ebea750 100644 --- a/native/chat/chat.react.js +++ b/native/chat/chat.react.js @@ -37,6 +37,7 @@ import ComposeSubchannel from './compose-subchannel.react.js'; import ComposeThreadButton from './compose-thread-button.react.js'; import FullScreenThreadMediaGallery from './fullscreen-thread-media-gallery.react.js'; import HomeChatThreadList from './home-chat-thread-list.react.js'; +import { MessageEditingContext } from './message-editing-context.react.js'; import MessageListContainer from './message-list-container.react.js'; import MessageListHeaderTitle from './message-list-header-title.react.js'; import MessageResultsScreen from './message-results-screen.react.js'; @@ -341,6 +342,10 @@ export default function ChatComponent(props: Props): React.Node { [props.navigation], ); + const messageEditingContext = React.useContext(MessageEditingContext); + const editState = messageEditingContext?.editState; + const editMode = !!editState?.editedMessage; + const { width: screenWidth } = useWindowDimensions(); const screenOptions = React.useMemo( () => ({ @@ -352,9 +357,9 @@ export default function ChatComponent(props: Props): React.Node { borderBottomWidth: 1, }, gestureEnabled: true, - gestureResponseDistance: screenWidth, + gestureResponseDistance: editMode ? 0 : screenWidth, }), - [colors.tabBarBackground, headerLeftButton, screenWidth], + [colors.tabBarBackground, headerLeftButton, screenWidth, editMode], ); const chatThreadListOptions = React.useCallback(