BottomSheet migration to react-native-bottom-sheet (#6907)

* BottomSheet migration to react-native-bottom-sheet

* Use correct scroll view for announcement bottom sheet

* ux review

* Fix post options bottom sheet snap point

* feedback review

app/components/user_avatars_stack/index.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {BottomSheetProps} from '@gorhom/bottom-sheet';
 import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
 import {StyleProp, Text, TouchableOpacity, View, ViewStyle} from 'react-native';
@@ -123,12 +124,17 @@ const UserAvatarsStack = ({breakAt = 3, channelId, location, style: baseContaine
                 />
             </>
         );
-        const snap = bottomSheetSnapPoint(Math.min(users.length, 5), USER_ROW_HEIGHT, bottom);
+
+        const snapPoints: BottomSheetProps['snapPoints'] = [1, bottomSheetSnapPoint(Math.min(users.length, 5), USER_ROW_HEIGHT, bottom) + TITLE_HEIGHT];
+        if (users.length > 5) {
+            snapPoints.push('90%');
+        }
+
         bottomSheet({
             closeButtonId: 'close-set-user-status',
             renderContent,
             initialSnapIndex: 1,
-            snapPoints: ['90%', TITLE_HEIGHT + snap, 10],
+            snapPoints,
             title: intl.formatMessage({id: 'mobile.participants.header', defaultMessage: 'Thread Participants'}),
             theme,
         });

app/components/user_avatars_stack/users_list/index.tsx

@@ -1,6 +1,7 @@
 // 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, useState} from 'react';
 import {useIntl} from 'react-intl';
 import {Keyboard, ListRenderItemInfo, NativeScrollEvent, NativeSyntheticEvent, PanResponder, StyleProp, StyleSheet, TouchableOpacity, ViewStyle} from 'react-native';
@@ -16,6 +17,7 @@ import type UserModel from '@typings/database/models/servers/user';
 type Props = {
     channelId: string;
     location: string;
+    type?: BottomSheetList;
     users: UserModel[];
 };
 
@@ -58,8 +60,8 @@ const Item = ({channelId, containerStyle, location, user}: ItemProps) => {
     );
 };
 
-const UsersList = ({channelId, location, users}: Props) => {
-    const [enabled, setEnabled] = useState(false);
+const UsersList = ({channelId, location, type = 'FlatList', users}: Props) => {
+    const [enabled, setEnabled] = useState(type === 'BottomSheetFlatList');
     const [direction, setDirection] = useState<'down' | 'up'>('down');
     const listRef = useRef<FlatList>(null);
     const prevOffset = useRef(0);
@@ -91,6 +93,16 @@ const UsersList = ({channelId, location, users}: Props) => {
         />
     ), [channelId, location]);
 
+    if (type === 'BottomSheetFlatList') {
+        return (
+            <BottomSheetFlatList
+                data={users}
+                renderItem={renderItem}
+                overScrollMode={'always'}
+            />
+        );
+    }
+
     return (
         <FlatList
             data={users}