Fix foldable devices by not allowing tablet mode on android (#6856)

app/constants/device.ts

@@ -1,12 +1,13 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {Platform} from 'react-native';
 import DeviceInfo from 'react-native-device-info';
 import FileSystem from 'react-native-fs';
 
 export default {
     DOCUMENTS_PATH: `${FileSystem.CachesDirectoryPath}/Documents`,
-    IS_TABLET: DeviceInfo.isTablet(),
+    IS_TABLET: Platform.select({android: false, default: DeviceInfo.isTablet()}),
     PUSH_NOTIFY_ANDROID_REACT_NATIVE: 'android_rn',
     PUSH_NOTIFY_APPLE_REACT_NATIVE: 'apple_rn',
 };

app/managers/analytics.ts

@@ -5,6 +5,7 @@ import {Dimensions} from 'react-native';
 import DeviceInfo from 'react-native-device-info';
 
 import LocalConfig from '@assets/config.json';
+import {Device} from '@constants';
 
 const isSystemAdmin = (roles: string) => {
     // TODO: Replace this function with an utility function based on previous code
@@ -50,7 +51,7 @@ export class Analytics {
                             height,
                             width,
                         },
-                        isTablet: DeviceInfo.isTablet(),
+                        isTablet: Device.IS_TABLET,
                         os: DeviceInfo.getSystemVersion(),
                     },
                     ip: '0.0.0.0',

app/screens/bottom_sheet/index.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {ReactNode, useCallback, useEffect, useRef} from 'react';
-import {DeviceEventEmitter, Keyboard, StyleSheet, useWindowDimensions, View} from 'react-native';
+import {DeviceEventEmitter, Keyboard, StyleSheet, View} from 'react-native';
 import {State, TapGestureHandler} from 'react-native-gesture-handler';
 import {Navigation as RNN} from 'react-native-navigation';
 import Animated, {Easing, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
@@ -31,7 +31,6 @@ export const PADDING_TOP_MOBILE = 20;
 
 const BottomSheet = ({closeButtonId, componentId, initialSnapIndex = 0, renderContent, snapPoints = ['90%', '50%', 50], testID}: SlideUpPanelProps) => {
     const sheetRef = useRef<RNBottomSheet>(null);
-    const dimensions = useWindowDimensions();
     const isTablet = useIsTablet();
     const theme = useTheme();
     const firstRun = useRef(isTablet);
@@ -131,7 +130,7 @@ const BottomSheet = ({closeButtonId, componentId, initialSnapIndex = 0, renderCo
                 paddingHorizontal: 20,
                 paddingTop: isTablet ? 0 : PADDING_TOP_MOBILE,
                 height: '100%',
-                width: isTablet ? '100%' : Math.min(dimensions.width, 450),
+                width: '100%',
                 alignSelf: 'center',
             }}
             testID={`${testID}.screen`}

app/screens/home/channel_list/channel_list.tsx

@@ -125,7 +125,7 @@ const ChannelListScreen = (props: ChannelProps) => {
 
     const top = useAnimatedStyle(() => {
         return {height: insets.top, backgroundColor: theme.sidebarBg};
-    }, [theme]);
+    }, [theme, insets.top]);
 
     useEffect(() => {
         if (!props.teamsCount) {

app/screens/home/tab_bar/index.tsx

@@ -131,7 +131,7 @@ function TabBar({state, descriptors, navigation, theme}: BottomTabBarProps & {th
         return {
             transform: [{translateY: height}],
         };
-    }, [visible]);
+    }, [visible, safeareaInsets.bottom]);
 
     return (
         <Animated.View style={[style.container, style.separator, animatedStyle]}>