From e9b8160f31b6678293256c61feaed4e9bab2cfb7 Mon Sep 17 00:00:00 2001
From: Joseph Baylon <joseph.baylon@mattermost.com>
Date: Wed, 4 Jan 2023 18:46:31 -0800
Subject: [PATCH 1/4] Detox Reporting: Prepare for release and main (#6930)

* Detox Reporting: Prepare for release and main

* Fix lint in switch

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
---
 detox/utils/report.js | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/detox/utils/report.js b/detox/utils/report.js
index 5f3ab35676..23b27637bc 100644
--- a/detox/utils/report.js
+++ b/detox/utils/report.js
@@ -320,32 +320,30 @@ function generateTitle() {
     const platform = IOS === 'true' ? 'iOS' : 'Android';
     const lane = `${platform} Build`;
     const appExtension = IOS === 'true' ? 'ipa' : 'apk';
-    const appFileName = TYPE === 'GEKIDOU' ? `Mattermost_Beta.${appExtension}` : `Mattermost.${appExtension}`;
-    let buildLink = ` with [${lane}:${COMMIT_HASH}](https://pr-builds.mattermost.com/mattermost-mobile/${BRANCH}-${COMMIT_HASH}/${appFileName})`;
-    if (RELEASE_VERSION && RELEASE_BUILD_NUMBER) {
-        const releaseType = TYPE === 'GEKIDOU' ? 'mattermost-mobile-beta' : 'mattermost-mobile';
-        buildLink = ` with [${RELEASE_VERSION}:${RELEASE_BUILD_NUMBER}](https://releases.mattermost.com/${releaseType}/${RELEASE_VERSION}/${RELEASE_BUILD_NUMBER}/${appFileName})`;
-    }
-
+    const appFileName = `Mattermost_Beta.${appExtension}`;
+    const appBuildType = 'mattermost-mobile-beta';
+    let buildLink = '';
     let releaseDate = '';
-    if (RELEASE_DATE) {
-        releaseDate = ` for ${RELEASE_DATE}`;
-    }
-
     let title;
 
     switch (TYPE) {
         case 'PR':
+            buildLink = ` with [${lane}:${COMMIT_HASH}](https://pr-builds.mattermost.com/${appBuildType}/${BRANCH}-${COMMIT_HASH}/${appFileName})`;
             title = `${platform} E2E for Pull Request Build: [${BRANCH}](${PULL_REQUEST})${buildLink}`;
             break;
         case 'RELEASE':
+            if (RELEASE_VERSION && RELEASE_BUILD_NUMBER) {
+                buildLink = ` with [${RELEASE_VERSION}:${RELEASE_BUILD_NUMBER}](https://releases.mattermost.com/${appBuildType}/${RELEASE_VERSION}/${RELEASE_BUILD_NUMBER}/${appFileName})`;
+            }
+
+            if (RELEASE_DATE) {
+                releaseDate = ` for ${RELEASE_DATE}`;
+            }
+
             title = `${platform} E2E for Release Build${buildLink}${releaseDate}`;
             break;
-        case 'MASTER':
-            title = `${platform} E2E for Master Nightly Build (Prod tests)${buildLink}`;
-            break;
-        case 'GEKIDOU':
-            title = `${platform} E2E for Gekidou Nightly Build (Prod tests)${buildLink}`;
+        case 'MAIN':
+            title = `${platform} E2E for Main Nightly Build (Prod tests)${buildLink}`;
             break;
         default:
             title = `${platform} E2E for Build${buildLink}`;

From dbe565319d9edd4016b7bdd97923e475095a13c7 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Thu, 5 Jan 2023 09:51:51 +0200
Subject: [PATCH 2/4] 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
---
 NOTICE.txt                                    |  22 --
 .../announcement_banner.tsx                   |  16 +-
 .../expanded_announcement_banner.tsx          |  10 +-
 .../channel_actions/channel_actions.tsx       |   4 +-
 .../markdown/at_mention/at_mention.tsx        |   7 +-
 .../markdown/markdown_code_block/index.tsx    |   6 +-
 .../markdown/markdown_image/index.tsx         |   6 +-
 .../markdown/markdown_latex_block/index.tsx   |   6 +-
 .../markdown/markdown_link/markdown_link.tsx  |   6 +-
 .../camera_quick_action/index.tsx             |   3 +-
 .../post_priority_action/index.tsx            |   9 +-
 .../post_list/post/body/failed/index.tsx      |   6 +-
 .../post_priority_picker/index.tsx            |   2 +
 app/components/team_list/index.tsx            |  37 +++-
 app/components/user_avatars_stack/index.tsx   |  10 +-
 .../user_avatars_stack/users_list/index.tsx   |  16 +-
 app/constants/reaction_picker.ts              |   2 +
 app/constants/view.ts                         |   7 +-
 .../calls/screens/call_screen/call_screen.tsx |   6 +-
 app/screens/bottom_sheet/button.tsx           | 102 ++++++---
 app/screens/bottom_sheet/content.tsx          |  25 +--
 app/screens/bottom_sheet/index.tsx            | 205 +++++++++---------
 app/screens/bottom_sheet/indicator.tsx        |   2 +-
 .../browse_channels/channel_dropdown.tsx      |   6 +-
 app/screens/channel/header/header.tsx         |  14 +-
 .../channel/header/quick_actions/index.tsx    |  12 +-
 .../components/profile_image_picker.tsx       |   6 +-
 .../options/user_presence/index.tsx           |   2 +-
 .../categories_list/header/header.tsx         |   6 +-
 .../home/channel_list/servers/index.tsx       |  30 ++-
 .../servers_list/add_server_button.tsx        |  32 +++
 .../servers/servers_list/index.tsx            |  16 +-
 ...slideup.tsx => bottom_sheet_team_list.tsx} |   3 +-
 .../results/file_options/mobile_options.tsx   |   3 +-
 app/screens/home/search/results/header.tsx    |   3 +-
 app/screens/home/search/team_picker_icon.tsx  |  30 ++-
 app/screens/navigation.ts                     |   6 +-
 app/screens/post_options/post_options.tsx     |  57 +++--
 app/screens/reactions/reactions.tsx           |   6 +-
 app/screens/reactions/reactors_list/index.tsx |  15 +-
 app/screens/thread_options/thread_options.tsx |   4 +-
 app/screens/user_profile/user_profile.tsx     |  68 +++---
 app/utils/helpers.ts                          |  11 +-
 app/utils/team_list/index.ts                  |  32 ---
 package-lock.json                             |  63 ++++--
 package.json                                  |   2 +-
 types/components/bottom_sheet.d.ts            |   4 +
 47 files changed, 547 insertions(+), 399 deletions(-)
 create mode 100644 app/screens/home/channel_list/servers/servers_list/add_server_button.tsx
 rename app/screens/home/search/{select_team_slideup.tsx => bottom_sheet_team_list.tsx} (88%)
 delete mode 100644 app/utils/team_list/index.ts
 create mode 100644 types/components/bottom_sheet.d.ts

diff --git a/NOTICE.txt b/NOTICE.txt
index 8453b77d56..c4a1b9f947 100644
--- a/NOTICE.txt
+++ b/NOTICE.txt
@@ -2962,28 +2962,6 @@ IN THE SOFTWARE.
 """
 
 
----
-
-## reanimated-bottom-sheet
-
-This product contains a modified version of 'reanimated-bottom-sheet' by Michał Osadnik.
-
-Highly configurable component imitating native bottom sheet behavior, with fully native 60 FPS animations!
-
-* HOMEPAGE:
-  * https://github.com/osdnk/react-native-reanimated-bottom-sheet
-
-* LICENSE: MIT
-
-Copyright 2019 – present Michał Osadnik
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-
 ---
 
 ## semver
diff --git a/app/components/announcement_banner/announcement_banner.tsx b/app/components/announcement_banner/announcement_banner.tsx
index 4008b5c869..08f4bcd17c 100644
--- a/app/components/announcement_banner/announcement_banner.tsx
+++ b/app/components/announcement_banner/announcement_banner.tsx
@@ -9,6 +9,7 @@ import {
     View,
 } from 'react-native';
 import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {dismissAnnouncement} from '@actions/local/systems';
 import CompassIcon from '@components/compass_icon';
@@ -17,6 +18,7 @@ import {ANNOUNCEMENT_BAR_HEIGHT} from '@constants/view';
 import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
 import {bottomSheet} from '@screens/navigation';
+import {bottomSheetSnapPoint} from '@utils/helpers';
 import {getMarkdownTextStyles} from '@utils/markdown';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
@@ -82,6 +84,7 @@ const AnnouncementBanner = ({
     const intl = useIntl();
     const serverUrl = useServerUrl();
     const height = useSharedValue(0);
+    const {bottom} = useSafeAreaInsets();
     const theme = useTheme();
     const [visible, setVisible] = useState(false);
     const style = getStyle(theme);
@@ -100,19 +103,20 @@ const AnnouncementBanner = ({
             defaultMessage: 'Announcement',
         });
 
-        let snapPoint = SNAP_POINT_WITHOUT_DISMISS;
-        if (allowDismissal) {
-            snapPoint += DISMISS_BUTTON_HEIGHT;
-        }
+        const snapPoint = bottomSheetSnapPoint(
+            1,
+            SNAP_POINT_WITHOUT_DISMISS + (allowDismissal ? DISMISS_BUTTON_HEIGHT : 0),
+            bottom,
+        );
 
         bottomSheet({
             closeButtonId: CLOSE_BUTTON_ID,
             title,
             renderContent,
-            snapPoints: [snapPoint, 10],
+            snapPoints: [1, snapPoint],
             theme,
         });
-    }, [theme.sidebarHeaderTextColor, intl.locale, renderContent, allowDismissal]);
+    }, [theme.sidebarHeaderTextColor, intl.locale, renderContent, allowDismissal, bottom]);
 
     const handleDismiss = useCallback(() => {
         dismissAnnouncement(serverUrl, bannerText);
diff --git a/app/components/announcement_banner/expanded_announcement_banner.tsx b/app/components/announcement_banner/expanded_announcement_banner.tsx
index 22de72d027..a34938b3c6 100644
--- a/app/components/announcement_banner/expanded_announcement_banner.tsx
+++ b/app/components/announcement_banner/expanded_announcement_banner.tsx
@@ -1,11 +1,11 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {BottomSheetScrollView} from '@gorhom/bottom-sheet';
 import React, {useCallback, useMemo} from 'react';
 import {useIntl} from 'react-intl';
-import {Text, View} from 'react-native';
+import {ScrollView, Text, View} from 'react-native';
 import Button from 'react-native-button';
-import {ScrollView} from 'react-native-gesture-handler';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {dismissAnnouncement} from '@actions/local/systems';
@@ -84,6 +84,8 @@ const ExpandedAnnouncementBanner = ({
         return [style.container, {marginBottom: insets.bottom + 10}];
     }, [style, insets.bottom]);
 
+    const Scroll = useMemo(() => (isTablet ? ScrollView : BottomSheetScrollView), [isTablet]);
+
     return (
         <View style={containerStyle}>
             {!isTablet && (
@@ -94,7 +96,7 @@ const ExpandedAnnouncementBanner = ({
                     })}
                 </Text>
             )}
-            <ScrollView
+            <Scroll
                 style={style.scrollContainer}
             >
                 <Markdown
@@ -106,7 +108,7 @@ const ExpandedAnnouncementBanner = ({
                     theme={theme}
                     location={Screens.BOTTOM_SHEET}
                 />
-            </ScrollView>
+            </Scroll>
             <Button
                 containerStyle={buttonStyles.okay.button}
                 onPress={close}
diff --git a/app/components/channel_actions/channel_actions.tsx b/app/components/channel_actions/channel_actions.tsx
index 33af421f79..e8ecfcdd68 100644
--- a/app/components/channel_actions/channel_actions.tsx
+++ b/app/components/channel_actions/channel_actions.tsx
@@ -24,12 +24,12 @@ type Props = {
     testID?: string;
 }
 
-const OPTIONS_HEIGHT = 62;
+export const CHANNEL_ACTIONS_OPTIONS_HEIGHT = 62;
 
 const styles = StyleSheet.create({
     wrapper: {
         flexDirection: 'row',
-        height: OPTIONS_HEIGHT,
+        height: CHANNEL_ACTIONS_OPTIONS_HEIGHT,
     },
     separator: {
         width: 8,
diff --git a/app/components/markdown/at_mention/at_mention.tsx b/app/components/markdown/at_mention/at_mention.tsx
index 1fb871653a..8dadbac563 100644
--- a/app/components/markdown/at_mention/at_mention.tsx
+++ b/app/components/markdown/at_mention/at_mention.tsx
@@ -69,7 +69,7 @@ const AtMention = ({
     const intl = useIntl();
     const managedConfig = useManagedConfig<ManagedConfig>();
     const theme = useTheme();
-    const insets = useSafeAreaInsets();
+    const {bottom} = useSafeAreaInsets();
     const serverUrl = useServerUrl();
 
     const user = useMemo(() => {
@@ -92,6 +92,7 @@ const AtMention = ({
         // @ts-expect-error: The model constructor is hidden within WDB type definition
         return new UserModel(database.get(USER), {username: ''});
     }, [users, mentionName]);
+
     const userMentionKeys = useMemo(() => {
         if (mentionKeys) {
             return mentionKeys;
@@ -195,12 +196,12 @@ const AtMention = ({
             bottomSheet({
                 closeButtonId: 'close-at-mention',
                 renderContent,
-                snapPoints: [bottomSheetSnapPoint(2, ITEM_HEIGHT, insets.bottom), 10],
+                snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT, bottom)],
                 title: intl.formatMessage({id: 'post.options.title', defaultMessage: 'Options'}),
                 theme,
             });
         }
-    }, [managedConfig, intl, theme, insets]);
+    }, [managedConfig, intl, theme, bottom]);
 
     const mentionTextStyle = [];
 
diff --git a/app/components/markdown/markdown_code_block/index.tsx b/app/components/markdown/markdown_code_block/index.tsx
index 20549d4270..7522257f31 100644
--- a/app/components/markdown/markdown_code_block/index.tsx
+++ b/app/components/markdown/markdown_code_block/index.tsx
@@ -71,7 +71,7 @@ const MarkdownCodeBlock = ({language = '', content, textStyle}: MarkdownCodeBloc
     const intl = useIntl();
     const managedConfig = useManagedConfig<ManagedConfig>();
     const theme = useTheme();
-    const insets = useSafeAreaInsets();
+    const {bottom} = useSafeAreaInsets();
     const style = getStyleSheet(theme);
     const SyntaxHighlighter = useMemo(() => {
         if (!syntaxHighlighter) {
@@ -147,12 +147,12 @@ const MarkdownCodeBlock = ({language = '', content, textStyle}: MarkdownCodeBloc
             bottomSheet({
                 closeButtonId: 'close-code-block',
                 renderContent,
-                snapPoints: [bottomSheetSnapPoint(2, ITEM_HEIGHT, insets.bottom), 10],
+                snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT, bottom)],
                 title: intl.formatMessage({id: 'post.options.title', defaultMessage: 'Options'}),
                 theme,
             });
         }
-    }, [managedConfig, intl, insets, theme]);
+    }, [managedConfig, intl, bottom, theme]);
 
     const trimContent = (text: string) => {
         const lines = text.split('\n');
diff --git a/app/components/markdown/markdown_image/index.tsx b/app/components/markdown/markdown_image/index.tsx
index b266162590..955f295818 100644
--- a/app/components/markdown/markdown_image/index.tsx
+++ b/app/components/markdown/markdown_image/index.tsx
@@ -75,7 +75,7 @@ const MarkdownImage = ({
 }: MarkdownImageProps) => {
     const intl = useIntl();
     const isTablet = useIsTablet();
-    const insets = useSafeAreaInsets();
+    const {bottom} = useSafeAreaInsets();
     const theme = useTheme();
     const style = getStyleSheet(theme);
     const managedConfig = useManagedConfig<ManagedConfig>();
@@ -181,12 +181,12 @@ const MarkdownImage = ({
             bottomSheet({
                 closeButtonId: 'close-mardown-image',
                 renderContent,
-                snapPoints: [bottomSheetSnapPoint(2, ITEM_HEIGHT, insets.bottom), 10],
+                snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT, bottom)],
                 title: intl.formatMessage({id: 'post.options.title', defaultMessage: 'Options'}),
                 theme,
             });
         }
-    }, [managedConfig, intl.locale, insets.bottom, theme]);
+    }, [managedConfig, intl.locale, bottom, theme]);
 
     const handleOnError = useCallback(() => {
         setFailed(true);
diff --git a/app/components/markdown/markdown_latex_block/index.tsx b/app/components/markdown/markdown_latex_block/index.tsx
index beafe6cca4..3b7dd644c1 100644
--- a/app/components/markdown/markdown_latex_block/index.tsx
+++ b/app/components/markdown/markdown_latex_block/index.tsx
@@ -90,7 +90,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
 
 const LatexCodeBlock = ({content, theme}: Props) => {
     const intl = useIntl();
-    const insets = useSafeAreaInsets();
+    const {bottom} = useSafeAreaInsets();
     const managedConfig = useManagedConfig<ManagedConfig>();
     const styles = getStyleSheet(theme);
     const languageDisplayName = getHighlightLanguageName('latex');
@@ -161,12 +161,12 @@ const LatexCodeBlock = ({content, theme}: Props) => {
             bottomSheet({
                 closeButtonId: 'close-code-block',
                 renderContent,
-                snapPoints: [bottomSheetSnapPoint(2, ITEM_HEIGHT, insets.bottom), 10],
+                snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT, bottom)],
                 title: intl.formatMessage({id: 'post.options.title', defaultMessage: 'Options'}),
                 theme,
             });
         }
-    }, [managedConfig?.copyAndPasteProtection, intl, insets, theme]);
+    }, [managedConfig?.copyAndPasteProtection, intl, bottom, theme]);
 
     const onRenderErrorMessage = useCallback(({error}: {error: Error}) => {
         return <Text style={styles.errorText}>{'Render error: ' + error.message}</Text>;
diff --git a/app/components/markdown/markdown_link/markdown_link.tsx b/app/components/markdown/markdown_link/markdown_link.tsx
index 82fa6d93a7..c78e915e1c 100644
--- a/app/components/markdown/markdown_link/markdown_link.tsx
+++ b/app/components/markdown/markdown_link/markdown_link.tsx
@@ -46,7 +46,7 @@ const parseLinkLiteral = (literal: string) => {
 
 const MarkdownLink = ({children, experimentalNormalizeMarkdownLinks, href, siteURL}: MarkdownLinkProps) => {
     const intl = useIntl();
-    const insets = useSafeAreaInsets();
+    const {bottom} = useSafeAreaInsets();
     const managedConfig = useManagedConfig<ManagedConfig>();
     const serverUrl = useServerUrl();
     const theme = useTheme();
@@ -140,12 +140,12 @@ const MarkdownLink = ({children, experimentalNormalizeMarkdownLinks, href, siteU
             bottomSheet({
                 closeButtonId: 'close-mardown-link',
                 renderContent,
-                snapPoints: [bottomSheetSnapPoint(2, ITEM_HEIGHT, insets.bottom), 10],
+                snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT, bottom)],
                 title: intl.formatMessage({id: 'post.options.title', defaultMessage: 'Options'}),
                 theme,
             });
         }
-    }, [managedConfig, intl, insets, theme]);
+    }, [managedConfig, intl, bottom, theme]);
 
     const renderChildren = experimentalNormalizeMarkdownLinks ? parseChildren() : children;
 
diff --git a/app/components/post_draft/quick_actions/camera_quick_action/index.tsx b/app/components/post_draft/quick_actions/camera_quick_action/index.tsx
index 35d24aeaa5..f13817be11 100644
--- a/app/components/post_draft/quick_actions/camera_quick_action/index.tsx
+++ b/app/components/post_draft/quick_actions/camera_quick_action/index.tsx
@@ -69,11 +69,10 @@ export default function CameraQuickAction({
             return;
         }
 
-        const snap = bottomSheetSnapPoint(2, ITEM_HEIGHT, bottom);
         bottomSheet({
             title: intl.formatMessage({id: 'mobile.camera_type.title', defaultMessage: 'Camera options'}),
             renderContent,
-            snapPoints: [TITLE_HEIGHT + snap, 10],
+            snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT, bottom) + TITLE_HEIGHT],
             theme,
             closeButtonId: 'camera-close-id',
         });
diff --git a/app/components/post_draft/quick_actions/post_priority_action/index.tsx b/app/components/post_draft/quick_actions/post_priority_action/index.tsx
index 0e0ddf2958..05a0d164c0 100644
--- a/app/components/post_draft/quick_actions/post_priority_action/index.tsx
+++ b/app/components/post_draft/quick_actions/post_priority_action/index.tsx
@@ -4,13 +4,15 @@
 import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
 import {StyleSheet} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import CompassIcon from '@components/compass_icon';
-import PostPriorityPicker from '@components/post_priority/post_priority_picker';
+import PostPriorityPicker, {COMPONENT_HEIGHT} from '@components/post_priority/post_priority_picker';
 import TouchableWithFeedback from '@components/touchable_with_feedback';
 import {ICON_SIZE} from '@constants/post_draft';
 import {useTheme} from '@context/theme';
 import {bottomSheet, dismissBottomSheet} from '@screens/navigation';
+import {bottomSheetSnapPoint} from '@utils/helpers';
 import {changeOpacity} from '@utils/theme';
 
 type Props = {
@@ -34,6 +36,7 @@ export default function PostPriorityAction({
 }: Props) {
     const intl = useIntl();
     const theme = useTheme();
+    const {bottom} = useSafeAreaInsets();
 
     const handlePostPriorityPicker = useCallback((postPriorityData: PostPriorityData) => {
         updatePostPriority(postPriorityData);
@@ -55,11 +58,11 @@ export default function PostPriorityAction({
         bottomSheet({
             title: intl.formatMessage({id: 'post_priority.picker.title', defaultMessage: 'Message priority'}),
             renderContent,
-            snapPoints: [275, 10],
+            snapPoints: [1, bottomSheetSnapPoint(1, COMPONENT_HEIGHT, bottom)],
             theme,
             closeButtonId: 'post-priority-close-id',
         });
-    }, [intl, renderContent, theme]);
+    }, [intl, renderContent, theme, bottom]);
 
     const iconName = 'alert-circle-outline';
     const iconColor = changeOpacity(theme.centerChannelColor, 0.64);
diff --git a/app/components/post_list/post/body/failed/index.tsx b/app/components/post_list/post/body/failed/index.tsx
index ef891abcd6..d01e6241c4 100644
--- a/app/components/post_list/post/body/failed/index.tsx
+++ b/app/components/post_list/post/body/failed/index.tsx
@@ -33,7 +33,7 @@ const styles = StyleSheet.create({
 
 const Failed = ({post, theme}: FailedProps) => {
     const intl = useIntl();
-    const insets = useSafeAreaInsets();
+    const {bottom} = useSafeAreaInsets();
     const serverUrl = useServerUrl();
 
     const onPress = useCallback(() => {
@@ -69,11 +69,11 @@ const Failed = ({post, theme}: FailedProps) => {
         bottomSheet({
             closeButtonId: 'close-post-failed',
             renderContent,
-            snapPoints: [bottomSheetSnapPoint(2, ITEM_HEIGHT, insets.bottom), 10],
+            snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT, bottom)],
             title: intl.formatMessage({id: 'post.options.title', defaultMessage: 'Options'}),
             theme,
         });
-    }, [insets]);
+    }, [bottom]);
 
     return (
         <TouchableOpacity
diff --git a/app/components/post_priority/post_priority_picker/index.tsx b/app/components/post_priority/post_priority_picker/index.tsx
index 5b70622b8f..ed054a71c1 100644
--- a/app/components/post_priority/post_priority_picker/index.tsx
+++ b/app/components/post_priority/post_priority_picker/index.tsx
@@ -19,6 +19,8 @@ type Props = {
     onSubmit: (data: PostPriorityData) => void;
 };
 
+export const COMPONENT_HEIGHT = 200;
+
 const getStyle = makeStyleSheetFromTheme((theme: Theme) => ({
     container: {
         backgroundColor: theme.centerChannelBg,
diff --git a/app/components/team_list/index.tsx b/app/components/team_list/index.tsx
index 08c4738adf..f5e61b1194 100644
--- a/app/components/team_list/index.tsx
+++ b/app/components/team_list/index.tsx
@@ -1,7 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useCallback} from 'react';
+import {BottomSheetFlatList} from '@gorhom/bottom-sheet';
+import React, {useCallback, useMemo} from 'react';
 import {ListRenderItemInfo, StyleSheet, View} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler'; // Keep the FlatList from gesture handler so it works well with bottom sheet
 
@@ -12,20 +13,21 @@ import TeamListItem from './team_list_item';
 import type TeamModel from '@typings/database/models/servers/team';
 
 type Props = {
-    teams: Array<Team|TeamModel>;
-    textColor?: string;
-    iconTextColor?: string;
     iconBackgroundColor?: string;
-    onPress: (id: string) => void;
-    testID?: string;
-    selectedTeamId?: string;
-    onEndReached?: () => void;
+    iconTextColor?: string;
     loading?: boolean;
+    onEndReached?: () => void;
+    onPress: (id: string) => void;
+    selectedTeamId?: string;
+    teams: Array<Team|TeamModel>;
+    testID?: string;
+    textColor?: string;
+    type?: BottomSheetList;
 }
 
 const styles = StyleSheet.create({
     container: {
-        flexShrink: 1,
+        flexGrow: 1,
     },
     contentContainer: {
         marginBottom: 4,
@@ -34,7 +36,20 @@ const styles = StyleSheet.create({
 
 const keyExtractor = (item: TeamModel) => item.id;
 
-export default function TeamList({teams, textColor, iconTextColor, iconBackgroundColor, onPress, testID, selectedTeamId, onEndReached, loading = false}: Props) {
+export default function TeamList({
+    iconBackgroundColor,
+    iconTextColor,
+    loading = false,
+    onEndReached,
+    onPress,
+    selectedTeamId,
+    teams,
+    testID,
+    textColor,
+    type = 'FlatList',
+}: Props) {
+    const List = useMemo(() => (type === 'FlatList' ? FlatList : BottomSheetFlatList), [type]);
+
     const renderTeam = useCallback(({item: t}: ListRenderItemInfo<Team|TeamModel>) => {
         return (
             <TeamListItem
@@ -55,7 +70,7 @@ export default function TeamList({teams, textColor, iconTextColor, iconBackgroun
 
     return (
         <View style={styles.container}>
-            <FlatList
+            <List
                 data={teams}
                 renderItem={renderTeam}
                 keyExtractor={keyExtractor}
diff --git a/app/components/user_avatars_stack/index.tsx b/app/components/user_avatars_stack/index.tsx
index 57199ba305..d6c096aec1 100644
--- a/app/components/user_avatars_stack/index.tsx
+++ b/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,
         });
diff --git a/app/components/user_avatars_stack/users_list/index.tsx b/app/components/user_avatars_stack/users_list/index.tsx
index eca162fee4..3a8490cb27 100644
--- a/app/components/user_avatars_stack/users_list/index.tsx
+++ b/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}
diff --git a/app/constants/reaction_picker.ts b/app/constants/reaction_picker.ts
index f48bd862f1..57755eefbd 100644
--- a/app/constants/reaction_picker.ts
+++ b/app/constants/reaction_picker.ts
@@ -12,6 +12,7 @@ export const DEFAULT_EMOJIS = [
 export const LARGE_ICON_SIZE = 32;
 export const LARGE_CONTAINER_SIZE = 48;
 export const REACTION_PICKER_HEIGHT = 48;
+export const REACTION_PICKER_MARGIN = 16;
 export const SMALL_CONTAINER_SIZE = 44;
 export const SMALL_ICON_BREAKPOINT = 410;
 export const SMALL_ICON_SIZE = 28;
@@ -21,6 +22,7 @@ export default {
     LARGE_ICON_SIZE,
     LARGE_CONTAINER_SIZE,
     REACTION_PICKER_HEIGHT,
+    REACTION_PICKER_MARGIN,
     SMALL_CONTAINER_SIZE,
     SMALL_ICON_BREAKPOINT,
     SMALL_ICON_SIZE,
diff --git a/app/constants/view.ts b/app/constants/view.ts
index fbc4aa8025..b98b691836 100644
--- a/app/constants/view.ts
+++ b/app/constants/view.ts
@@ -12,7 +12,7 @@ export const TEAM_SIDEBAR_WIDTH = 72;
 export const TABLET_HEADER_HEIGHT = 44;
 export const TABLET_SIDEBAR_WIDTH = 320;
 
-export const IOS_STATUS_BAR_HEIGHT = 20;
+export const STATUS_BAR_HEIGHT = 20;
 export const DEFAULT_HEADER_HEIGHT = Platform.select({android: 56, default: 44});
 export const LARGE_HEADER_TITLE_HEIGHT = 60;
 export const SUBTITLE_HEIGHT = 24;
@@ -25,8 +25,6 @@ export const JOIN_CALL_BAR_HEIGHT = 38;
 export const CURRENT_CALL_BAR_HEIGHT = 74;
 export const CALL_ERROR_BAR_HEIGHT = 62;
 
-export const QUICK_OPTIONS_HEIGHT = 270;
-
 export const ANNOUNCEMENT_BAR_HEIGHT = 40;
 
 export default {
@@ -41,11 +39,10 @@ export default {
     TABLET_SIDEBAR_WIDTH,
     TEAM_SIDEBAR_WIDTH,
     TABLET_HEADER_HEIGHT,
-    IOS_STATUS_BAR_HEIGHT,
+    STATUS_BAR_HEIGHT,
     DEFAULT_HEADER_HEIGHT,
     LARGE_HEADER_TITLE_HEIGHT,
     SUBTITLE_HEIGHT,
     KEYBOARD_TRACKING_OFFSET,
-    QUICK_OPTIONS_HEIGHT,
 };
 
diff --git a/app/products/calls/screens/call_screen/call_screen.tsx b/app/products/calls/screens/call_screen/call_screen.tsx
index bba482a043..95b1dbeb44 100644
--- a/app/products/calls/screens/call_screen/call_screen.tsx
+++ b/app/products/calls/screens/call_screen/call_screen.tsx
@@ -256,7 +256,7 @@ const CallScreen = ({
 }: Props) => {
     const intl = useIntl();
     const theme = useTheme();
-    const insets = useSafeAreaInsets();
+    const {bottom} = useSafeAreaInsets();
     const {width, height} = useWindowDimensions();
     const serverUrl = useServerUrl();
     const {EnableRecordings} = useCallsConfig(serverUrl);
@@ -407,11 +407,11 @@ const CallScreen = ({
         await bottomSheet({
             closeButtonId: 'close-other-actions',
             renderContent,
-            snapPoints: [bottomSheetSnapPoint(items, ITEM_HEIGHT, insets.bottom), 10],
+            snapPoints: [1, bottomSheetSnapPoint(items, ITEM_HEIGHT, bottom)],
             title: intl.formatMessage({id: 'post.options.title', defaultMessage: 'Options'}),
             theme,
         });
-    }, [insets, intl, theme, isHost, EnableRecordings, waitingForRecording, recording, startRecording,
+    }, [bottom, intl, theme, isHost, EnableRecordings, waitingForRecording, recording, startRecording,
         recordOptionTitle, stopRecording, stopRecordingOptionTitle, style, switchToThread, callThreadOptionTitle,
         openChannelOptionTitle]);
 
diff --git a/app/screens/bottom_sheet/button.tsx b/app/screens/bottom_sheet/button.tsx
index 6af564b8d5..837170eda3 100644
--- a/app/screens/bottom_sheet/button.tsx
+++ b/app/screens/bottom_sheet/button.tsx
@@ -2,13 +2,14 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {GestureResponderEvent, StyleSheet, Text, View} from 'react-native';
+import {GestureResponderEvent, Platform, Text, useWindowDimensions, View} from 'react-native';
 
 import CompassIcon from '@components/compass_icon';
 import TouchableWithFeedback from '@components/touchable_with_feedback';
 import {useTheme} from '@context/theme';
+import {useIsTablet} from '@hooks/device';
 import {buttonBackgroundStyle, buttonTextStyle} from '@utils/buttonStyles';
-import {changeOpacity} from '@utils/theme';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
 type Props = {
     disabled?: boolean;
@@ -18,22 +19,43 @@ type Props = {
     text?: string;
 }
 
-const styles = StyleSheet.create({
-    button: {
-        display: 'flex',
-        flexDirection: 'row',
-    },
-    icon_container: {
-        width: 24,
-        height: 24,
-        top: -1,
-        marginRight: 4,
-    },
+const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
+    return {
+        button: {
+            display: 'flex',
+            flexDirection: 'row',
+        },
+        buttonContainer: {
+            paddingHorizontal: 20,
+        },
+        container: {
+            backgroundColor: theme.centerChannelBg,
+        },
+        iconContainer: {
+            width: 24,
+            height: 24,
+            top: -1,
+            marginRight: 4,
+        },
+        separator: {
+            height: 1,
+            right: 20,
+            borderTopWidth: 1,
+            borderColor: changeOpacity(theme.centerChannelColor, 0.08),
+            marginBottom: 20,
+        },
+    };
 });
 
-export default function BottomSheetButton({disabled = false, onPress, icon, testID, text}: Props) {
-    const theme = useTheme();
+export const BUTTON_HEIGHT = 101;
 
+function BottomSheetButton({disabled = false, onPress, icon, testID, text}: Props) {
+    const theme = useTheme();
+    const dimensions = useWindowDimensions();
+    const isTablet = useIsTablet();
+    const styles = getStyleSheet(theme);
+
+    const separatorWidth = Math.max(dimensions.width, 450);
     const buttonType = disabled ? 'disabled' : 'default';
     const styleButtonText = buttonTextStyle(theme, 'lg', 'primary', buttonType);
     const styleButtonBackground = buttonBackgroundStyle(theme, 'lg', 'primary', buttonType);
@@ -41,27 +63,35 @@ export default function BottomSheetButton({disabled = false, onPress, icon, test
     const iconColor = disabled ? changeOpacity(theme.centerChannelColor, 0.32) : theme.buttonColor;
 
     return (
-        <TouchableWithFeedback
-            onPress={onPress}
-            type='opacity'
-            style={[styles.button, styleButtonBackground]}
-            testID={testID}
-        >
-            {icon && (
-                <View style={styles.icon_container}>
-                    <CompassIcon
-                        size={24}
-                        name={icon}
-                        color={iconColor}
-                    />
-                </View>
-            )}
-            {text && (
-                <Text
-                    style={styleButtonText}
-                >{text}</Text>
-            )}
+        <View style={styles.container}>
+            <View style={[styles.separator, {width: separatorWidth}]}/>
+            <View style={styles.buttonContainer}>
+                <TouchableWithFeedback
+                    onPress={onPress}
+                    type='opacity'
+                    style={[styles.button, styleButtonBackground]}
+                    testID={testID}
+                >
+                    {icon && (
+                        <View style={styles.iconContainer}>
+                            <CompassIcon
+                                size={24}
+                                name={icon}
+                                color={iconColor}
+                            />
+                        </View>
+                    )}
+                    {text && (
+                        <Text
+                            style={styleButtonText}
+                        >{text}</Text>
+                    )}
 
-        </TouchableWithFeedback>
+                </TouchableWithFeedback>
+                <View style={{paddingBottom: Platform.select({ios: (isTablet ? 20 : 32), android: 20})}}/>
+            </View>
+        </View>
     );
 }
+
+export default BottomSheetButton;
diff --git a/app/screens/bottom_sheet/content.tsx b/app/screens/bottom_sheet/content.tsx
index 8cd23947ea..a4e76840c5 100644
--- a/app/screens/bottom_sheet/content.tsx
+++ b/app/screens/bottom_sheet/content.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {GestureResponderEvent, Platform, Text, useWindowDimensions, View} from 'react-native';
+import {GestureResponderEvent, Text, useWindowDimensions, View} from 'react-native';
 
 import {useTheme} from '@context/theme';
 import {useIsTablet} from '@hooks/device';
@@ -33,7 +33,7 @@ export const TITLE_SEPARATOR_MARGIN_TABLET = 20;
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
     return {
         container: {
-            flex: 1,
+            flexGrow: 1,
         },
         titleContainer: {
             marginTop: TITLE_MARGIN_TOP,
@@ -83,18 +83,15 @@ const BottomSheetContent = ({buttonText, buttonIcon, children, disableButton, on
                 {children}
             </>
             {showButton && (
-                <>
-                    <View style={[styles.separator, {width: separatorWidth}]}/>
-                    <Button
-                        disabled={disableButton}
-                        onPress={onPress}
-                        icon={buttonIcon}
-                        testID={buttonTestId}
-                        text={buttonText}
-                    />
-                    <View style={{paddingBottom: Platform.select({ios: (isTablet ? 20 : 32), android: 20})}}/>
-                </>
-            )}
+                <Button
+                    disabled={disableButton}
+                    onPress={onPress}
+                    icon={buttonIcon}
+                    testID={buttonTestId}
+                    text={buttonText}
+                />
+            )
+            }
         </View>
     );
 };
diff --git a/app/screens/bottom_sheet/index.tsx b/app/screens/bottom_sheet/index.tsx
index 1c0d790a8c..260acd2bcb 100644
--- a/app/screens/bottom_sheet/index.tsx
+++ b/app/screens/bottom_sheet/index.tsx
@@ -1,13 +1,11 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {ReactNode, useCallback, useEffect, useRef} from 'react';
-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';
-import RNBottomSheet from 'reanimated-bottom-sheet';
+import BottomSheetM, {BottomSheetBackdrop, BottomSheetBackdropProps, BottomSheetFooterProps} from '@gorhom/bottom-sheet';
+import React, {ReactNode, useCallback, useEffect, useMemo, useRef} from 'react';
+import {DeviceEventEmitter, Keyboard, View} from 'react-native';
 
+import useNavButtonPressed from '@app/hooks/navigation_button_pressed';
 import {Events} from '@constants';
 import {useTheme} from '@context/theme';
 import useAndroidHardwareBackHandler from '@hooks/android_back_handler';
@@ -18,36 +16,94 @@ import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
 import Indicator from './indicator';
 
-type SlideUpPanelProps = {
+import type {WithSpringConfig} from 'react-native-reanimated';
+
+export {default as BottomSheetButton, BUTTON_HEIGHT} from './button';
+export {default as BottomSheetContent, TITLE_HEIGHT} from './content';
+
+type Props = {
     closeButtonId?: string;
     componentId: string;
     initialSnapIndex?: number;
+    footerComponent?: React.FC<BottomSheetFooterProps>;
     renderContent: () => ReactNode;
     snapPoints?: Array<string | number>;
     testID?: string;
 }
 
-export const PADDING_TOP_MOBILE = 20;
-export const PADDING_TOP_TABLET = 8;
+const PADDING_TOP_MOBILE = 20;
+const PADDING_TOP_TABLET = 8;
 
-const BottomSheet = ({closeButtonId, componentId, initialSnapIndex = 0, renderContent, snapPoints = ['90%', '50%', 50], testID}: SlideUpPanelProps) => {
-    const sheetRef = useRef<RNBottomSheet>(null);
+export const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
+    return {
+        bottomSheet: {
+            borderTopStartRadius: 24,
+            borderTopEndRadius: 24,
+            shadowOffset: {
+                width: 0,
+                height: 8,
+            },
+            shadowOpacity: 0.12,
+            shadowRadius: 24,
+            shadowColor: '#000',
+            elevation: 24,
+        },
+        bottomSheetBackground: {
+            backgroundColor: theme.centerChannelBg,
+            borderColor: changeOpacity(theme.centerChannelColor, 0.16),
+        },
+        content: {
+            flex: 1,
+            paddingHorizontal: 20,
+            paddingTop: PADDING_TOP_MOBILE,
+        },
+        contentTablet: {
+            paddingTop: PADDING_TOP_TABLET,
+        },
+        separator: {
+            height: 1,
+            borderTopWidth: 1,
+            borderColor: changeOpacity(theme.centerChannelColor, 0.08),
+        },
+    };
+});
+
+export const animatedConfig: Omit<WithSpringConfig, 'velocity'> = {
+    damping: 50,
+    mass: 0.3,
+    stiffness: 121.6,
+    overshootClamping: true,
+    restSpeedThreshold: 0.3,
+    restDisplacementThreshold: 0.3,
+};
+
+const BottomSheet = ({
+    closeButtonId,
+    componentId,
+    initialSnapIndex = 1,
+    footerComponent,
+    renderContent,
+    snapPoints = [1, '50%', '90%'],
+    testID,
+}: Props) => {
+    const sheetRef = useRef<BottomSheetM>(null);
     const isTablet = useIsTablet();
     const theme = useTheme();
-    const firstRun = useRef(isTablet);
-    const lastSnap = snapPoints.length - 1;
-    const backdropOpacity = useSharedValue(0);
+    const styles = getStyleSheet(theme);
+
+    const bottomSheetBackgroundStyle = useMemo(() => [
+        styles.bottomSheetBackground,
+        {borderWidth: isTablet ? 0 : 1},
+    ], [isTablet, styles]);
 
     const close = useCallback(() => {
-        if (firstRun.current) {
-            dismissModal({componentId});
-        }
+        dismissModal({componentId});
     }, [componentId]);
 
     useEffect(() => {
         const listener = DeviceEventEmitter.addListener(Events.CLOSE_BOTTOM_SHEET, () => {
             if (sheetRef.current) {
-                sheetRef.current.snapTo(lastSnap);
+                sheetRef.current.close();
             } else {
                 close();
             }
@@ -58,84 +114,40 @@ const BottomSheet = ({closeButtonId, componentId, initialSnapIndex = 0, renderCo
 
     const handleClose = useCallback(() => {
         if (sheetRef.current) {
-            sheetRef.current.snapTo(1);
+            sheetRef.current.close();
         } else {
             close();
         }
     }, []);
 
-    const handleCloseEnd = useCallback(() => {
-        if (firstRun.current) {
-            backdropOpacity.value = 0;
-            setTimeout(close, 250);
+    const handleDismissIfNeeded = useCallback((index: number) => {
+        if (index <= 0) {
+            close();
         }
     }, []);
 
-    const handleOpenStart = useCallback(() => {
-        backdropOpacity.value = 1;
-    }, []);
-
     useAndroidHardwareBackHandler(componentId, handleClose);
+    useNavButtonPressed(closeButtonId || '', componentId, close, [close]);
 
     useEffect(() => {
         hapticFeedback();
         Keyboard.dismiss();
-        sheetRef.current?.snapTo(initialSnapIndex);
-        backdropOpacity.value = 1;
-        const t = setTimeout(() => {
-            firstRun.current = true;
-        }, 100);
-
-        return () => clearTimeout(t);
     }, []);
 
-    useEffect(() => {
-        const navigationEvents = RNN.events().registerNavigationButtonPressedListener(({buttonId}) => {
-            if (closeButtonId && buttonId === closeButtonId) {
-                close();
-            }
-        });
-
-        return () => navigationEvents.remove();
-    }, [close]);
-
-    const backdropStyle = useAnimatedStyle(() => ({
-        opacity: withTiming(backdropOpacity.value, {duration: 250, easing: Easing.inOut(Easing.linear)}),
-        backgroundColor: 'rgba(0, 0, 0, 0.6)',
-    }));
-
-    const renderBackdrop = () => {
+    const renderBackdrop = useCallback((props: BottomSheetBackdropProps) => {
         return (
-            <TapGestureHandler
-                shouldCancelWhenOutside={true}
-                maxDist={10}
-                onHandlerStateChange={(event) => {
-                    if (event.nativeEvent.state === State.END && event.nativeEvent.oldState === State.ACTIVE) {
-                        sheetRef.current?.snapTo(lastSnap);
-                    }
-                }}
-                testID={`${testID}.backdrop`}
-            >
-                <Animated.View
-                    style={[StyleSheet.absoluteFill, backdropStyle]}
-                />
-            </TapGestureHandler>
+            <BottomSheetBackdrop
+                {...props}
+                disappearsOnIndex={0}
+                appearsOnIndex={1}
+                opacity={0.6}
+            />
         );
-    };
+    }, []);
 
     const renderContainerContent = () => (
         <View
-            style={{
-                backgroundColor: theme.centerChannelBg,
-                borderColor: changeOpacity(theme.centerChannelColor, 0.16),
-                borderWidth: isTablet ? 0 : 1,
-                opacity: 1,
-                paddingHorizontal: 20,
-                paddingTop: isTablet ? PADDING_TOP_TABLET : PADDING_TOP_MOBILE,
-                height: '100%',
-                width: '100%',
-                alignSelf: 'center',
-            }}
+            style={[styles.content, isTablet && styles.contentTablet]}
             testID={`${testID}.screen`}
         >
             {renderContent()}
@@ -143,7 +155,6 @@ const BottomSheet = ({closeButtonId, componentId, initialSnapIndex = 0, renderCo
     );
 
     if (isTablet) {
-        const styles = getStyleSheet(theme);
         return (
             <>
                 <View style={styles.separator}/>
@@ -153,32 +164,22 @@ const BottomSheet = ({closeButtonId, componentId, initialSnapIndex = 0, renderCo
     }
 
     return (
-        <>
-            <RNBottomSheet
-                ref={sheetRef}
-                snapPoints={snapPoints}
-                borderRadius={12}
-                initialSnap={snapPoints.length - 1}
-                renderContent={renderContainerContent}
-                onCloseEnd={handleCloseEnd}
-                onOpenStart={handleOpenStart}
-                enabledBottomInitialAnimation={false}
-                renderHeader={Indicator}
-                enabledContentTapInteraction={false}
-            />
-            {renderBackdrop()}
-        </>
+        <BottomSheetM
+            ref={sheetRef}
+            index={initialSnapIndex}
+            snapPoints={snapPoints}
+            animateOnMount={true}
+            backdropComponent={renderBackdrop}
+            onChange={handleDismissIfNeeded}
+            animationConfigs={animatedConfig}
+            handleComponent={Indicator}
+            style={styles.bottomSheet}
+            backgroundStyle={bottomSheetBackgroundStyle}
+            footerComponent={footerComponent}
+        >
+            {renderContainerContent()}
+        </BottomSheetM>
     );
 };
 
-const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
-    return {
-        separator: {
-            height: 1,
-            borderTopWidth: 1,
-            borderColor: changeOpacity(theme.centerChannelColor, 0.08),
-        },
-    };
-});
-
 export default BottomSheet;
diff --git a/app/screens/bottom_sheet/indicator.tsx b/app/screens/bottom_sheet/indicator.tsx
index 0534a12897..a34bc769eb 100644
--- a/app/screens/bottom_sheet/indicator.tsx
+++ b/app/screens/bottom_sheet/indicator.tsx
@@ -6,9 +6,9 @@ import {Animated, StyleSheet, View} from 'react-native';
 
 const styles = StyleSheet.create({
     dragIndicatorContainer: {
-        marginVertical: 10,
         alignItems: 'center',
         justifyContent: 'center',
+        top: -15,
     },
     dragIndicator: {
         backgroundColor: 'white',
diff --git a/app/screens/browse_channels/channel_dropdown.tsx b/app/screens/browse_channels/channel_dropdown.tsx
index 161c8b2811..3be4fda24e 100644
--- a/app/screens/browse_channels/channel_dropdown.tsx
+++ b/app/screens/browse_channels/channel_dropdown.tsx
@@ -48,7 +48,7 @@ export default function ChannelDropdown({
     sharedChannelsEnabled,
 }: Props) {
     const intl = useIntl();
-    const insets = useSafeAreaInsets();
+    const {bottom} = useSafeAreaInsets();
     const theme = useTheme();
     const style = getStyleFromTheme(theme);
 
@@ -73,11 +73,11 @@ export default function ChannelDropdown({
             items += 1;
         }
 
-        const itemsSnap = bottomSheetSnapPoint(items, ITEM_HEIGHT, insets.bottom) + TITLE_HEIGHT;
+        const itemsSnap = bottomSheetSnapPoint(items, ITEM_HEIGHT, bottom) + TITLE_HEIGHT;
         bottomSheet({
             title: intl.formatMessage({id: 'browse_channels.dropdownTitle', defaultMessage: 'Show'}),
             renderContent,
-            snapPoints: [itemsSnap, 10],
+            snapPoints: [1, itemsSnap],
             closeButtonId: 'close',
             theme,
         });
diff --git a/app/screens/channel/header/header.tsx b/app/screens/channel/header/header.tsx
index 305fad8894..d01e81232c 100644
--- a/app/screens/channel/header/header.tsx
+++ b/app/screens/channel/header/header.tsx
@@ -4,14 +4,16 @@
 import React, {useCallback, useMemo} from 'react';
 import {useIntl} from 'react-intl';
 import {Keyboard, Platform, Text, View} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
+import {bottomSheetSnapPoint} from '@app/utils/helpers';
+import {CHANNEL_ACTIONS_OPTIONS_HEIGHT} from '@components/channel_actions/channel_actions';
 import CompassIcon from '@components/compass_icon';
 import CustomStatusEmoji from '@components/custom_status/custom_status_emoji';
 import NavigationHeader from '@components/navigation_header';
 import {ITEM_HEIGHT} from '@components/option_item';
 import RoundedHeaderContext from '@components/rounded_header_context';
 import {General, Screens} from '@constants';
-import {QUICK_OPTIONS_HEIGHT} from '@constants/view';
 import {useTheme} from '@context/theme';
 import {useIsTablet} from '@hooks/device';
 import {useDefaultHeaderHeight} from '@hooks/header';
@@ -22,7 +24,7 @@ import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
 
 import OtherMentionsBadge from './other_mentions_badge';
-import QuickActions from './quick_actions';
+import QuickActions, {MARGIN, SEPARATOR_HEIGHT} from './quick_actions';
 
 import type {HeaderRightButton} from '@components/navigation_header/header';
 
@@ -70,6 +72,7 @@ const ChannelHeader = ({
 }: ChannelProps) => {
     const intl = useIntl();
     const isTablet = useIsTablet();
+    const {bottom} = useSafeAreaInsets();
     const theme = useTheme();
     const styles = getStyleSheet(theme);
     const defaultHeight = useDefaultHeaderHeight();
@@ -132,7 +135,8 @@ const ChannelHeader = ({
         }
 
         // When calls is enabled, we need space to move the "Copy Link" from a button to an option
-        const height = QUICK_OPTIONS_HEIGHT + (callsAvailable && !isDMorGM ? ITEM_HEIGHT : 0);
+        const items = callsAvailable && !isDMorGM ? 3 : 2;
+        const height = CHANNEL_ACTIONS_OPTIONS_HEIGHT + SEPARATOR_HEIGHT + MARGIN + (items * ITEM_HEIGHT);
 
         const renderContent = () => {
             return (
@@ -147,11 +151,11 @@ const ChannelHeader = ({
         bottomSheet({
             title: '',
             renderContent,
-            snapPoints: [height, 10],
+            snapPoints: [1, bottomSheetSnapPoint(1, height, bottom)],
             theme,
             closeButtonId: 'close-channel-quick-actions',
         });
-    }, [channelId, isDMorGM, isTablet, onTitlePress, theme, callsAvailable]);
+    }, [bottom, channelId, isDMorGM, isTablet, onTitlePress, theme, callsAvailable]);
 
     const rightButtons: HeaderRightButton[] = useMemo(() => ([
 
diff --git a/app/screens/channel/header/quick_actions/index.tsx b/app/screens/channel/header/quick_actions/index.tsx
index a9b8be1853..716e09a212 100644
--- a/app/screens/channel/header/quick_actions/index.tsx
+++ b/app/screens/channel/header/quick_actions/index.tsx
@@ -8,7 +8,6 @@ import ChannelActions from '@components/channel_actions';
 import CopyChannelLinkOption from '@components/channel_actions/copy_channel_link_option';
 import InfoBox from '@components/channel_actions/info_box';
 import LeaveChannelLabel from '@components/channel_actions/leave_channel_label';
-import {QUICK_OPTIONS_HEIGHT} from '@constants/view';
 import {useTheme} from '@context/theme';
 import {dismissBottomSheet} from '@screens/navigation';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
@@ -19,20 +18,23 @@ type Props = {
     isDMorGM: boolean;
 }
 
+export const SEPARATOR_HEIGHT = 17;
+export const MARGIN = 8;
+
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     container: {
-        minHeight: QUICK_OPTIONS_HEIGHT,
+        flex: 1,
     },
     line: {
         backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
         height: 1,
-        marginVertical: 8,
+        marginVertical: MARGIN,
     },
     wrapper: {
-        marginBottom: 8,
+        marginBottom: MARGIN,
     },
     separator: {
-        width: 8,
+        width: MARGIN,
     },
 }));
 
diff --git a/app/screens/edit_profile/components/profile_image_picker.tsx b/app/screens/edit_profile/components/profile_image_picker.tsx
index b49780f49c..7aead7a2e7 100644
--- a/app/screens/edit_profile/components/profile_image_picker.tsx
+++ b/app/screens/edit_profile/components/profile_image_picker.tsx
@@ -14,6 +14,7 @@ import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
 import {useIsTablet} from '@hooks/device';
 import NetworkManager from '@managers/network_manager';
+import {TITLE_HEIGHT} from '@screens/bottom_sheet/content';
 import PanelItem from '@screens/edit_profile/components/panel_item';
 import {bottomSheet} from '@screens/navigation';
 import PickerUtil from '@utils/file/file_picker';
@@ -121,13 +122,12 @@ const ProfileImagePicker = ({
             );
         };
 
-        const snapPointsCount = canRemovePicture ? 5 : 4;
-        const snapPoint = bottomSheetSnapPoint(snapPointsCount, ITEM_HEIGHT, bottom);
+        const snapPoint = bottomSheetSnapPoint(4, ITEM_HEIGHT, bottom) + TITLE_HEIGHT;
 
         return bottomSheet({
             closeButtonId: 'close-edit-profile',
             renderContent,
-            snapPoints: [snapPoint, 10],
+            snapPoints: [1, snapPoint],
             title: 'Change profile photo',
             theme,
         });
diff --git a/app/screens/home/account/components/options/user_presence/index.tsx b/app/screens/home/account/components/options/user_presence/index.tsx
index 96e0fe2be4..23e7df7c60 100644
--- a/app/screens/home/account/components/options/user_presence/index.tsx
+++ b/app/screens/home/account/components/options/user_presence/index.tsx
@@ -129,7 +129,7 @@ const UserStatus = ({currentUser}: Props) => {
         bottomSheet({
             closeButtonId: 'close-set-user-status',
             renderContent,
-            snapPoints: [(snapPoint + TITLE_HEIGHT), 10],
+            snapPoints: [1, (snapPoint + TITLE_HEIGHT)],
             title: intl.formatMessage({id: 'user_status.title', defaultMessage: 'Status'}),
             theme,
         });
diff --git a/app/screens/home/channel_list/categories_list/header/header.tsx b/app/screens/home/channel_list/categories_list/header/header.tsx
index 8cf942240b..ea94719e49 100644
--- a/app/screens/home/channel_list/categories_list/header/header.tsx
+++ b/app/screens/home/channel_list/categories_list/header/header.tsx
@@ -105,7 +105,7 @@ const ChannelListHeader = ({
     const theme = useTheme();
     const isTablet = useIsTablet();
     const intl = useIntl();
-    const insets = useSafeAreaInsets();
+    const {bottom} = useSafeAreaInsets();
     const serverDisplayName = useServerDisplayName();
     const marginLeft = useSharedValue(iconPad ? 50 : 0);
     const styles = getStyles(theme);
@@ -150,11 +150,11 @@ const ChannelListHeader = ({
         bottomSheet({
             closeButtonId,
             renderContent,
-            snapPoints: [bottomSheetSnapPoint(items, ITEM_HEIGHT, insets.bottom) + (separators * SEPARATOR_HEIGHT), 10],
+            snapPoints: [1, bottomSheetSnapPoint(items, ITEM_HEIGHT, bottom) + (separators * SEPARATOR_HEIGHT)],
             theme,
             title: intl.formatMessage({id: 'home.header.plus_menu', defaultMessage: 'Options'}),
         });
-    }, [intl, insets, isTablet, theme]);
+    }, [intl, bottom, isTablet, theme]);
 
     const onPushAlertPress = useCallback(() => {
         if (pushProxyStatus === PUSH_PROXY_STATUS_NOT_AVAILABLE) {
diff --git a/app/screens/home/channel_list/servers/index.tsx b/app/screens/home/channel_list/servers/index.tsx
index 2a29d3ff53..4675f6db9a 100644
--- a/app/screens/home/channel_list/servers/index.tsx
+++ b/app/screens/home/channel_list/servers/index.tsx
@@ -1,9 +1,11 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {BottomSheetProps} from '@gorhom/bottom-sheet';
 import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
 import {StyleSheet} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import ServerIcon from '@components/server_icon';
 import {useServerUrl} from '@context/server';
@@ -11,14 +13,21 @@ import {useTheme} from '@context/theme';
 import {subscribeAllServers} from '@database/subscription/servers';
 import {subscribeUnreadAndMentionsByServer, UnreadObserverArgs} from '@database/subscription/unreads';
 import {useIsTablet} from '@hooks/device';
+import {BUTTON_HEIGHT, TITLE_HEIGHT} from '@screens/bottom_sheet';
 import {bottomSheet} from '@screens/navigation';
+import {bottomSheetSnapPoint} from '@utils/helpers';
 import {sortServersByDisplayName} from '@utils/server';
 
-import ServerList from './servers_list';
+import ServerList, {AddServerButton} from './servers_list';
 
 import type ServersModel from '@typings/database/models/app/servers';
 import type {UnreadMessages, UnreadSubscription} from '@typings/database/subscriptions';
 
+export type ServersRef = {
+    openServers: () => void;
+}
+
+export const SERVER_ITEM_HEIGHT = 72;
 const subscriptions: Map<string, UnreadSubscription> = new Map();
 
 const styles = StyleSheet.create({
@@ -34,16 +43,13 @@ const styles = StyleSheet.create({
     },
 });
 
-export type ServersRef = {
-    openServers: () => void;
-}
-
-const Servers = React.forwardRef<ServersRef>((props, ref) => {
+const Servers = React.forwardRef<ServersRef>((_, ref) => {
     const intl = useIntl();
     const [total, setTotal] = useState<UnreadMessages>({mentions: 0, unread: false});
     const registeredServers = useRef<ServersModel[]|undefined>();
     const currentServerUrl = useServerUrl();
     const isTablet = useIsTablet();
+    const {bottom} = useSafeAreaInsets();
     const theme = useTheme();
 
     const updateTotal = () => {
@@ -111,21 +117,25 @@ const Servers = React.forwardRef<ServersRef>((props, ref) => {
                 );
             };
 
-            const snapPoints = ['50%', 10];
-            if (registeredServers.current.length > 3) {
-                snapPoints[0] = '90%';
+            const snapPoints: BottomSheetProps['snapPoints'] = [
+                1,
+                bottomSheetSnapPoint(Math.min(2.5, registeredServers.current.length), 72, bottom) + TITLE_HEIGHT + BUTTON_HEIGHT,
+            ];
+            if (registeredServers.current.length > 1) {
+                snapPoints.push('90%');
             }
 
             const closeButtonId = 'close-your-servers';
             bottomSheet({
                 closeButtonId,
                 renderContent,
+                footerComponent: AddServerButton,
                 snapPoints,
                 theme,
                 title: intl.formatMessage({id: 'your.servers', defaultMessage: 'Your servers'}),
             });
         }
-    }, [isTablet, theme]);
+    }, [bottom, isTablet, theme]);
 
     useImperativeHandle(ref, () => ({
         openServers: onPress,
diff --git a/app/screens/home/channel_list/servers/servers_list/add_server_button.tsx b/app/screens/home/channel_list/servers/servers_list/add_server_button.tsx
new file mode 100644
index 0000000000..649e694609
--- /dev/null
+++ b/app/screens/home/channel_list/servers/servers_list/add_server_button.tsx
@@ -0,0 +1,32 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {BottomSheetFooter, BottomSheetFooterProps} from '@gorhom/bottom-sheet';
+import React, {useCallback} from 'react';
+import {useIntl} from 'react-intl';
+
+import {useTheme} from '@context/theme';
+import {BottomSheetButton} from '@screens/bottom_sheet';
+import {addNewServer} from '@utils/server';
+
+const AddServerButton = (props: BottomSheetFooterProps) => {
+    const theme = useTheme();
+    const {formatMessage} = useIntl();
+
+    const onAddServer = useCallback(async () => {
+        addNewServer(theme);
+    }, []);
+
+    return (
+        <BottomSheetFooter {...props}>
+            <BottomSheetButton
+                onPress={onAddServer}
+                icon='plus'
+                testID='servers.create_button'
+                text={formatMessage({id: 'servers.create_button', defaultMessage: 'Add a server'})}
+            />
+        </BottomSheetFooter>
+    );
+};
+
+export default AddServerButton;
diff --git a/app/screens/home/channel_list/servers/servers_list/index.tsx b/app/screens/home/channel_list/servers/servers_list/index.tsx
index 5e645186b7..045dfe9d6b 100644
--- a/app/screens/home/channel_list/servers/servers_list/index.tsx
+++ b/app/screens/home/channel_list/servers/servers_list/index.tsx
@@ -1,10 +1,10 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useCallback} from 'react';
+import {BottomSheetFlatList} from '@gorhom/bottom-sheet';
+import React, {useCallback, useMemo} from 'react';
 import {useIntl} from 'react-intl';
-import {ListRenderItemInfo, StyleSheet, View} from 'react-native';
-import {FlatList} from 'react-native-gesture-handler';
+import {FlatList, ListRenderItemInfo, StyleSheet, View} from 'react-native';
 
 import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
@@ -16,13 +16,15 @@ import ServerItem from './server_item';
 
 import type ServersModel from '@typings/database/models/app/servers';
 
+export {default as AddServerButton} from './add_server_button';
+
 type Props = {
     servers: ServersModel[];
 }
 
 const styles = StyleSheet.create({
     container: {
-        flex: 1,
+        flexGrow: 1,
     },
     contentContainer: {
         marginVertical: 4,
@@ -51,18 +53,20 @@ const ServerList = ({servers}: Props) => {
         );
     }, []);
 
+    const List = useMemo(() => (isTablet ? FlatList : BottomSheetFlatList), [isTablet]);
+
     return (
         <BottomSheetContent
             buttonIcon='plus'
             buttonText={intl.formatMessage({id: 'servers.create_button', defaultMessage: 'Add a server'})}
             onPress={onAddServer}
-            showButton={true}
+            showButton={isTablet}
             showTitle={!isTablet}
             testID='server_list'
             title={intl.formatMessage({id: 'your.servers', defaultMessage: 'Your servers'})}
         >
             <View style={[styles.container, {marginTop: isTablet ? 12 : 0}]}>
-                <FlatList
+                <List
                     data={servers}
                     renderItem={renderServer}
                     keyExtractor={keyExtractor}
diff --git a/app/screens/home/search/select_team_slideup.tsx b/app/screens/home/search/bottom_sheet_team_list.tsx
similarity index 88%
rename from app/screens/home/search/select_team_slideup.tsx
rename to app/screens/home/search/bottom_sheet_team_list.tsx
index e768940931..3dc6f04fca 100644
--- a/app/screens/home/search/select_team_slideup.tsx
+++ b/app/screens/home/search/bottom_sheet_team_list.tsx
@@ -17,7 +17,7 @@ type Props = {
     title: string;
 }
 
-export default function SelectTeamSlideUp({teams, title, setTeamId, teamId}: Props) {
+export default function BottomSheetTeamList({teams, title, setTeamId, teamId}: Props) {
     const isTablet = useIsTablet();
     const showTitle = !isTablet && Boolean(teams.length);
 
@@ -38,6 +38,7 @@ export default function SelectTeamSlideUp({teams, title, setTeamId, teamId}: Pro
                 teams={teams}
                 onPress={onPress}
                 testID='search.select_team_slide_up.team_list'
+                type={isTablet ? 'FlatList' : 'BottomSheetFlatList'}
             />
         </BottomSheetContent>
     );
diff --git a/app/screens/home/search/results/file_options/mobile_options.tsx b/app/screens/home/search/results/file_options/mobile_options.tsx
index a2a0c4f3f0..cb8d305ea1 100644
--- a/app/screens/home/search/results/file_options/mobile_options.tsx
+++ b/app/screens/home/search/results/file_options/mobile_options.tsx
@@ -40,7 +40,8 @@ export const showMobileOptionsBottomSheet = ({
         closeButtonId: 'close-search-file-options',
         renderContent,
         snapPoints: [
-            bottomSheetSnapPoint(numOptions, ITEM_HEIGHT, insets.bottom) + HEADER_HEIGHT, 10,
+            1,
+            bottomSheetSnapPoint(numOptions, ITEM_HEIGHT, insets.bottom) + HEADER_HEIGHT,
         ],
         theme,
         title: '',
diff --git a/app/screens/home/search/results/header.tsx b/app/screens/home/search/results/header.tsx
index 8f5a5d5f78..0ba4fd47fb 100644
--- a/app/screens/home/search/results/header.tsx
+++ b/app/screens/home/search/results/header.tsx
@@ -93,12 +93,13 @@ const Header = ({
 
     const snapPoints = useMemo(() => {
         return [
+            1,
             bottomSheetSnapPoint(
                 NUMBER_FILTER_ITEMS,
                 FILTER_ITEM_HEIGHT,
                 bottom,
             ) + TITLE_HEIGHT + DIVIDERS_HEIGHT + (isTablet ? TITLE_SEPARATOR_MARGIN_TABLET : TITLE_SEPARATOR_MARGIN),
-            10];
+        ];
     }, []);
 
     const handleFilterPress = useCallback(() => {
diff --git a/app/screens/home/search/team_picker_icon.tsx b/app/screens/home/search/team_picker_icon.tsx
index be14b9e00e..19c6cdd7a1 100644
--- a/app/screens/home/search/team_picker_icon.tsx
+++ b/app/screens/home/search/team_picker_icon.tsx
@@ -3,23 +3,28 @@
 
 import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
-import {View, useWindowDimensions} from 'react-native';
+import {View} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import CompassIcon from '@components/compass_icon';
+import {ITEM_HEIGHT} from '@components/slide_up_panel_item';
 import TeamIcon from '@components/team_sidebar/team_list/team_item/team_icon';
 import TouchableWithFeedback from '@components/touchable_with_feedback';
 import {useTheme} from '@context/theme';
+import {TITLE_HEIGHT} from '@screens/bottom_sheet';
 import {bottomSheet} from '@screens/navigation';
+import {bottomSheetSnapPoint} from '@utils/helpers';
 import {preventDoubleTap} from '@utils/tap';
-import {getTeamsSnapHeight} from '@utils/team_list';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
-import SelectTeamSlideUp from './select_team_slideup';
+import BottomSheetTeamList from './bottom_sheet_team_list';
 
+import type {BottomSheetProps} from '@gorhom/bottom-sheet';
 import type TeamModel from '@typings/database/models/servers/team';
 
 const MENU_DOWN_ICON_SIZE = 24;
+const NO_TEAMS_HEIGHT = 392;
+
 const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
     return {
         teamContainer: {
@@ -52,9 +57,8 @@ type Props = {
 const TeamPickerIcon = ({size = 24, divider = false, setTeamId, teams, teamId}: Props) => {
     const intl = useIntl();
     const theme = useTheme();
-    const dimensions = useWindowDimensions();
     const styles = getStyleFromTheme(theme);
-    const insets = useSafeAreaInsets();
+    const {bottom} = useSafeAreaInsets();
 
     const selectedTeam = teams.find((t) => t.id === teamId);
 
@@ -63,7 +67,7 @@ const TeamPickerIcon = ({size = 24, divider = false, setTeamId, teams, teamId}:
     const handleTeamChange = useCallback(preventDoubleTap(() => {
         const renderContent = () => {
             return (
-                <SelectTeamSlideUp
+                <BottomSheetTeamList
                     setTeamId={setTeamId}
                     teams={teams}
                     teamId={teamId}
@@ -72,15 +76,23 @@ const TeamPickerIcon = ({size = 24, divider = false, setTeamId, teams, teamId}:
             );
         };
 
-        const height = getTeamsSnapHeight({dimensions, teams, insets});
+        const snapPoints: BottomSheetProps['snapPoints'] = [
+            1,
+            teams.length ? (bottomSheetSnapPoint(Math.min(3, teams.length), ITEM_HEIGHT, bottom) + TITLE_HEIGHT) : NO_TEAMS_HEIGHT,
+        ];
+
+        if (teams.length > 3) {
+            snapPoints.push('90%');
+        }
+
         bottomSheet({
             closeButtonId: 'close-team_list',
             renderContent,
-            snapPoints: [height, 10],
+            snapPoints,
             theme,
             title,
         });
-    }), [theme, setTeamId, teamId, teams]);
+    }), [theme, setTeamId, teamId, teams, bottom]);
 
     return (
         <>
diff --git a/app/screens/navigation.ts b/app/screens/navigation.ts
index 8c77176e1b..9be856a49e 100644
--- a/app/screens/navigation.ts
+++ b/app/screens/navigation.ts
@@ -17,6 +17,7 @@ import NavigationStore from '@store/navigation_store';
 import {appearanceControlledScreens, mergeNavigationOptions} from '@utils/navigation';
 import {changeOpacity, setNavigatorStyles} from '@utils/theme';
 
+import type {BottomSheetFooterProps} from '@gorhom/bottom-sheet';
 import type {LaunchProps} from '@typings/launch';
 import type {NavButtons} from '@typings/screens/navigation';
 
@@ -738,13 +739,14 @@ export async function dismissOverlay(componentId: string) {
 type BottomSheetArgs = {
     closeButtonId: string;
     initialSnapIndex?: number;
+    footerComponent?: React.FC<BottomSheetFooterProps>;
     renderContent: () => JSX.Element;
     snapPoints: Array<number | string>;
     theme: Theme;
     title: string;
 }
 
-export async function bottomSheet({title, renderContent, snapPoints, initialSnapIndex = 0, theme, closeButtonId}: BottomSheetArgs) {
+export async function bottomSheet({title, renderContent, footerComponent, snapPoints, initialSnapIndex = 1, theme, closeButtonId}: BottomSheetArgs) {
     const {isSplitView} = await isRunningInSplitView();
     const isTablet = Device.IS_TABLET && !isSplitView;
 
@@ -753,12 +755,14 @@ export async function bottomSheet({title, renderContent, snapPoints, initialSnap
             closeButtonId,
             initialSnapIndex,
             renderContent,
+            footerComponent,
             snapPoints,
         }, bottomSheetModalOptions(theme, closeButtonId));
     } else {
         showModalOverCurrentContext(Screens.BOTTOM_SHEET, {
             initialSnapIndex,
             renderContent,
+            footerComponent,
             snapPoints,
         }, bottomSheetModalOptions(theme));
     }
diff --git a/app/screens/post_options/post_options.tsx b/app/screens/post_options/post_options.tsx
index f783c2eb08..38e316ac85 100644
--- a/app/screens/post_options/post_options.tsx
+++ b/app/screens/post_options/post_options.tsx
@@ -1,15 +1,21 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {BottomSheetProps, BottomSheetScrollView} from '@gorhom/bottom-sheet';
 import {useManagedConfig} from '@mattermost/react-native-emm';
 import React, {useMemo} from 'react';
+import {ScrollView} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {CopyPermalinkOption, FollowThreadOption, ReplyOption, SaveOption} from '@components/common_post_options';
 import {ITEM_HEIGHT} from '@components/option_item';
 import {Screens} from '@constants';
+import {REACTION_PICKER_HEIGHT, REACTION_PICKER_MARGIN} from '@constants/reaction_picker';
+import {useIsTablet} from '@hooks/device';
 import useNavButtonPressed from '@hooks/navigation_button_pressed';
 import BottomSheet from '@screens/bottom_sheet';
 import {dismissBottomSheet} from '@screens/navigation';
+import {bottomSheetSnapPoint} from '@utils/helpers';
 import {isSystemMessage} from '@utils/post';
 
 import AppBindingsPostOptions from './options/app_bindings_post_option';
@@ -48,6 +54,9 @@ const PostOptions = ({
     sourceScreen, post, thread, bindings, serverUrl,
 }: PostOptionsProps) => {
     const managedConfig = useManagedConfig<ManagedConfig>();
+    const {bottom} = useSafeAreaInsets();
+    const isTablet = useIsTablet();
+    const Scroll = useMemo(() => (isTablet ? ScrollView : BottomSheetScrollView), [isTablet]);
 
     const close = () => {
         return dismissBottomSheet(Screens.POST_OPTIONS);
@@ -63,17 +72,31 @@ const PostOptions = ({
     const shouldRenderFollow = !(sourceScreen !== Screens.CHANNEL || !thread);
     const shouldShowBindings = bindings.length > 0 && !isSystemPost;
 
-    const snapPoints = [
+    const snapPoints = useMemo(() => {
+        const items: BottomSheetProps['snapPoints'] = [1];
+        const optionsCount = [
+            canCopyPermalink, canCopyText, canDelete, canEdit,
+            canMarkAsUnread, canPin, canReply, !isSystemPost, shouldRenderFollow,
+        ].reduce((acc, v) => {
+            return v ? acc + 1 : acc;
+        }, 0) + (shouldShowBindings ? 0.5 : 0);
+
+        items.push(bottomSheetSnapPoint(optionsCount, ITEM_HEIGHT, bottom) + (canAddReaction ? REACTION_PICKER_HEIGHT + REACTION_PICKER_MARGIN : 0));
+
+        if (shouldShowBindings) {
+            items.push('90%');
+        }
+
+        return items;
+    }, [
         canAddReaction, canCopyPermalink, canCopyText,
-        canDelete, canEdit, shouldRenderFollow,
-        canMarkAsUnread, canPin, canReply, !isSystemPost,
-    ].reduce((acc, v) => {
-        return v ? acc + 1 : acc;
-    }, 0);
+        canDelete, canEdit, shouldRenderFollow, shouldShowBindings,
+        canMarkAsUnread, canPin, canReply, isSystemPost, bottom,
+    ]);
 
     const renderContent = () => {
         return (
-            <>
+            <Scroll bounces={false}>
                 {canAddReaction &&
                     <ReactionBar
                         bottomSheetId={Screens.POST_OPTIONS}
@@ -147,31 +170,17 @@ const PostOptions = ({
                     bindings={bindings}
                 />
                 }
-            </>
+            </Scroll>
         );
     };
 
-    const finalSnapPoints = useMemo(() => {
-        const additionalSnapPoints = 2;
-
-        const lowerSnapPoints = snapPoints + additionalSnapPoints;
-        if (!shouldShowBindings) {
-            return [lowerSnapPoints * ITEM_HEIGHT, 10];
-        }
-
-        const upperSnapPoints = lowerSnapPoints + bindings.length;
-        return [upperSnapPoints * ITEM_HEIGHT, lowerSnapPoints * ITEM_HEIGHT, 10];
-    }, [snapPoints, shouldShowBindings, bindings.length]);
-
-    const initialSnapIndex = shouldShowBindings ? 1 : 0;
-
     return (
         <BottomSheet
             renderContent={renderContent}
             closeButtonId={POST_OPTIONS_BUTTON}
             componentId={Screens.POST_OPTIONS}
-            initialSnapIndex={initialSnapIndex}
-            snapPoints={finalSnapPoints}
+            initialSnapIndex={1}
+            snapPoints={snapPoints}
             testID='post_options'
         />
     );
diff --git a/app/screens/reactions/reactions.tsx b/app/screens/reactions/reactions.tsx
index 1227ef5e55..00798c62d1 100644
--- a/app/screens/reactions/reactions.tsx
+++ b/app/screens/reactions/reactions.tsx
@@ -4,6 +4,7 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 
 import {Screens} from '@constants';
+import {useIsTablet} from '@hooks/device';
 import BottomSheet from '@screens/bottom_sheet';
 import {getEmojiFirstAlias} from '@utils/emoji/helpers';
 
@@ -20,8 +21,10 @@ type Props = {
 }
 
 const Reactions = ({initialEmoji, location, reactions}: Props) => {
+    const isTablet = useIsTablet();
     const [sortedReactions, setSortedReactions] = useState(Array.from(new Set(reactions?.map((r) => getEmojiFirstAlias(r.emojiName)))));
     const [index, setIndex] = useState(sortedReactions.indexOf(initialEmoji));
+
     const reactionsByName = useMemo(() => {
         return reactions?.reduce((acc, reaction) => {
             const emojiAlias = getEmojiFirstAlias(reaction.emojiName);
@@ -59,6 +62,7 @@ const Reactions = ({initialEmoji, location, reactions}: Props) => {
                     key={emojiAlias}
                     location={location}
                     reactions={reactionsByName.get(emojiAlias)!}
+                    type={isTablet ? 'FlatList' : 'BottomSheetFlatList'}
                 />
             </>
         );
@@ -81,7 +85,7 @@ const Reactions = ({initialEmoji, location, reactions}: Props) => {
             closeButtonId='close-post-reactions'
             componentId={Screens.REACTIONS}
             initialSnapIndex={1}
-            snapPoints={['90%', '50%', 10]}
+            snapPoints={[1, '50%', '90%']}
             testID='reactions'
         />
     );
diff --git a/app/screens/reactions/reactors_list/index.tsx b/app/screens/reactions/reactors_list/index.tsx
index 34006c352d..882ef6cbf0 100644
--- a/app/screens/reactions/reactors_list/index.tsx
+++ b/app/screens/reactions/reactors_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, useEffect, useRef, useState} from 'react';
 import {ListRenderItemInfo, NativeScrollEvent, NativeSyntheticEvent, PanResponder} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
@@ -15,9 +16,10 @@ import type ReactionModel from '@typings/database/models/servers/reaction';
 type Props = {
     location: string;
     reactions: ReactionModel[];
+    type?: BottomSheetList;
 }
 
-const ReactorsList = ({location, reactions}: Props) => {
+const ReactorsList = ({location, reactions, type = 'FlatList'}: Props) => {
     const serverUrl = useServerUrl();
     const [enabled, setEnabled] = useState(false);
     const [direction, setDirection] = useState<'down' | 'up'>('down');
@@ -56,6 +58,17 @@ const ReactorsList = ({location, reactions}: Props) => {
         fetchUsersByIds(serverUrl, userIds);
     }, []);
 
+    if (type === 'BottomSheetFlatList') {
+        return (
+            <BottomSheetFlatList
+                data={reactions}
+                renderItem={renderItem}
+                overScrollMode={'always'}
+                testID='reactions.reactors_list.flat_list'
+            />
+        );
+    }
+
     return (
         <FlatList
             data={reactions}
diff --git a/app/screens/thread_options/thread_options.tsx b/app/screens/thread_options/thread_options.tsx
index 2d72b92b8e..cdcbd4ec20 100644
--- a/app/screens/thread_options/thread_options.tsx
+++ b/app/screens/thread_options/thread_options.tsx
@@ -133,8 +133,8 @@ const ThreadOptions = ({
             renderContent={renderContent}
             closeButtonId={THREAD_OPTIONS_BUTTON}
             componentId={Screens.THREAD_OPTIONS}
-            initialSnapIndex={0}
-            snapPoints={[snapPoint, 10]}
+            initialSnapIndex={1}
+            snapPoints={[1, snapPoint]}
             testID='thread_options'
         />
     );
diff --git a/app/screens/user_profile/user_profile.tsx b/app/screens/user_profile/user_profile.tsx
index cd87a85a8c..e0f1eaf780 100644
--- a/app/screens/user_profile/user_profile.tsx
+++ b/app/screens/user_profile/user_profile.tsx
@@ -12,6 +12,7 @@ import {Screens} from '@constants';
 import {useServerUrl} from '@context/server';
 import {getLocaleFromLanguage} from '@i18n';
 import BottomSheet from '@screens/bottom_sheet';
+import {bottomSheetSnapPoint} from '@utils/helpers';
 import {getUserCustomStatus, getUserTimezone, isCustomStatusExpired} from '@utils/user';
 
 import UserProfileCustomStatus from './custom_status';
@@ -45,7 +46,6 @@ const TITLE_HEIGHT = 118;
 const OPTIONS_HEIGHT = 82;
 const SINGLE_OPTION_HEIGHT = 68;
 const LABEL_HEIGHT = 58;
-const EXTRA_HEIGHT = 60;
 
 const UserProfile = ({
     channelId, closeButtonId, currentUserId, enablePostIconOverride, enablePostUsernameOverride,
@@ -55,14 +55,14 @@ const UserProfile = ({
 }: Props) => {
     const {formatMessage, locale} = useIntl();
     const serverUrl = useServerUrl();
-    const insets = useSafeAreaInsets();
+    const {bottom} = useSafeAreaInsets();
     const channelContext = [Screens.CHANNEL, Screens.THREAD].includes(location);
     const showOptions: OptionsType = channelContext && !user.isBot ? 'all' : 'message';
     const override = Boolean(userIconOverride || usernameOverride);
     const timezone = getUserTimezone(user);
     const customStatus = getUserCustomStatus(user);
-    const showCustomStatus = isCustomStatusEnabled && Boolean(customStatus) && !user.isBot && !isCustomStatusExpired(user);
     let localTime: string|undefined;
+
     if (timezone) {
         moment.locale(getLocaleFromLanguage(locale).toLowerCase());
         let format = 'H:mm';
@@ -73,36 +73,42 @@ const UserProfile = ({
         localTime = mtz.tz(Date.now(), timezone).format(format);
     }
 
+    const showCustomStatus = isCustomStatusEnabled && Boolean(customStatus) && !user.isBot && !isCustomStatusExpired(user);
+    const showUserProfileOptions = (!isDirectMessage || !channelContext) && !override;
+    const showNickname = Boolean(user.nickname) && !override && !user.isBot;
+    const showPosition = Boolean(user.position) && !override && !user.isBot;
+    const showLocalTime = Boolean(localTime) && !override && !user.isBot;
+
     const snapPoints = useMemo(() => {
-        let initial = TITLE_HEIGHT;
-        if ((!isDirectMessage || !channelContext) && !override) {
-            initial += showOptions === 'all' ? OPTIONS_HEIGHT : SINGLE_OPTION_HEIGHT;
+        let title = TITLE_HEIGHT;
+        if (showUserProfileOptions) {
+            title += showOptions === 'all' ? OPTIONS_HEIGHT : SINGLE_OPTION_HEIGHT;
         }
 
         let labels = 0;
-        if (!override && !user.isBot) {
-            if (showCustomStatus) {
-                labels += 1;
-            }
-
-            if (user.nickname) {
-                labels += 1;
-            }
-
-            if (user.position) {
-                labels += 1;
-            }
-
-            if (localTime) {
-                labels += 1;
-            }
-            initial += (labels * LABEL_HEIGHT);
+        if (showCustomStatus) {
+            labels += 1;
         }
 
-        return [initial + insets.bottom + EXTRA_HEIGHT, 10];
+        if (showNickname) {
+            labels += 1;
+        }
+
+        if (showPosition) {
+            labels += 1;
+        }
+
+        if (showLocalTime) {
+            labels += 1;
+        }
+
+        return [
+            1,
+            bottomSheetSnapPoint(labels, LABEL_HEIGHT, bottom) + title,
+        ];
     }, [
-        isChannelAdmin, isDirectMessage, isSystemAdmin,
-        isTeamAdmin, user, localTime, insets.bottom, override,
+        showUserProfileOptions, showCustomStatus, showNickname,
+        showPosition, showLocalTime, bottom,
     ]);
 
     useEffect(() => {
@@ -125,7 +131,7 @@ const UserProfile = ({
                     userIconOverride={userIconOverride}
                     usernameOverride={usernameOverride}
                 />
-                {(!isDirectMessage || !channelContext) && !override &&
+                {showUserProfileOptions &&
                     <UserProfileOptions
                         location={location}
                         type={showOptions}
@@ -134,21 +140,21 @@ const UserProfile = ({
                     />
                 }
                 {showCustomStatus && <UserProfileCustomStatus customStatus={customStatus!}/>}
-                {Boolean(user.nickname) && !override && !user.isBot &&
+                {showNickname &&
                 <UserProfileLabel
                     description={user.nickname}
                     testID='user_profile.nickname'
                     title={formatMessage({id: 'channel_info.nickname', defaultMessage: 'Nickname'})}
                 />
                 }
-                {Boolean(user.position) && !override && !user.isBot &&
+                {showPosition &&
                 <UserProfileLabel
                     description={user.position}
                     testID='user_profile.position'
                     title={formatMessage({id: 'channel_info.position', defaultMessage: 'Position'})}
                 />
                 }
-                {Boolean(localTime) && !override && !user.isBot &&
+                {showLocalTime &&
                 <UserProfileLabel
                     description={localTime!}
                     testID='user_profile.local_time'
@@ -164,7 +170,7 @@ const UserProfile = ({
             renderContent={renderContent}
             closeButtonId={closeButtonId}
             componentId={Screens.USER_PROFILE}
-            initialSnapIndex={0}
+            initialSnapIndex={1}
             snapPoints={snapPoints}
             testID='user_profile'
         />
diff --git a/app/utils/helpers.ts b/app/utils/helpers.ts
index e3115ca660..82031fd198 100644
--- a/app/utils/helpers.ts
+++ b/app/utils/helpers.ts
@@ -6,7 +6,7 @@ import {NativeModules, Platform} from 'react-native';
 
 import {Device} from '@constants';
 import {CUSTOM_STATUS_TIME_PICKER_INTERVALS_IN_MINUTES} from '@constants/custom_status';
-import {IOS_STATUS_BAR_HEIGHT} from '@constants/view';
+import {STATUS_BAR_HEIGHT} from '@constants/view';
 
 const {MattermostManaged} = NativeModules;
 const isRunningInSplitView = MattermostManaged.isRunningInSplitView;
@@ -141,12 +141,9 @@ export async function isTablet() {
 
 export const pluckUnique = (key: string) => (array: Array<{[key: string]: unknown}>) => Array.from(new Set(array.map((obj) => obj[key])));
 
-export function bottomSheetSnapPoint(itemsCount: number, itemHeight: number, bottomInset = 0) {
-    let bottom = bottomInset;
-    if (!bottom && Platform.OS === 'ios') {
-        bottom = IOS_STATUS_BAR_HEIGHT;
-    }
-    return ((itemsCount + Platform.select({android: 1, default: 0})) * itemHeight) + (bottom * 2.5);
+export function bottomSheetSnapPoint(itemsCount: number, itemHeight: number, bottomInset: number) {
+    const bottom = Platform.select({ios: bottomInset, default: 0}) + STATUS_BAR_HEIGHT;
+    return (itemsCount * itemHeight) + bottom;
 }
 
 export function hasTrailingSpaces(term: string) {
diff --git a/app/utils/team_list/index.ts b/app/utils/team_list/index.ts
deleted file mode 100644
index 30cbdf10d7..0000000000
--- a/app/utils/team_list/index.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {ScaledSize} from 'react-native';
-import {EdgeInsets} from 'react-native-safe-area-context';
-
-import {ITEM_HEIGHT} from '@components/team_list/team_list_item/team_list_item';
-import {PADDING_TOP_MOBILE} from '@screens/bottom_sheet';
-import {TITLE_HEIGHT, TITLE_SEPARATOR_MARGIN} from '@screens/bottom_sheet/content';
-import {bottomSheetSnapPoint} from '@utils/helpers';
-
-import type TeamModel from '@typings/database/models/servers/team';
-
-type TeamsSnapProps = {
-    teams: TeamModel[];
-    dimensions: ScaledSize;
-    insets: EdgeInsets;
-}
-
-const NO_TEAMS_HEIGHT = 392;
-export const getTeamsSnapHeight = ({dimensions, teams, insets}: TeamsSnapProps) => {
-    let height = NO_TEAMS_HEIGHT;
-    if (teams.length) {
-        const itemsHeight = bottomSheetSnapPoint(teams.length, ITEM_HEIGHT, 0);
-        const heightWithHeader = PADDING_TOP_MOBILE +
-            TITLE_HEIGHT + (TITLE_SEPARATOR_MARGIN * 2) +
-            itemsHeight + insets.bottom;
-        const maxHeight = Math.round((dimensions.height * 0.9));
-        height = Math.min(maxHeight, heightWithHeader);
-    }
-    return height;
-};
diff --git a/package-lock.json b/package-lock.json
index 4dc877e32d..862d47ec01 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@formatjs/intl-numberformat": "8.3.3",
         "@formatjs/intl-pluralrules": "5.1.8",
         "@formatjs/intl-relativetimeformat": "11.1.8",
+        "@gorhom/bottom-sheet": "4.4.5",
         "@mattermost/compass-icons": "0.1.35",
         "@mattermost/react-native-emm": "1.3.3",
         "@mattermost/react-native-network-client": "1.0.2",
@@ -94,7 +95,6 @@
         "react-native-webview": "11.26.0",
         "react-syntax-highlighter": "15.5.0",
         "readable-stream": "3.6.0",
-        "reanimated-bottom-sheet": "1.0.0-alpha.22",
         "semver": "7.3.8",
         "serialize-error": "11.0.0",
         "shallow-equals": "1.0.0",
@@ -2349,6 +2349,33 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@gorhom/bottom-sheet": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@gorhom/bottom-sheet/-/bottom-sheet-4.4.5.tgz",
+      "integrity": "sha512-Z5Z20wshLUB8lIdtMKoJaRnjd64wBR/q8EeVPThrg+skrcBwBPHfUwZJ2srB0rEszA/01ejSJy/ixyd7Ra7vUA==",
+      "dependencies": {
+        "@gorhom/portal": "1.0.14",
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-gesture-handler": ">=1.10.1",
+        "react-native-reanimated": ">=2.2.0"
+      }
+    },
+    "node_modules/@gorhom/portal": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/@gorhom/portal/-/portal-1.0.14.tgz",
+      "integrity": "sha512-MXyL4xvCjmgaORr/rtryDNFy3kU4qUbKlwtQqqsygd0xX3mhKjOLn6mQK8wfu0RkoE0pBE0nAasRoHua+/QZ7A==",
+      "dependencies": {
+        "nanoid": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -19082,17 +19109,6 @@
       "resolved": "https://registry.npmjs.org/readline/-/readline-1.3.0.tgz",
       "integrity": "sha512-k2d6ACCkiNYz222Fs/iNze30rRJ1iIicW7JuX/7/cozvih6YCkFZH+J6mAFDVgv0dRBaAyr4jDqC95R2y4IADg=="
     },
-    "node_modules/reanimated-bottom-sheet": {
-      "version": "1.0.0-alpha.22",
-      "resolved": "https://registry.npmjs.org/reanimated-bottom-sheet/-/reanimated-bottom-sheet-1.0.0-alpha.22.tgz",
-      "integrity": "sha512-NxecCn+2iA4YzkFuRK5/b86GHHS2OhZ9VRgiM4q18AC20YE/psRilqxzXCKBEvkOjP5AaAvY0yfE7EkEFBjTvw==",
-      "peerDependencies": {
-        "react": "*",
-        "react-native": "*",
-        "react-native-gesture-handler": "*",
-        "react-native-reanimated": "*"
-      }
-    },
     "node_modules/recast": {
       "version": "0.20.5",
       "resolved": "https://registry.npmjs.org/recast/-/recast-0.20.5.tgz",
@@ -23595,6 +23611,23 @@
         "tslib": "^2.4.0"
       }
     },
+    "@gorhom/bottom-sheet": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@gorhom/bottom-sheet/-/bottom-sheet-4.4.5.tgz",
+      "integrity": "sha512-Z5Z20wshLUB8lIdtMKoJaRnjd64wBR/q8EeVPThrg+skrcBwBPHfUwZJ2srB0rEszA/01ejSJy/ixyd7Ra7vUA==",
+      "requires": {
+        "@gorhom/portal": "1.0.14",
+        "invariant": "^2.2.4"
+      }
+    },
+    "@gorhom/portal": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/@gorhom/portal/-/portal-1.0.14.tgz",
+      "integrity": "sha512-MXyL4xvCjmgaORr/rtryDNFy3kU4qUbKlwtQqqsygd0xX3mhKjOLn6mQK8wfu0RkoE0pBE0nAasRoHua+/QZ7A==",
+      "requires": {
+        "nanoid": "^3.3.1"
+      }
+    },
     "@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -36257,12 +36290,6 @@
       "resolved": "https://registry.npmjs.org/readline/-/readline-1.3.0.tgz",
       "integrity": "sha512-k2d6ACCkiNYz222Fs/iNze30rRJ1iIicW7JuX/7/cozvih6YCkFZH+J6mAFDVgv0dRBaAyr4jDqC95R2y4IADg=="
     },
-    "reanimated-bottom-sheet": {
-      "version": "1.0.0-alpha.22",
-      "resolved": "https://registry.npmjs.org/reanimated-bottom-sheet/-/reanimated-bottom-sheet-1.0.0-alpha.22.tgz",
-      "integrity": "sha512-NxecCn+2iA4YzkFuRK5/b86GHHS2OhZ9VRgiM4q18AC20YE/psRilqxzXCKBEvkOjP5AaAvY0yfE7EkEFBjTvw==",
-      "requires": {}
-    },
     "recast": {
       "version": "0.20.5",
       "resolved": "https://registry.npmjs.org/recast/-/recast-0.20.5.tgz",
diff --git a/package.json b/package.json
index aa07ea7dd5..2840c28c2c 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@formatjs/intl-numberformat": "8.3.3",
     "@formatjs/intl-pluralrules": "5.1.8",
     "@formatjs/intl-relativetimeformat": "11.1.8",
+    "@gorhom/bottom-sheet": "4.4.5",
     "@mattermost/compass-icons": "0.1.35",
     "@mattermost/react-native-emm": "1.3.3",
     "@mattermost/react-native-network-client": "1.0.2",
@@ -91,7 +92,6 @@
     "react-native-webview": "11.26.0",
     "react-syntax-highlighter": "15.5.0",
     "readable-stream": "3.6.0",
-    "reanimated-bottom-sheet": "1.0.0-alpha.22",
     "semver": "7.3.8",
     "serialize-error": "11.0.0",
     "shallow-equals": "1.0.0",
diff --git a/types/components/bottom_sheet.d.ts b/types/components/bottom_sheet.d.ts
new file mode 100644
index 0000000000..5db104ee22
--- /dev/null
+++ b/types/components/bottom_sheet.d.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+type BottomSheetList = 'FlatList' | 'BottomSheetFlatList';

From 001a6699fba1e8ca3e4eba6920c58b1cfed3016a Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Thu, 5 Jan 2023 12:31:52 +0200
Subject: [PATCH 3/4] Cache push notification profile image and add logs
 (#6932)

* Cache push notification profile image and add logs

* Fix indent
---
 app/screens/settings/advanced/index.tsx       |   2 +-
 app/utils/file/index.ts                       |  41 ++++--
 ios/Gekidou/Sources/Gekidou/FileCache.swift   |  64 ++++++++++
 .../Gekidou/Networking/PushNotification.swift |  34 ++++-
 .../NotificationService.swift                 | 117 +++++++++++-------
 5 files changed, 198 insertions(+), 60 deletions(-)
 create mode 100644 ios/Gekidou/Sources/Gekidou/FileCache.swift

diff --git a/app/screens/settings/advanced/index.tsx b/app/screens/settings/advanced/index.tsx
index 642067bb99..8a9a1a0d99 100644
--- a/app/screens/settings/advanced/index.tsx
+++ b/app/screens/settings/advanced/index.tsx
@@ -65,7 +65,7 @@ const AdvancedSettings = ({componentId}: AdvancedSettingsProps) => {
                             style: 'destructive',
                             onPress: async () => {
                                 await deleteFileCache(serverUrl);
-                                await getAllCachedFiles();
+                                getAllCachedFiles();
                             },
                         },
                     ],
diff --git a/app/utils/file/index.ts b/app/utils/file/index.ts
index 8d228c8b8f..fdab1e8bfd 100644
--- a/app/utils/file/index.ts
+++ b/app/utils/file/index.ts
@@ -166,32 +166,41 @@ export async function deleteV1Data() {
 
 export async function deleteFileCache(serverUrl: string) {
     const serverDir = urlSafeBase64Encode(serverUrl);
-    deleteFileCacheByDir(serverDir);
+    return deleteFileCacheByDir(serverDir);
 }
 
 export async function deleteLegacyFileCache(serverUrl: string) {
     const serverDir = hashCode_DEPRECATED(serverUrl);
-    deleteFileCacheByDir(serverDir);
+    return deleteFileCacheByDir(serverDir);
 }
 
 export async function deleteFileCacheByDir(dir: string) {
+    if (Platform.OS === 'ios') {
+        const appGroupCacheDir = `${getIOSAppGroupDetails().appGroupSharedDirectory}/Library/Caches/${dir}`;
+        await deleteFilesInDir(appGroupCacheDir);
+    }
+
     const cacheDir = `${FileSystem.CachesDirectoryPath}/${dir}`;
-    if (cacheDir) {
-        const cacheDirInfo = await FileSystem.exists(cacheDir);
+    await deleteFilesInDir(cacheDir);
+
+    return true;
+}
+
+async function deleteFilesInDir(directory: string) {
+    if (directory) {
+        const cacheDirInfo = await FileSystem.exists(directory);
         if (cacheDirInfo) {
             if (Platform.OS === 'ios') {
-                await FileSystem.unlink(cacheDir);
-                await FileSystem.mkdir(cacheDir);
+                await FileSystem.unlink(directory);
+                await FileSystem.mkdir(directory);
             } else {
-                const lstat = await FileSystem.readDir(cacheDir);
+                const lstat = await FileSystem.readDir(directory);
                 lstat.forEach((stat: FileSystem.ReadDirItem) => {
                     FileSystem.unlink(stat.path);
                 });
             }
         }
     }
-
-    return true;
 }
 
 export function lookupMimeType(filename: string) {
@@ -525,8 +534,18 @@ export const getAllFilesInCachesDirectory = async (serverUrl: string) => {
     try {
         const files: FileSystem.ReadDirItem[][] = [];
 
-        const directoryFiles = await FileSystem.readDir(`${FileSystem.CachesDirectoryPath}/${urlSafeBase64Encode(serverUrl)}`);
-        files.push(directoryFiles);
+        const promises = [FileSystem.readDir(`${FileSystem.CachesDirectoryPath}/${urlSafeBase64Encode(serverUrl)}`)];
+        if (Platform.OS === 'ios') {
+            const cacheDir = `${getIOSAppGroupDetails().appGroupSharedDirectory}/Library/Caches/${urlSafeBase64Encode(serverUrl)}`;
+            promises.push(FileSystem.readDir(cacheDir));
+        }
+
+        const dirs = await Promise.allSettled(promises);
+        dirs.forEach((p) => {
+            if (p.status === 'fulfilled') {
+                files.push(p.value);
+            }
+        });
 
         const flattenedFiles = files.flat();
         const totalSize = flattenedFiles.reduce((acc, file) => acc + file.size, 0);
diff --git a/ios/Gekidou/Sources/Gekidou/FileCache.swift b/ios/Gekidou/Sources/Gekidou/FileCache.swift
new file mode 100644
index 0000000000..8e0cf05a76
--- /dev/null
+++ b/ios/Gekidou/Sources/Gekidou/FileCache.swift
@@ -0,0 +1,64 @@
+//
+//  FileCache.swift
+//  Gekidou
+//
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+//
+
+import Foundation
+import UIKit
+
+public class FileCache: NSObject {
+  private var cacheURL: URL?
+  @objc public static let `default` = FileCache()
+  
+  override private init() {
+    super.init()
+    let filemgr = FileManager.default
+    let appGroupId = Bundle.main.infoDictionary!["AppGroupIdentifier"] as! String
+    let containerUrl = filemgr.containerURL(forSecurityApplicationGroupIdentifier: appGroupId)
+    if let url = containerUrl,
+    let cacheURL = url.appendingPathComponent("Library", isDirectory: true) as URL? {
+      self.cacheURL = cacheURL.appendingPathComponent("Caches", isDirectory:  true)
+      self.createDirectoryIfNeeded(directory: self.cacheURL)
+    }
+  }
+  
+  private func createDirectoryIfNeeded(directory: URL?) {
+    var isDirectory = ObjCBool(false)
+       
+    if let cachePath = directory?.path {
+      let exists = FileManager.default.fileExists(atPath: cachePath, isDirectory: &isDirectory)
+      
+      if !exists && !isDirectory.boolValue {
+        try? FileManager.default.createDirectory(atPath: cachePath, withIntermediateDirectories: true, attributes: nil)
+      }
+    }
+  }
+  
+  private func getUrlImageFor(serverUrl: String, userId: String) -> URL? {
+    guard let url = cacheURL else {return nil}
+    
+    let serverCacheURL = url.appendingPathComponent(serverUrl.toUrlSafeBase64Encode(), isDirectory: true)
+    createDirectoryIfNeeded(directory: serverCacheURL)
+    return serverCacheURL.appendingPathComponent(userId + ".png")
+  }
+    
+  public func getProfileImage(serverUrl: String, userId: String) -> UIImage? {
+    guard let url = getUrlImageFor(serverUrl: serverUrl, userId: userId) else { return nil }
+    return UIImage(contentsOfFile: url.path)
+  }
+    
+  public func saveProfileImage(serverUrl: String, userId: String, imageData: Data?) {
+    guard let data = imageData,
+    let url = getUrlImageFor(serverUrl: serverUrl, userId: userId)
+    else { return }
+    
+    do {
+      try data.write(to: url)
+    } catch let error {
+      print("Erro saving image. \(error)")
+    }
+  }
+}
diff --git a/ios/Gekidou/Sources/Gekidou/Networking/PushNotification.swift b/ios/Gekidou/Sources/Gekidou/Networking/PushNotification.swift
index bddcddc955..596e17c101 100644
--- a/ios/Gekidou/Sources/Gekidou/Networking/PushNotification.swift
+++ b/ios/Gekidou/Sources/Gekidou/Networking/PushNotification.swift
@@ -1,6 +1,7 @@
 import Foundation
 import UserNotifications
 import SQLite
+import os.log
 
 public struct AckNotification: Codable {
     let type: String
@@ -66,6 +67,14 @@ extension String {
         guard self.hasPrefix(prefix) else { return self }
         return String(self.dropFirst(prefix.count))
     }
+    
+    func toUrlSafeBase64Encode() -> String {
+        return Data(
+            self.replacingOccurrences(of: "/\\+/g", with: "-", options: .regularExpression)
+                .replacingOccurrences(of: "/\\//g", with: "_", options: .regularExpression)
+                .utf8
+        ).base64EncodedString()
+    }
 }
 
 extension Network {
@@ -93,8 +102,18 @@ extension Network {
         let semaphore = DispatchSemaphore(value: 0)
         
         func processResponse(data: Data?, response: URLResponse?, error: Error?) {
-            if let httpResponse = response as? HTTPURLResponse, httpResponse.statusCode == 200 && error == nil {
-                imgData = data
+            if let httpResponse = response as? HTTPURLResponse {
+                if (httpResponse.statusCode == 200 && error == nil) {
+                    imgData = data
+                    FileCache.default.saveProfileImage(serverUrl: serverUrl, userId: senderId, imageData: data)
+                } else {
+                    os_log(
+                        OSLogType.default,
+                        "Mattermost Notifications: Request for profile image failed with status %{public}@ and error %{public}@",
+                        httpResponse.statusCode,
+                        (error?.localizedDescription ?? "")
+                    )
+                }
             }
             semaphore.signal()
         }
@@ -103,9 +122,14 @@ extension Network {
            let url = URL(string: overrideUrl) {
             request(url, withMethod: "GET", withServerUrl: "", completionHandler: processResponse)
         } else {
-            let endpoint = "/users/\(senderId)/image"
-            let url = buildApiUrl(serverUrl, endpoint)
-            request(url, withMethod: "GET", withServerUrl: serverUrl, completionHandler: processResponse)
+            if let image = FileCache.default.getProfileImage(serverUrl: serverUrl, userId: senderId) {
+                os_log(OSLogType.default, "Mattermost Notifications: cached image")
+                imgData = image.pngData()
+                semaphore.signal()
+            } else {
+                os_log(OSLogType.default, "Mattermost Notifications: image not cached")
+                fetchUserProfilePicture(userId: senderId, withServerUrl: serverUrl, completionHandler: processResponse)
+            }
         }
         
         semaphore.wait()
diff --git a/ios/NotificationService/NotificationService.swift b/ios/NotificationService/NotificationService.swift
index e18e40bc0c..0152366394 100644
--- a/ios/NotificationService/NotificationService.swift
+++ b/ios/NotificationService/NotificationService.swift
@@ -1,6 +1,7 @@
 import Gekidou
 import UserNotifications
 import Intents
+import os.log
 
 class NotificationService: UNNotificationServiceExtension {
   let preferences = Gekidou.Preferences.default
@@ -24,13 +25,24 @@ class NotificationService: UNNotificationServiceExtension {
        let ackNotification = try? JSONDecoder().decode(AckNotification.self, from: jsonData) {
       fetchReceipt(ackNotification)
     } else {
+      os_log(OSLogType.default, "Mattermost Notifications: bestAttemptContent seems to be empty, will call sendMessageIntent")
       sendMessageIntent(notification: request.content)
     }
   }
 
   func processResponse(serverUrl: String, data: Data, bestAttemptContent: UNMutableNotificationContent) {
     bestAttemptContent.userInfo["server_url"] = serverUrl
+    os_log(
+      OSLogType.default,
+      "Mattermost Notifications: process receipt response for serverUrl %{public}@",
+      serverUrl
+    )
     let json = try? JSONSerialization.jsonObject(with: data) as! [String: Any]
+    os_log(
+      OSLogType.default,
+      "Mattermost Notifications: parsed json response %{public}@",
+      String(describing: json != nil)
+    )
     if let json = json {
       if let message = json["message"] as? String {
         bestAttemptContent.body = message
@@ -49,10 +61,12 @@ class NotificationService: UNNotificationServiceExtension {
 
     if (preferences.object(forKey: "ApplicationIsForeground") as? String != "true") {
       Network.default.fetchAndStoreDataForPushNotification(bestAttemptContent, withContentHandler: {[weak self] notification in
+        os_log(OSLogType.default, "Mattermost Notifications: processed data for db. Will call sendMessageIntent")
         self?.sendMessageIntent(notification: bestAttemptContent)
       })
     } else {
       bestAttemptContent.badge = Gekidou.Database.default.getTotalMentions() as NSNumber
+      os_log(OSLogType.default, "Mattermost Notifications: app in the foreground, no data processed. Will call sendMessageIntent")
       sendMessageIntent(notification: bestAttemptContent)
     }
   }
@@ -60,7 +74,9 @@ class NotificationService: UNNotificationServiceExtension {
   override func serviceExtensionTimeWillExpire() {
     // Called just before the extension will be terminated by the system.
     // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
-    if let bestAttemptContent =  bestAttemptContent {
+    os_log(OSLogType.default, "Mattermost Notifications: service extension time expired")
+    if let bestAttemptContent = bestAttemptContent {
+      os_log(OSLogType.default, "Mattermost Notifications: calling sendMessageIntent before expiration")
       sendMessageIntent(notification: bestAttemptContent)
     }
   }
@@ -71,68 +87,78 @@ class NotificationService: UNNotificationServiceExtension {
       let channelId = notification.userInfo["channel_id"] as! String
       let rootId = notification.userInfo.index(forKey: "root_id") != nil ? notification.userInfo["root_id"] as! String : ""
       let senderId = notification.userInfo["sender_id"] as? String ?? ""
-      let senderName = notification.userInfo["sender_name"] as? String ?? ""
       let channelName = notification.userInfo["channel_name"] as? String ?? ""
       let overrideIconUrl = notification.userInfo["override_icon_url"] as? String
       let serverUrl = notification.userInfo["server_url"] as? String ?? ""
       let message = (notification.userInfo["message"] as? String ?? "")
-      let avatarData = Network.default.fetchProfileImageSync(serverUrl, senderId: senderId, overrideIconUrl: overrideIconUrl)
-      
-      let handle = INPersonHandle(value: notification.userInfo["sender_id"] as? String, type: .unknown)
-      var avatar: INImage?
-      if let imgData = avatarData {
-        avatar = INImage(imageData: imgData)
-      }
 
-      let sender = INPerson(personHandle: handle,
-                            nameComponents: nil,
-                            displayName: channelName,
-                            image: avatar,
-                            contactIdentifier: nil,
-                            customIdentifier: nil)
-      var conversationId = channelId
-      if isCRTEnabled && rootId != "" {
-        conversationId = rootId
-      }
-      
-      let intent = INSendMessageIntent(recipients: nil,
-                                       outgoingMessageType: .outgoingMessageText,
-                                       content: message,
-                                       speakableGroupName: nil,
-                                       conversationIdentifier: conversationId,
-                                       serviceName: nil,
-                                       sender: sender,
-                                       attachments: nil)
-      
-      let interaction = INInteraction(intent: intent, response: nil)
-      interaction.direction = .incoming
-      
-      interaction.donate { error in
-        if error != nil {
-          self.contentHandler?(notification)
-          return
-        }
-        
-        do {
-          let updatedContent = try notification.updating(from: intent)
-          self.contentHandler?(updatedContent)
-        } catch {
-          self.contentHandler?(notification)
+      if senderId != "" && serverUrl != "" {
+        os_log(OSLogType.default, "Mattermost Notifications: Fetching profile Image in server %{public}@ for sender %{public}@", serverUrl, senderId)
+        let avatarData = Network.default.fetchProfileImageSync(serverUrl, senderId: senderId, overrideIconUrl: overrideIconUrl)
+        if let imgData = avatarData,
+           let avatar = INImage(imageData: imgData) as INImage? {
+          os_log(OSLogType.default, "Mattermost Notifications: creating intent")
+          var conversationId = channelId
+          if isCRTEnabled && rootId != "" {
+            conversationId = rootId
+          }
+
+          let handle = INPersonHandle(value: senderId, type: .unknown)
+          let sender = INPerson(personHandle: handle,
+                                nameComponents: nil,
+                                displayName: channelName,
+                                image: avatar,
+                                contactIdentifier: nil,
+                                customIdentifier: nil)
+
+          let intent = INSendMessageIntent(recipients: nil,
+                                           outgoingMessageType: .outgoingMessageText,
+                                           content: message,
+                                           speakableGroupName: nil,
+                                           conversationIdentifier: conversationId,
+                                           serviceName: nil,
+                                           sender: sender,
+                                           attachments: nil)
+
+          let interaction = INInteraction(intent: intent, response: nil)
+          interaction.direction = .incoming
+          interaction.donate { error in
+            if error != nil {
+              self.contentHandler?(notification)
+              os_log(OSLogType.default, "Mattermost Notifications: sendMessageIntent intent error %{public}@", error! as CVarArg)
+            }
+
+            do {
+              let updatedContent = try notification.updating(from: intent)
+              os_log(OSLogType.default, "Mattermost Notifications: present updated notification")
+              self.contentHandler?(updatedContent)
+            } catch {
+              os_log(OSLogType.default, "Mattermost Notifications: something failed updating the notification %{public}@", error as CVarArg)
+              self.contentHandler?(notification)
+            }
+          }
         }
       }
     } else {
+      os_log(OSLogType.default, "Mattermost Notifications: No intent created. will call contentHandler to present notification")
       self.contentHandler?(notification)
     }
   }
   
   func fetchReceipt(_ ackNotification: AckNotification) -> Void {
     if (self.retryIndex >= self.fibonacciBackoffsInSeconds.count) {
+      os_log(OSLogType.default, "Mattermost Notifications: max retries reached. Will call sendMessageIntent")
       sendMessageIntent(notification: bestAttemptContent!)
       return
     }
 
     Network.default.postNotificationReceipt(ackNotification) {data, response, error in
         if let httpResponse = response as? HTTPURLResponse, httpResponse.statusCode != 200 {
+          os_log(
+            OSLogType.default,
+            "Mattermost Notifications: notification receipt failed with status %{public}@. Will call sendMessageIntent",
+            httpResponse.statusCode
+          )
           self.sendMessageIntent(notification: self.bestAttemptContent!)
           return
         }
@@ -143,6 +169,11 @@ class NotificationService: UNNotificationServiceExtension {
             let backoffInSeconds = self.fibonacciBackoffsInSeconds[self.retryIndex]
 
             DispatchQueue.main.asyncAfter(deadline: .now() + backoffInSeconds, execute: {
+              os_log(
+                OSLogType.default,
+                "Mattermost Notifications: receipt retrieval failed. Retry %{public}@",
+                self.retryIndex
+              )
               self.fetchReceipt(ackNotification)
             })
 

From ca1f6df1c65f1f0609874afbbd9fd83dfb4d9a51 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Thu, 5 Jan 2023 13:49:04 +0200
Subject: [PATCH 4/4] Generate video thumb from file url instead of public url
 (#6922)

---
 .../rnbeta/MattermostManagedModule.java       | 30 +++++++++++
 app/components/files/video_file.tsx           | 14 +++--
 ios/GekidouWrapper.swift                      |  8 +++
 ios/Mattermost/MattermostManaged.m            | 26 ++++++++-
 .../react-native-create-thumbnail+1.6.4.patch | 53 +++++++++++++++++++
 5 files changed, 122 insertions(+), 9 deletions(-)
 create mode 100644 patches/react-native-create-thumbnail+1.6.4.patch

diff --git a/android/app/src/main/java/com/mattermost/rnbeta/MattermostManagedModule.java b/android/app/src/main/java/com/mattermost/rnbeta/MattermostManagedModule.java
index 77df51b6e5..30c7fb2861 100644
--- a/android/app/src/main/java/com/mattermost/rnbeta/MattermostManagedModule.java
+++ b/android/app/src/main/java/com/mattermost/rnbeta/MattermostManagedModule.java
@@ -6,6 +6,7 @@ import android.content.Intent;
 import android.content.pm.PackageManager;
 import android.net.Uri;
 import android.os.ParcelFileDescriptor;
+import android.text.TextUtils;
 import android.webkit.MimeTypeMap;
 
 import androidx.annotation.NonNull;
@@ -20,8 +21,12 @@ import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.modules.core.DeviceEventManagerModule;
+
+import com.mattermost.helpers.Credentials;
+import com.reactlibrary.createthumbnail.CreateThumbnailModule;
 import com.mattermost.helpers.RealPathUtil;
 
 import java.io.File;
@@ -29,6 +34,7 @@ import java.io.FileInputStream;
 import java.io.FileOutputStream;
 import java.io.IOException;
 import java.lang.ref.WeakReference;
+import java.net.URL;
 import java.nio.channels.FileChannel;
 
 public class MattermostManagedModule extends ReactContextBaseJavaModule {
@@ -206,6 +212,30 @@ public class MattermostManagedModule extends ReactContextBaseJavaModule {
         }
     }
 
+    @ReactMethod
+    public void createThumbnail(ReadableMap options, Promise promise) {
+        try {
+            WritableMap optionsMap = Arguments.createMap();
+            optionsMap.merge(options);
+            String url = options.hasKey("url") ? options.getString("url") : "";
+            URL videoUrl = new URL(url);
+            String serverUrl = videoUrl.getProtocol() + "://" + videoUrl.getHost() + ":" + videoUrl.getPort();
+            String token = Credentials.getCredentialsForServerSync(this.reactContext, serverUrl);
+            if (!TextUtils.isEmpty(token)) {
+                WritableMap headers = Arguments.createMap();
+                if (optionsMap.hasKey("headers")) {
+                    headers.merge(optionsMap.getMap("headers"));
+                }
+                headers.putString("Authorization", "Bearer " + token);
+                optionsMap.putMap("headers", headers);
+            }
+            CreateThumbnailModule thumb = new CreateThumbnailModule(this.reactContext);
+            thumb.create(optionsMap.copy(), promise);
+        } catch (Exception e) {
+            promise.reject("CreateThumbnail_ERROR", e);
+        }
+    }
+
     private static class SaveDataTask extends GuardedResultAsyncTask<Object> {
         private final WeakReference<Context> weakContext;
         private final String fromFile;
diff --git a/app/components/files/video_file.tsx b/app/components/files/video_file.tsx
index c5b7d919ec..580d915fed 100644
--- a/app/components/files/video_file.tsx
+++ b/app/components/files/video_file.tsx
@@ -2,11 +2,10 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {StyleSheet, useWindowDimensions, View} from 'react-native';
-import {createThumbnail} from 'react-native-create-thumbnail';
+import {StyleSheet, useWindowDimensions, View, NativeModules} from 'react-native';
 
 import {updateLocalFile} from '@actions/local/file';
-import {buildFilePreviewUrl, fetchPublicLink} from '@actions/remote/file';
+import {buildFilePreviewUrl, buildFileUrl} from '@actions/remote/file';
 import CompassIcon from '@components/compass_icon';
 import ProgressiveImage from '@components/progressive_image';
 import {useServerUrl} from '@context/server';
@@ -18,6 +17,7 @@ import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import FileIcon from './file_icon';
 
 import type {ResizeMode} from 'react-native-fast-image';
+const {createThumbnail} = NativeModules.MattermostManaged;
 
 type Props = {
     index: number;
@@ -84,11 +84,9 @@ const VideoFile = ({
         try {
             const exists = data.mini_preview ? await fileExists(data.mini_preview) : false;
             if (!data.mini_preview || !exists) {
-                // We use the public link to avoid having to pass the token through a third party
-                // library
-                const publicUri = await fetchPublicLink(serverUrl, data.id!);
-                if (('link') in publicUri) {
-                    const {path: uri, height, width} = await createThumbnail({url: data.localPath || publicUri.link, timeStamp: 2000});
+                const videoUrl = buildFileUrl(serverUrl, data.id!);
+                if (videoUrl) {
+                    const {path: uri, height, width} = await createThumbnail({url: data.localPath || videoUrl, timeStamp: 2000});
                     data.mini_preview = uri;
                     data.height = height;
                     data.width = width;
diff --git a/ios/GekidouWrapper.swift b/ios/GekidouWrapper.swift
index a58df7fb78..24bda2774f 100644
--- a/ios/GekidouWrapper.swift
+++ b/ios/GekidouWrapper.swift
@@ -27,4 +27,12 @@ import Gekidou
   @objc func setPreference(_ value: Any?, forKey name: String) {
     Preferences.default.set(value, forKey: name)
   }
+  
+  @objc func getToken(for url: String) -> String? {
+    if let token = try? Keychain.default.getToken(for: url) {
+      return token
+    }
+    
+    return nil
+  }
 }
diff --git a/ios/Mattermost/MattermostManaged.m b/ios/Mattermost/MattermostManaged.m
index ec68c3ca60..a56f97968b 100644
--- a/ios/Mattermost/MattermostManaged.m
+++ b/ios/Mattermost/MattermostManaged.m
@@ -8,6 +8,8 @@
 
 #import "AppDelegate.h"
 #import "MattermostManaged.h"
+#import "CreateThumbnail.h"
+#import "Mattermost-Swift.h"
 
 @implementation MattermostManaged
 
@@ -107,7 +109,6 @@ RCT_EXPORT_METHOD(renameDatabase: (NSString *)databaseName  to: (NSString *) new
     NSDictionary *appGroupDir = [self appGroupSharedDirectory];
     NSString *databaseDir;
     NSString *newDBDir;
-
     
     if(databaseName){
       databaseDir = [NSString stringWithFormat:@"%@/%@%@", appGroupDir[@"databasePath"], databaseName , @".db"];
@@ -200,4 +201,27 @@ RCT_EXPORT_METHOD(lockPortrait)
 
 }
 
+RCT_EXPORT_METHOD(createThumbnail:(NSDictionary *)config findEventsWithResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
+{
+  NSMutableDictionary *newConfig = [config mutableCopy];
+  NSMutableDictionary *headers = [config[@"headers"] ?: @{} mutableCopy];
+  NSString *url = (NSString *)[config objectForKey:@"url"] ?: @"";
+  NSURL *vidURL = nil;
+  NSString *url_ = [url lowercaseString];
+  
+  if ([url_ hasPrefix:@"http://"] || [url_ hasPrefix:@"https://"] || [url_ hasPrefix:@"file://"]) {
+    vidURL = [NSURL URLWithString:url];
+    NSString *serverUrl = [NSString stringWithFormat:@"%@://%@:%@", vidURL.scheme, vidURL.host, vidURL.port];
+    if (vidURL != nil) {
+      NSString *token = [[GekidouWrapper default] getTokenFor:serverUrl];
+      if (token != nil) {
+
+        headers[@"Authorization"] = [NSString stringWithFormat:@"Bearer %@", token];
+        newConfig[@"headers"] = headers;
+      }
+    }
+  }
+  [CreateThumbnail create:newConfig findEventsWithResolver:resolve rejecter:reject];
+}
+
 @end
diff --git a/patches/react-native-create-thumbnail+1.6.4.patch b/patches/react-native-create-thumbnail+1.6.4.patch
new file mode 100644
index 0000000000..7d1aa97d62
--- /dev/null
+++ b/patches/react-native-create-thumbnail+1.6.4.patch
@@ -0,0 +1,53 @@
+diff --git a/node_modules/react-native-create-thumbnail/ios/CreateThumbnail.h b/node_modules/react-native-create-thumbnail/ios/CreateThumbnail.h
+index 28b1d9b..cb63c52 100644
+--- a/node_modules/react-native-create-thumbnail/ios/CreateThumbnail.h
++++ b/node_modules/react-native-create-thumbnail/ios/CreateThumbnail.h
+@@ -3,5 +3,5 @@
+ #import <UIKit/UIKit.h>
+ 
+ @interface CreateThumbnail : NSObject <RCTBridgeModule>
+-
+++(void)create:(NSDictionary *)config findEventsWithResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject;
+ @end
+diff --git a/node_modules/react-native-create-thumbnail/ios/CreateThumbnail.m b/node_modules/react-native-create-thumbnail/ios/CreateThumbnail.m
+index 92cc49f..23cc83c 100644
+--- a/node_modules/react-native-create-thumbnail/ios/CreateThumbnail.m
++++ b/node_modules/react-native-create-thumbnail/ios/CreateThumbnail.m
+@@ -6,6 +6,10 @@ RCT_EXPORT_MODULE()
+ 
+ RCT_EXPORT_METHOD(create:(NSDictionary *)config findEventsWithResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
+ {
++    [CreateThumbnail create:config findEventsWithResolver:resolve rejecter:reject];
++}
++
+++(void) create:(NSDictionary *)config findEventsWithResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject {
+     NSString *url = (NSString *)[config objectForKey:@"url"] ?: @"";
+     int timeStamp = [[config objectForKey:@"timeStamp"] intValue] ?: 0;
+     NSString *format = (NSString *)[config objectForKey:@"format"] ?: @"jpeg";
+@@ -82,7 +86,7 @@ RCT_EXPORT_METHOD(create:(NSDictionary *)config findEventsWithResolver:(RCTPromi
+     }
+ }
+ 
+-- (unsigned long long) sizeOfFolderAtPath:(NSString *)path {
+++ (unsigned long long) sizeOfFolderAtPath:(NSString *)path {
+     NSArray *files = [[NSFileManager defaultManager] subpathsOfDirectoryAtPath:path error:nil];
+     NSEnumerator *enumerator = [files objectEnumerator];
+     NSString *fileName;
+@@ -93,7 +97,7 @@ RCT_EXPORT_METHOD(create:(NSDictionary *)config findEventsWithResolver:(RCTPromi
+     return size;
+ }
+ 
+-- (void) cleanDir:(NSString *)path forSpace:(unsigned long long)size {
+++ (void) cleanDir:(NSString *)path forSpace:(unsigned long long)size {
+     NSFileManager *fm = [NSFileManager defaultManager];
+     NSError *error = nil;
+     unsigned long long deletedSize = 0;
+@@ -110,7 +114,7 @@ RCT_EXPORT_METHOD(create:(NSDictionary *)config findEventsWithResolver:(RCTPromi
+     return;
+ }
+ 
+-- (void) generateThumbImage:(AVURLAsset *)asset atTime:(int)timeStamp completion:(void (^)(UIImage* thumbnail))completion failure:(void (^)(NSError* error))failure {
+++ (void) generateThumbImage:(AVURLAsset *)asset atTime:(int)timeStamp completion:(void (^)(UIImage* thumbnail))completion failure:(void (^)(NSError* error))failure {
+     AVAssetImageGenerator *generator = [[AVAssetImageGenerator alloc] initWithAsset:asset];
+     generator.appliesPreferredTrackTransform = YES;
+     generator.maximumSize = CGSizeMake(512, 512);