Fix Post Input and drawers gesture conflict (#5762) (#5763)

(cherry picked from commit e5142f8524)

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>

app/components/post_draft/__snapshots__/post_draft.test.js.snap

@@ -304,6 +304,8 @@ exports[`PostDraft Should render the DraftInput 1`] = `
           onEndEditing={[Function]}
           onFocus={[Function]}
           onPaste={[Function]}
+          onPressIn={[Function]}
+          onPressOut={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}

app/components/post_draft/post_input/__snapshots__/post_input.test.js.snap

@@ -13,6 +13,8 @@ exports[`PostInput should match, full snapshot 1`] = `
   onChangeText={[Function]}
   onEndEditing={[Function]}
   onPaste={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
   onSelectionChange={[Function]}
   placeholder="Write to Test Channel"
   placeholderTextColor="rgba(63,67,80,0.5)"

app/components/post_draft/post_input/post_input.js

@@ -4,7 +4,7 @@
 import PropTypes from 'prop-types';
 import React, {PureComponent} from 'react';
 import {intlShape} from 'react-intl';
-import {Alert, AppState, findNodeHandle, Keyboard, NativeModules, Platform} from 'react-native';
+import {Alert, AppState, DeviceEventEmitter, findNodeHandle, Keyboard, NativeModules, Platform} from 'react-native';
 
 import {NavigationTypes} from '@constants';
 import DEVICE from '@constants/device';
@@ -285,6 +285,18 @@ export default class PostInput extends PureComponent {
         }
     }
 
+    onPressIn = () => {
+        if (Platform.OS === 'ios') {
+            DeviceEventEmitter.emit(NavigationTypes.DRAWER, 'locked-closed');
+        }
+    };
+
+    onPressOut = () => {
+        if (Platform.OS === 'ios') {
+            DeviceEventEmitter.emit(NavigationTypes.DRAWER, 'unlocked');
+        }
+    };
+
     render() {
         const {formatMessage} = this.context.intl;
         const {testID, channelDisplayName, screenId, isLandscape, theme} = this.props;
@@ -318,6 +330,8 @@ export default class PostInput extends PureComponent {
                 autoCompleteType='off'
                 keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
                 screenId={screenId}
+                onPressIn={this.onPressIn}
+                onPressOut={this.onPressOut}
             />
         );
     }

app/components/sidebars/drawer_layout/index.tsx

@@ -1,9 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useEffect, useState} from 'react';
+import {DeviceEventEmitter, EventSubscription, Platform} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
+import NavigationTypes from '@constants/navigation';
+
 import DrawerLayout from './drawer_layout';
 
 export const DRAWER_INITIAL_OFFSET = 40;
@@ -30,11 +33,23 @@ interface DrawerLayoutAdapterProps {
 const DrawerLayoutAdapter = (props: DrawerLayoutAdapterProps) => {
     const insets = useSafeAreaInsets();
     const horizontal = insets.left + insets.right;
+    const [drawerLockMode, setDrawerLockMode] = useState(props.drawerLockMode || 'unlocked');
+
+    useEffect(() => {
+        let listener: EventSubscription | undefined;
+        if (Platform.OS === 'ios') {
+            listener = DeviceEventEmitter.addListener(NavigationTypes.DRAWER, (value) => {
+                setDrawerLockMode(value);
+            });
+        }
+
+        return () => listener?.remove();
+    });
 
     return (
         <DrawerLayout
             drawerBackgroundColor={props.drawerBackgroundColor}
-            drawerLockMode={props.drawerLockMode}
+            drawerLockMode={drawerLockMode}
             drawerPosition={props.drawerPosition}
             drawerWidth={props.drawerWidth - horizontal}
             isTablet={props.isTablet}

app/constants/navigation.js

@@ -17,6 +17,7 @@ const NavigationTypes = keyMirror({
     CLOSE_SETTINGS_SIDEBAR: null,
     BLUR_POST_DRAFT: null,
     CLOSE_SLIDE_UP: null,
+    DRAWER: null,
 });
 
 export default NavigationTypes;

ios/Podfile.lock

@@ -258,7 +258,7 @@ PODS:
     - React-Core
   - react-native-passcode-status (1.1.2):
     - React
-  - react-native-paste-input (0.2.0):
+  - react-native-paste-input (0.3.0):
     - React-Core
     - Swime (= 3.0.6)
   - react-native-safe-area (0.5.1):
@@ -744,7 +744,7 @@ SPEC CHECKSUMS:
   react-native-netinfo: 92e6e4476eb8bf6fc2d7c0a6ca0a1406f663d73a
   react-native-notifications: 97c14bf84c64bd6a6eb7bdcdb916036d93d33428
   react-native-passcode-status: e78f76b3c8db613e6ced6bd40b54aa4f53374173
-  react-native-paste-input: 5da631cf8210a9e61d577f987f7fb8b0ef966121
+  react-native-paste-input: 9e6e9d6f5aff6b0a51c25c0402ac2a75cdffbbcc
   react-native-safe-area: e8230b0017d76c00de6b01e2412dcf86b127c6a3
   react-native-safe-area-context: 584dc04881deb49474363f3be89e4ca0e854c057
   react-native-startup-time: 1a068b744ce5097a85ebe0fbff691b05961c324d

package-lock.json

@@ -10,7 +10,7 @@
       "license": "Apache 2.0",
       "dependencies": {
         "@babel/runtime": "7.15.4",
-        "@mattermost/react-native-paste-input": "0.2.0",
+        "@mattermost/react-native-paste-input": "0.3.0",
         "@react-native-community/async-storage": "1.12.1",
         "@react-native-community/cameraroll": "4.0.4",
         "@react-native-community/clipboard": "1.5.1",
@@ -2865,9 +2865,9 @@
       }
     },
     "node_modules/@mattermost/react-native-paste-input": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@mattermost/react-native-paste-input/-/react-native-paste-input-0.2.0.tgz",
-      "integrity": "sha512-gUe80o0vLej5K+AenfCwfnRiwbj04bQ28epzjmcIA6Djc3monvbrdvONi/+SenTsbcTpuIFQOD6+ZpfAcOwyAQ==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@mattermost/react-native-paste-input/-/react-native-paste-input-0.3.0.tgz",
+      "integrity": "sha512-EMYdmb6Q8tRzVXd+pENbtEz78OgUe+d1wGF200FSo3jaj5lqLX7ppsY4scVrTvY5slcc7fwQmMb726kIqyhJxA==",
       "peerDependencies": {
         "react": "*",
         "react-native": "*"
@@ -35080,9 +35080,9 @@
       }
     },
     "@mattermost/react-native-paste-input": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@mattermost/react-native-paste-input/-/react-native-paste-input-0.2.0.tgz",
-      "integrity": "sha512-gUe80o0vLej5K+AenfCwfnRiwbj04bQ28epzjmcIA6Djc3monvbrdvONi/+SenTsbcTpuIFQOD6+ZpfAcOwyAQ==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@mattermost/react-native-paste-input/-/react-native-paste-input-0.3.0.tgz",
+      "integrity": "sha512-EMYdmb6Q8tRzVXd+pENbtEz78OgUe+d1wGF200FSo3jaj5lqLX7ppsY4scVrTvY5slcc7fwQmMb726kIqyhJxA==",
       "requires": {}
     },
     "@mrmlnc/readdir-enhanced": {

package.json

@@ -8,7 +8,7 @@
   "private": true,
   "dependencies": {
     "@babel/runtime": "7.15.4",
-    "@mattermost/react-native-paste-input": "0.2.0",
+    "@mattermost/react-native-paste-input": "0.3.0",
     "@react-native-community/async-storage": "1.12.1",
     "@react-native-community/cameraroll": "4.0.4",
     "@react-native-community/clipboard": "1.5.1",