[MM-54599] Fix Servers bottom sheet (mattermost#7609)

fewva · Jan 12, 2024 · 7e1ff06 · 7e1ff06
1 parent 42f0370
commit 7e1ff06
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/app/screens/home/channel_list/servers/index.tsx b/app/screens/home/channel_list/servers/index.tsx
@@ -3,7 +3,7 @@
 
 import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
-import {StyleSheet} from 'react-native';
+import {Dimensions, StyleSheet} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import ServerIcon from '@components/server_icon';
@@ -27,7 +27,8 @@ export type ServersRef = {
     openServers: () => void;
 }
 
-export const SERVER_ITEM_HEIGHT = 72;
+export const SERVER_ITEM_HEIGHT = 75;
+export const PUSH_ALERT_TEXT_HEIGHT = 42;
 const subscriptions: Map<string, UnreadSubscription> = new Map();
 
 const styles = StyleSheet.create({
@@ -116,12 +117,18 @@ const Servers = React.forwardRef<ServersRef>((_, ref) => {
                     <ServerList servers={registeredServers.current!}/>
                 );
             };
+            const maxScreenHeight = Math.ceil(0.6 * Dimensions.get('window').height);
+            const maxSnapPoint = Math.min(
+                maxScreenHeight,
+                bottomSheetSnapPoint(registeredServers.current.length, SERVER_ITEM_HEIGHT, bottom) + TITLE_HEIGHT + BUTTON_HEIGHT +
+                    (registeredServers.current.filter((s: ServersModel) => s.lastActiveAt).length * PUSH_ALERT_TEXT_HEIGHT),
+            );
 
             const snapPoints: BottomSheetProps['snapPoints'] = [
                 1,
-                bottomSheetSnapPoint(Math.min(2.5, registeredServers.current.length), 72, bottom) + TITLE_HEIGHT + BUTTON_HEIGHT,
+                maxSnapPoint,
             ];
-            if (registeredServers.current.length > 1) {
+            if (maxSnapPoint === maxScreenHeight) {
                 snapPoints.push('80%');
             }
 

diff --git a/app/screens/home/channel_list/servers/servers_list/index.tsx b/app/screens/home/channel_list/servers/servers_list/index.tsx
@@ -4,11 +4,12 @@
 import {BottomSheetFlatList} from '@gorhom/bottom-sheet';
 import React, {useCallback, useMemo} from 'react';
 import {useIntl} from 'react-intl';
-import {FlatList, type ListRenderItemInfo, StyleSheet, View} from 'react-native';
+import {FlatList, StyleSheet, View, type ListRenderItemInfo} from 'react-native';
 
 import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
 import {useIsTablet} from '@hooks/device';
+import {BUTTON_HEIGHT} from '@screens/bottom_sheet';
 import BottomSheetContent from '@screens/bottom_sheet/content';
 import {addNewServer} from '@utils/server';
 
@@ -29,6 +30,9 @@ const styles = StyleSheet.create({
     contentContainer: {
         marginVertical: 4,
     },
+    serverList: {
+        marginBottom: BUTTON_HEIGHT,
+    },
 });
 
 const keyExtractor = (item: ServersModel) => item.url;
@@ -68,6 +72,7 @@ const ServerList = ({servers}: Props) => {
             <View style={[styles.container, {marginTop: isTablet ? 12 : 0}]}>
                 <List
                     data={servers}
+                    style={styles.serverList}
                     renderItem={renderServer}
                     keyExtractor={keyExtractor}
                     contentContainerStyle={styles.contentContainer}