From 0d8466a0555b161543653ed2ca520908913e8ce5 Mon Sep 17 00:00:00 2001
From: "Khanh P. Huynh" <hpkhanh1610@gmail.com>
Date: Wed, 9 Aug 2023 15:48:21 +0700
Subject: [PATCH] Fix cannot scroll acknowledgement bottom sheet of user list
 when there are many users (#7489)

* Fix cannot scroll acknowledgement bottom sheet of user list when there are many users

* - Updated showing user list for Tablet
- Added GestureHandlerRootView to avoid bug not show the list

* Wrap BottomSheet inside withGestures function

* Remove GestureHandlerRootView for BottomSheet component since it's been wrapped inside withGesture function
---
 .../users_list/users_list.tsx                 | 18 +++++++-
 app/screens/bottom_sheet/index.tsx            | 42 +++++++++----------
 app/screens/index.tsx                         |  2 +-
 3 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/app/components/post_list/post/body/acknowledgements/users_list/users_list.tsx b/app/components/post_list/post/body/acknowledgements/users_list/users_list.tsx
index 39b6fa66a..cd103f91c 100644
--- a/app/components/post_list/post/body/acknowledgements/users_list/users_list.tsx
+++ b/app/components/post_list/post/body/acknowledgements/users_list/users_list.tsx
@@ -1,9 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {BottomSheetFlatList} from '@gorhom/bottom-sheet';
 import React, {useCallback, useRef} from 'react';
 import {FlatList} from 'react-native-gesture-handler';
 
+import {useIsTablet} from '@hooks/device';
+
 import UserListItem from './user_list_item';
 
 import type UserModel from '@typings/database/models/servers/user';
@@ -18,6 +21,7 @@ type Props = {
 };
 
 const UsersList = ({channelId, location, users, userAcknowledgements, timezone}: Props) => {
+    const isTablet = useIsTablet();
     const listRef = useRef<FlatList>(null);
 
     const renderItem = useCallback(({item}: ListRenderItemInfo<UserModel>) => (
@@ -30,10 +34,20 @@ const UsersList = ({channelId, location, users, userAcknowledgements, timezone}:
         />
     ), [channelId, location, timezone]);
 
+    if (isTablet) {
+        return (
+            <FlatList
+                data={users}
+                ref={listRef}
+                renderItem={renderItem}
+                overScrollMode={'always'}
+            />
+        );
+    }
+
     return (
-        <FlatList
+        <BottomSheetFlatList
             data={users}
-            ref={listRef}
             renderItem={renderItem}
             overScrollMode={'always'}
         />
diff --git a/app/screens/bottom_sheet/index.tsx b/app/screens/bottom_sheet/index.tsx
index a6967043d..89dbdbfee 100644
--- a/app/screens/bottom_sheet/index.tsx
+++ b/app/screens/bottom_sheet/index.tsx
@@ -4,7 +4,6 @@
 import BottomSheetM, {BottomSheetBackdrop, type BottomSheetBackdropProps, type BottomSheetFooterProps} from '@gorhom/bottom-sheet';
 import React, {type ReactNode, useCallback, useEffect, useMemo, useRef} from 'react';
 import {DeviceEventEmitter, type Handle, InteractionManager, Keyboard, type StyleProp, View, type ViewStyle} from 'react-native';
-import {GestureHandlerRootView} from 'react-native-gesture-handler';
 
 import {Events} from '@constants';
 import {useTheme} from '@context/theme';
@@ -39,7 +38,6 @@ const PADDING_TOP_TABLET = 8;
 
 export const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
     return {
-        container: {flex: 1},
         bottomSheet: {
             backgroundColor: theme.centerChannelBg,
             borderTopStartRadius: 24,
@@ -199,27 +197,25 @@ const BottomSheet = ({
     }
 
     return (
-        <GestureHandlerRootView style={styles.container}>
-            <BottomSheetM
-                ref={sheetRef}
-                index={initialSnapIndex}
-                snapPoints={snapPoints}
-                animateOnMount={true}
-                backdropComponent={renderBackdrop}
-                onAnimate={handleAnimationStart}
-                onChange={handleChange}
-                animationConfigs={animatedConfig}
-                handleComponent={Indicator}
-                style={styles.bottomSheet}
-                backgroundStyle={bottomSheetBackgroundStyle}
-                footerComponent={footerComponent}
-                keyboardBehavior='extend'
-                keyboardBlurBehavior='restore'
-                onClose={close}
-            >
-                {renderContainerContent()}
-            </BottomSheetM>
-        </GestureHandlerRootView>
+        <BottomSheetM
+            ref={sheetRef}
+            index={initialSnapIndex}
+            snapPoints={snapPoints}
+            animateOnMount={true}
+            backdropComponent={renderBackdrop}
+            onAnimate={handleAnimationStart}
+            onChange={handleChange}
+            animationConfigs={animatedConfig}
+            handleComponent={Indicator}
+            style={styles.bottomSheet}
+            backgroundStyle={bottomSheetBackgroundStyle}
+            footerComponent={footerComponent}
+            keyboardBehavior='extend'
+            keyboardBlurBehavior='restore'
+            onClose={close}
+        >
+            {renderContainerContent()}
+        </BottomSheetM>
     );
 };
 
diff --git a/app/screens/index.tsx b/app/screens/index.tsx
index 0cde68c5d..47059b289 100644
--- a/app/screens/index.tsx
+++ b/app/screens/index.tsx
@@ -69,7 +69,7 @@ Navigation.setLazyComponentRegistrator((screenName) => {
         case Screens.BOTTOM_SHEET:
             screen = withServerDatabase(require('@screens/bottom_sheet').default);
             Navigation.registerComponent(Screens.BOTTOM_SHEET, () =>
-                withSafeAreaInsets(withManagedConfig(screen)),
+                withGestures(withSafeAreaInsets(withManagedConfig(screen)), undefined),
             );
             return;
         case Screens.BROWSE_CHANNELS: