From 4482bd481efc5e5dd059ac7c489fac5f4b550776 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= <larkox@gmail.com>
Date: Fri, 9 Dec 2022 19:29:34 +0100
Subject: [PATCH] Fix foldable devices by not allowing tablet mode on android
 (#6856)

---
 app/constants/device.ts                        | 3 ++-
 app/managers/analytics.ts                      | 3 ++-
 app/screens/bottom_sheet/index.tsx             | 5 ++---
 app/screens/home/channel_list/channel_list.tsx | 2 +-
 app/screens/home/tab_bar/index.tsx             | 2 +-
 5 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/constants/device.ts b/app/constants/device.ts
index 2e06d7b86f..a3dde7d87b 100644
--- a/app/constants/device.ts
+++ b/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',
 };
diff --git a/app/managers/analytics.ts b/app/managers/analytics.ts
index 24cb8641dd..1ae5196e66 100644
--- a/app/managers/analytics.ts
+++ b/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',
diff --git a/app/screens/bottom_sheet/index.tsx b/app/screens/bottom_sheet/index.tsx
index 016467a093..8fd2b5675c 100644
--- a/app/screens/bottom_sheet/index.tsx
+++ b/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`}
diff --git a/app/screens/home/channel_list/channel_list.tsx b/app/screens/home/channel_list/channel_list.tsx
index b0902a50bc..8bce92d23b 100644
--- a/app/screens/home/channel_list/channel_list.tsx
+++ b/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) {
diff --git a/app/screens/home/tab_bar/index.tsx b/app/screens/home/tab_bar/index.tsx
index b3b4c2e456..02d025f2d1 100644
--- a/app/screens/home/tab_bar/index.tsx
+++ b/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]}>