Move Thread screen from a modal to a pushed screen (#6060)

app/actions/local/thread.ts

@@ -1,14 +1,13 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import CompassIcon from '@components/compass_icon';
 import {General, Screens} from '@constants';
 import DatabaseManager from '@database/manager';
 import {getTranslations, t} from '@i18n';
 import {queryChannelById} from '@queries/servers/channel';
 import {queryPostById} from '@queries/servers/post';
 import {queryCurrentUser} from '@queries/servers/user';
-import {showModal} from '@screens/navigation';
+import {goToScreen} from '@screens/navigation';
 import EphemeralStore from '@store/ephemeral_store';
 import {changeOpacity} from '@utils/theme';
 
@@ -54,9 +53,7 @@ export const switchToThread = async (serverUrl: string, rootId: string) => {
             subtitle = subtitle.replace('{channelName}', channel.displayName);
         }
 
-        const closeButtonId = 'close-threads';
-
-        showModal(Screens.THREAD, '', {closeButtonId, rootId}, {
+        goToScreen(Screens.THREAD, '', {rootId}, {
             topBar: {
                 title: {
                     text: title,
@@ -65,11 +62,6 @@ export const switchToThread = async (serverUrl: string, rootId: string) => {
                     color: changeOpacity(theme.sidebarHeaderTextColor, 0.72),
                     text: subtitle,
                 },
-                leftButtons: [{
-                    id: closeButtonId,
-                    icon: CompassIcon.getImageSourceSync('close', 24, theme.centerChannelColor),
-                    testID: closeButtonId,
-                }],
             },
         });
         return {};

app/components/post_draft/draft_input/index.tsx

@@ -70,6 +70,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             paddingBottom: 2,
             backgroundColor: theme.centerChannelBg,
             borderWidth: 1,
+            borderBottomWidth: 0,
             borderColor: changeOpacity(theme.centerChannelColor, 0.20),
             borderTopLeftRadius: 12,
             borderTopRightRadius: 12,

app/components/post_draft/post_draft.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {RefObject, useState} from 'react';
-import {Platform, useWindowDimensions, View} from 'react-native';
+import {Platform, View} from 'react-native';
 import {KeyboardTrackingView, KeyboardTrackingViewRef} from 'react-native-keyboard-tracking-view';
 
 import Autocomplete from '@components/autocomplete';
@@ -29,11 +29,7 @@ type Props = {
     keyboardTracker: RefObject<KeyboardTrackingViewRef>;
 }
 
-const {
-    KEYBOARD_TRACKING_OFFSET,
-    KEYBOARD_TRACKING_OFFSET_MODAL_LANDSCAPE,
-    KEYBOARD_TRACKING_OFFSET_MODAL_PORTRAIT,
-} = ViewConstants;
+const {KEYBOARD_TRACKING_OFFSET} = ViewConstants;
 
 function PostDraft({
     testID,
@@ -54,8 +50,6 @@ function PostDraft({
     const [cursorPosition, setCursorPosition] = useState(message.length);
     const [postInputTop, setPostInputTop] = useState(0);
     const isTablet = useIsTablet();
-    const dimensions = useWindowDimensions();
-    const isLandscape = dimensions.width > dimensions.height;
 
     if (channelIsArchived || deactivatedChannel) {
         const archivedTestID = `${testID}.archived`;
@@ -114,18 +108,13 @@ function PostDraft({
         );
     }
 
-    let viewInitialOffsetY = isTablet ? KEYBOARD_TRACKING_OFFSET : 0;
-    if (isTablet && rootId) {
-        viewInitialOffsetY = isLandscape ? KEYBOARD_TRACKING_OFFSET_MODAL_LANDSCAPE : KEYBOARD_TRACKING_OFFSET_MODAL_PORTRAIT;
-    }
-
     return (
         <>
             <KeyboardTrackingView
                 accessoriesContainerID={accessoriesContainerID}
                 ref={keyboardTracker}
                 scrollViewNativeID={scrollViewNativeID}
-                viewInitialOffsetY={viewInitialOffsetY}
+                viewInitialOffsetY={isTablet && !rootId ? KEYBOARD_TRACKING_OFFSET : 0}
             >
                 {draftHandler}
             </KeyboardTrackingView>

app/constants/view.ts

@@ -22,8 +22,6 @@ export const IOS_HEADER_SEARCH_INSET = 20;
 export const TABLET_HEADER_SEARCH_INSET = 28;
 export const ANDROID_HEADER_SEARCH_INSET = 11;
 export const KEYBOARD_TRACKING_OFFSET = 72;
-export const KEYBOARD_TRACKING_OFFSET_MODAL_LANDSCAPE = 44;
-export const KEYBOARD_TRACKING_OFFSET_MODAL_PORTRAIT = 154;
 
 export const INDICATOR_BAR_HEIGHT = 38;
 
@@ -48,7 +46,5 @@ export default {
     ANDROID_HEADER_SEARCH_INSET,
     INDICATOR_BAR_HEIGHT,
     KEYBOARD_TRACKING_OFFSET,
-    KEYBOARD_TRACKING_OFFSET_MODAL_LANDSCAPE,
-    KEYBOARD_TRACKING_OFFSET_MODAL_PORTRAIT,
 };
 

app/screens/thread/thread.tsx

@@ -1,24 +1,20 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useCallback, useEffect, useRef} from 'react';
-import {BackHandler, StyleSheet, View} from 'react-native';
+import React, {useRef} from 'react';
+import {StyleSheet, View} from 'react-native';
 import {KeyboardTrackingViewRef} from 'react-native-keyboard-tracking-view';
-import {Navigation} from 'react-native-navigation';
 import {Edge, SafeAreaView} from 'react-native-safe-area-context';
 
 import PostDraft from '@components/post_draft';
 import {THREAD_ACCESSORIES_CONTAINER_NATIVE_ID} from '@constants/post_draft';
 import {useAppState} from '@hooks/device';
-import {dismissModal} from '@screens/navigation';
 
 import ThreadPostList from './thread_post_list';
 
 import type PostModel from '@typings/database/models/servers/post';
 
 type ThreadProps = {
-    closeButtonId: string;
-    componentId: string;
     rootPost?: PostModel;
 };
 
@@ -30,39 +26,11 @@ const getStyleSheet = StyleSheet.create(() => ({
     },
 }));
 
-const Thread = ({closeButtonId, componentId, rootPost}: ThreadProps) => {
+const Thread = ({rootPost}: ThreadProps) => {
     const appState = useAppState();
     const styles = getStyleSheet();
     const postDraftRef = useRef<KeyboardTrackingViewRef>(null);
 
-    const close = useCallback(() => {
-        dismissModal({componentId});
-        return true;
-    }, []);
-
-    useEffect(() => {
-        const unsubscribe = Navigation.events().registerComponentListener({
-            navigationButtonPressed: ({buttonId}: { buttonId: string }) => {
-                switch (buttonId) {
-                    case closeButtonId:
-                        close();
-                        break;
-                }
-            },
-        }, componentId);
-
-        return () => {
-            unsubscribe.remove();
-        };
-    }, []);
-
-    useEffect(() => {
-        const backHandler = BackHandler.addEventListener('hardwareBackPress', close);
-        return () => {
-            backHandler.remove();
-        };
-    }, []);
-
     return (
         <>
             <SafeAreaView

app/screens/thread/thread_post_list/thread_post_list.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useMemo} from 'react';
-import {StyleProp, StyleSheet, ViewStyle} from 'react-native';
+import {StyleSheet} from 'react-native';
 import {Edge, SafeAreaView} from 'react-native-safe-area-context';
 
 import PostList from '@components/post_list';
@@ -13,7 +13,6 @@ import type PostModel from '@typings/database/models/servers/post';
 
 type Props = {
     channelId: string;
-    contentContainerStyle?: StyleProp<ViewStyle>;
     currentTimezone: string | null;
     currentUsername: string;
     isTimezoneEnabled: boolean;
@@ -26,11 +25,12 @@ type Props = {
 const edges: Edge[] = ['bottom'];
 
 const styles = StyleSheet.create({
+    container: {marginTop: 20},
     flex: {flex: 1},
 });
 
 const ThreadPostList = ({
-    channelId, contentContainerStyle, currentTimezone, currentUsername,
+    channelId, currentTimezone, currentUsername,
     isTimezoneEnabled, lastViewedAt, nativeID, posts, rootPost,
 }: Props) => {
     const isTablet = useIsTablet();
@@ -42,7 +42,7 @@ const ThreadPostList = ({
     const postList = (
         <PostList
             channelId={channelId}
-            contentContainerStyle={contentContainerStyle}
+            contentContainerStyle={styles.container}
             currentTimezone={currentTimezone}
             currentUsername={currentUsername}
             isTimezoneEnabled={isTimezoneEnabled}