From 7cb2ee75b364c8073a0d84039d7067c2ec593781 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Fri, 29 Nov 2024 12:50:09 +0800
Subject: [PATCH] Fix bottomSheet bottom insets (#8331)

* Fix bottomSheet bottom insets

* fix search team picker on android

* ux review

* fix footer padding for message priority modal on iPad
---
 .../announcement_banner/announcement_banner.tsx |  5 +----
 .../channel_bookmarks/add_bookmark.tsx          | 15 +++++++++------
 .../channel_bookmark/channel_bookmark.tsx       |  6 ++----
 .../channel_bookmarks/channel_bookmarks.tsx     |  5 +++--
 .../file_options/mobile_options.tsx             |  5 +----
 app/components/files_search/file_results.tsx    |  1 -
 .../markdown/at_mention/at_mention.tsx          |  6 ++----
 .../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 ++----
 .../quick_actions/camera_quick_action/index.tsx |  6 ++----
 .../post_priority_action/index.tsx              |  2 +-
 .../body/acknowledgements/acknowledgements.tsx  | 10 ++++++----
 .../users_list/user_list_item.tsx               |  2 +-
 .../post_list/post/body/failed/index.tsx        |  6 ++----
 .../post_list/post/body/reactions/reactions.tsx |  2 +-
 app/components/post_list/post/footer/footer.tsx |  2 +-
 app/components/selected_users/index.tsx         | 15 +++++++--------
 app/components/team_list/index.tsx              |  1 +
 app/components/user_avatars_stack/index.tsx     | 14 +++++++++-----
 app/components/user_list/index.tsx              |  6 +++---
 .../calls/components/audio_device_button.tsx    |  4 +---
 app/products/calls/hooks.ts                     |  4 ++--
 .../calls/screens/call_screen/call_screen.tsx   |  8 +++-----
 .../screens/host_controls/host_controls.tsx     |  8 +++-----
 .../participants_list/participants_list.tsx     |  5 +----
 app/screens/bottom_sheet/button.tsx             |  2 +-
 app/screens/bottom_sheet/index.tsx              |  5 +++++
 .../browse_channels/channel_dropdown.tsx        |  4 +---
 .../intro/direct_channel/member/member.tsx      |  2 +-
 app/screens/channel/header/bookmarks.tsx        |  2 +-
 app/screens/channel/header/header.tsx           | 12 +++++++-----
 .../components/bookmark_detail.tsx              |  2 +-
 app/screens/channel_files/header.tsx            |  5 +----
 app/screens/channel_info/extra/extra.tsx        | 14 +++-----------
 .../title/public_private/public_private.tsx     | 12 ++----------
 .../create_direct_message.tsx                   | 13 ++++++-------
 app/screens/custom_status/custom_status.tsx     |  2 +-
 .../components/profile_image_picker.tsx         |  6 ++----
 .../emoji_picker/picker/footer/index.tsx        |  4 ++--
 .../components/options/user_presence/index.tsx  |  6 ++----
 .../categories_list/header/header.tsx           |  6 ++----
 app/screens/home/channel_list/servers/index.tsx |  6 ++----
 app/screens/home/search/results/header.tsx      |  5 +----
 app/screens/home/search/team_picker_icon.tsx    |  6 ++----
 .../manage_channel_members.tsx                  |  2 +-
 app/screens/post_options/post_options.tsx       |  6 ++----
 .../post_options/reaction_bar/reaction_bar.tsx  |  2 +-
 app/screens/post_priority_picker/footer.tsx     |  4 ++--
 .../post_priority_picker.tsx                    | 16 +++++++---------
 app/screens/thread_options/thread_options.tsx   |  4 +---
 app/screens/user_profile/user_profile.tsx       | 12 +++++++-----
 app/utils/helpers.test.ts                       |  5 ++---
 app/utils/helpers.ts                            |  5 ++---
 patches/@gorhom+bottom-sheet+4.6.4.patch        | 17 +++++++++++++++++
 56 files changed, 155 insertions(+), 194 deletions(-)
 create mode 100644 patches/@gorhom+bottom-sheet+4.6.4.patch

diff --git a/app/components/announcement_banner/announcement_banner.tsx b/app/components/announcement_banner/announcement_banner.tsx
index 70fbd87bc..242a803a6 100644
--- a/app/components/announcement_banner/announcement_banner.tsx
+++ b/app/components/announcement_banner/announcement_banner.tsx
@@ -9,7 +9,6 @@ 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';
@@ -85,7 +84,6 @@ 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);
@@ -107,7 +105,6 @@ const AnnouncementBanner = ({
         const snapPoint = bottomSheetSnapPoint(
             1,
             SNAP_POINT_WITHOUT_DISMISS + (allowDismissal ? DISMISS_BUTTON_HEIGHT : 0),
-            bottom,
         );
 
         bottomSheet({
@@ -117,7 +114,7 @@ const AnnouncementBanner = ({
             snapPoints: [1, snapPoint],
             theme,
         });
-    }, [theme.sidebarHeaderTextColor, intl.locale, renderContent, allowDismissal, bottom]);
+    }, [theme.sidebarHeaderTextColor, intl.locale, renderContent, allowDismissal]);
 
     const handleDismiss = useCallback(() => {
         dismissAnnouncement(serverUrl, bannerText);
diff --git a/app/components/channel_bookmarks/add_bookmark.tsx b/app/components/channel_bookmarks/add_bookmark.tsx
index 2a71f4a68..32bc92957 100644
--- a/app/components/channel_bookmarks/add_bookmark.tsx
+++ b/app/components/channel_bookmarks/add_bookmark.tsx
@@ -3,14 +3,13 @@
 
 import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
-import {Alert, View, type Insets} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {Alert, Platform, View, type Insets} from 'react-native';
 
 import Button from '@components/button';
 import {ITEM_HEIGHT} from '@components/option_item';
 import {Screens} from '@constants';
 import {useTheme} from '@context/theme';
-import {TITLE_HEIGHT} from '@screens/bottom_sheet';
+import {BOTTOM_SHEET_ANDROID_OFFSET, TITLE_HEIGHT} from '@screens/bottom_sheet';
 import {bottomSheet, showModal} from '@screens/navigation';
 import {bottomSheetSnapPoint} from '@utils/helpers';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
@@ -81,7 +80,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => ({
 const AddBookmark = ({bookmarksCount, channelId, currentUserId, canUploadFiles, showLarge}: Props) => {
     const theme = useTheme();
     const {formatMessage} = useIntl();
-    const {bottom} = useSafeAreaInsets();
     const styles = getStyleSheet(theme);
 
     const onPress = useCallback(() => {
@@ -126,14 +124,19 @@ const AddBookmark = ({bookmarksCount, channelId, currentUserId, canUploadFiles,
             />
         );
 
+        let height = bottomSheetSnapPoint(1, (2 * ITEM_HEIGHT)) + TITLE_HEIGHT;
+        if (Platform.OS === 'android') {
+            height += BOTTOM_SHEET_ANDROID_OFFSET;
+        }
+
         bottomSheet({
             title: formatMessage({id: 'channel_info.add_bookmark', defaultMessage: 'Add a bookmark'}),
             renderContent,
-            snapPoints: [1, bottomSheetSnapPoint(1, (2 * ITEM_HEIGHT), bottom) + TITLE_HEIGHT],
+            snapPoints: [1, height],
             theme,
             closeButtonId: 'close-channel-quick-actions',
         });
-    }, [bottom, bookmarksCount, canUploadFiles, currentUserId, channelId, theme]);
+    }, [bookmarksCount, canUploadFiles, formatMessage, theme, channelId, currentUserId]);
 
     const button = (
         <Button
diff --git a/app/components/channel_bookmarks/channel_bookmark/channel_bookmark.tsx b/app/components/channel_bookmarks/channel_bookmark/channel_bookmark.tsx
index 81f123ba5..3ee3fedfe 100644
--- a/app/components/channel_bookmarks/channel_bookmark/channel_bookmark.tsx
+++ b/app/components/channel_bookmarks/channel_bookmark/channel_bookmark.tsx
@@ -7,7 +7,6 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {useIntl, type IntlShape} from 'react-intl';
 import {Alert, StyleSheet} from 'react-native';
 import Animated from 'react-native-reanimated';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {ITEM_HEIGHT} from '@components/option_item';
 import {useServerUrl} from '@context/server';
@@ -90,7 +89,6 @@ const ChannelBookmark = ({
     const managedConfig = useManagedConfig<ManagedConfig>();
     const serverUrl = useServerUrl();
     const intl = useIntl();
-    const {bottom} = useSafeAreaInsets();
     const [action, setAction] = useState<GalleryAction>('none');
     const isDocumentFile = useMemo(() => isDocument(file), [file]);
     const canCopyPublicLink = Boolean((bookmark.type === 'link' || (file?.id && publicLinkEnabled)) && managedConfig.copyAndPasteProtection !== 'true');
@@ -124,11 +122,11 @@ const ChannelBookmark = ({
         bottomSheet({
             title: bookmark.displayName,
             renderContent,
-            snapPoints: [1, bottomSheetSnapPoint(1, (count * ITEM_HEIGHT), bottom) + TITLE_HEIGHT],
+            snapPoints: [1, bottomSheetSnapPoint(1, (count * ITEM_HEIGHT)) + TITLE_HEIGHT],
             theme,
             closeButtonId: 'close-channel-bookmark-actions',
         });
-    }, [bookmark, bottom, canCopyPublicLink, canDeleteBookmarks, canDownloadFiles, canEditBookmarks, file, theme]);
+    }, [bookmark, canCopyPublicLink, canDeleteBookmarks, canDownloadFiles, canEditBookmarks, file, theme]);
 
     const {onGestureEvent, ref} = useGalleryItem(galleryIdentifier, index || 0, handlePress);
 
diff --git a/app/components/channel_bookmarks/channel_bookmarks.tsx b/app/components/channel_bookmarks/channel_bookmarks.tsx
index 2812c3cc0..fa1652620 100644
--- a/app/components/channel_bookmarks/channel_bookmarks.tsx
+++ b/app/components/channel_bookmarks/channel_bookmarks.tsx
@@ -101,8 +101,9 @@ const ChannelBookmarks = ({
             />
         );
     }, [
-        attachmentIndex, bookmarks, canDownloadFiles, canDeleteBookmarks, canEditBookmarks,
-        handlePreviewPress, publicLinkEnabled,
+        canDeleteBookmarks, canDownloadFiles, canEditBookmarks,
+        galleryIdentifier, attachmentIndex, handlePreviewPress,
+        publicLinkEnabled,
     ]);
 
     const renderItemSeparator = useCallback(() => (<View style={styles.emptyItemSeparator}/>), []);
diff --git a/app/components/files_search/file_options/mobile_options.tsx b/app/components/files_search/file_options/mobile_options.tsx
index cd8e784b1..0787cce01 100644
--- a/app/components/files_search/file_options/mobile_options.tsx
+++ b/app/components/files_search/file_options/mobile_options.tsx
@@ -10,11 +10,9 @@ import Header, {HEADER_HEIGHT} from './header';
 import OptionMenus from './option_menus';
 
 import type {GalleryAction} from '@typings/screens/gallery';
-import type {EdgeInsets} from 'react-native-safe-area-context';
 
 type Props = {
     fileInfo: FileInfo;
-    insets: EdgeInsets;
     numOptions: number;
     setAction: (action: GalleryAction) => void;
     theme: Theme;
@@ -22,7 +20,6 @@ type Props = {
 
 export const showMobileOptionsBottomSheet = ({
     fileInfo,
-    insets,
     numOptions,
     setAction,
     theme,
@@ -42,7 +39,7 @@ export const showMobileOptionsBottomSheet = ({
         renderContent,
         snapPoints: [
             1,
-            bottomSheetSnapPoint(numOptions, ITEM_HEIGHT, insets.bottom) + HEADER_HEIGHT,
+            bottomSheetSnapPoint(numOptions, ITEM_HEIGHT) + HEADER_HEIGHT,
         ],
         theme,
         title: '',
diff --git a/app/components/files_search/file_results.tsx b/app/components/files_search/file_results.tsx
index a2f484378..5056d9b36 100644
--- a/app/components/files_search/file_results.tsx
+++ b/app/components/files_search/file_results.tsx
@@ -99,7 +99,6 @@ const FileResults = ({
         if (!isTablet) {
             showMobileOptionsBottomSheet({
                 fileInfo: fInfo,
-                insets,
                 numOptions,
                 setAction,
                 theme,
diff --git a/app/components/markdown/at_mention/at_mention.tsx b/app/components/markdown/at_mention/at_mention.tsx
index bdadc9775..ce337d4c9 100644
--- a/app/components/markdown/at_mention/at_mention.tsx
+++ b/app/components/markdown/at_mention/at_mention.tsx
@@ -6,7 +6,6 @@ import Clipboard from '@react-native-clipboard/clipboard';
 import React, {useCallback, useEffect, useMemo} from 'react';
 import {useIntl} from 'react-intl';
 import {type GestureResponderEvent, Keyboard, type StyleProp, StyleSheet, Text, type TextStyle, View} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {fetchUserOrGroupsByMentionsInBatch} from '@actions/remote/user';
 import SlideUpPanelItem, {ITEM_HEIGHT} from '@components/slide_up_panel_item';
@@ -62,7 +61,6 @@ const AtMention = ({
     const intl = useIntl();
     const managedConfig = useManagedConfig<ManagedConfig>();
     const theme = useTheme();
-    const {bottom} = useSafeAreaInsets();
     const serverUrl = useServerUrl();
 
     const user = useMemoMentionedUser(users, mentionName);
@@ -144,12 +142,12 @@ const AtMention = ({
             bottomSheet({
                 closeButtonId: 'close-at-mention',
                 renderContent,
-                snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT, bottom)],
+                snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT)],
                 title: intl.formatMessage({id: 'post.options.title', defaultMessage: 'Options'}),
                 theme,
             });
         }
-    }, [managedConfig, intl, theme, bottom]);
+    }, [managedConfig?.copyAndPasteProtection, intl, theme, mentionName, user?.username]);
 
     const mentionTextStyle: StyleProp<TextStyle> = [];
 
diff --git a/app/components/markdown/markdown_code_block/index.tsx b/app/components/markdown/markdown_code_block/index.tsx
index a9d799b96..d6ace5432 100644
--- a/app/components/markdown/markdown_code_block/index.tsx
+++ b/app/components/markdown/markdown_code_block/index.tsx
@@ -6,7 +6,6 @@ import Clipboard from '@react-native-clipboard/clipboard';
 import React, {useCallback, useMemo} from 'react';
 import {useIntl} from 'react-intl';
 import {Keyboard, StyleSheet, Text, type TextStyle, TouchableOpacity, View} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import FormattedText from '@components/formatted_text';
 import SlideUpPanelItem, {ITEM_HEIGHT} from '@components/slide_up_panel_item';
@@ -71,7 +70,6 @@ const MarkdownCodeBlock = ({language = '', content, textStyle}: MarkdownCodeBloc
     const intl = useIntl();
     const managedConfig = useManagedConfig<ManagedConfig>();
     const theme = useTheme();
-    const {bottom} = useSafeAreaInsets();
     const style = getStyleSheet(theme);
     const SyntaxHighlighter = useMemo(() => {
         if (!syntaxHighlighter) {
@@ -147,12 +145,12 @@ const MarkdownCodeBlock = ({language = '', content, textStyle}: MarkdownCodeBloc
             bottomSheet({
                 closeButtonId: 'close-code-block',
                 renderContent,
-                snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT, bottom)],
+                snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT)],
                 title: intl.formatMessage({id: 'post.options.title', defaultMessage: 'Options'}),
                 theme,
             });
         }
-    }, [managedConfig, intl, bottom, theme]);
+    }, [managedConfig?.copyAndPasteProtection, intl, theme, style.bottomSheet, content]);
 
     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 23bead8ca..547f984ad 100644
--- a/app/components/markdown/markdown_image/index.tsx
+++ b/app/components/markdown/markdown_image/index.tsx
@@ -7,7 +7,6 @@ import React, {useCallback, useMemo, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
 import {Alert, Platform, type StyleProp, Text, type TextStyle, TouchableWithoutFeedback, View} from 'react-native';
 import Animated from 'react-native-reanimated';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {SvgUri} from 'react-native-svg';
 import parseUrl from 'url-parse';
 
@@ -76,7 +75,6 @@ const MarkdownImage = ({
 }: MarkdownImageProps) => {
     const intl = useIntl();
     const isTablet = useIsTablet();
-    const {bottom} = useSafeAreaInsets();
     const theme = useTheme();
     const style = getStyleSheet(theme);
     const managedConfig = useManagedConfig<ManagedConfig>();
@@ -182,12 +180,12 @@ const MarkdownImage = ({
             bottomSheet({
                 closeButtonId: 'close-mardown-image',
                 renderContent,
-                snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT, bottom)],
+                snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT)],
                 title: intl.formatMessage({id: 'post.options.title', defaultMessage: 'Options'}),
                 theme,
             });
         }
-    }, [managedConfig, intl.locale, bottom, theme]);
+    }, [managedConfig?.copyAndPasteProtection, intl, theme, style.bottomSheet, linkDestination, source]);
 
     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 1e27b1c72..772506a5a 100644
--- a/app/components/markdown/markdown_latex_block/index.tsx
+++ b/app/components/markdown/markdown_latex_block/index.tsx
@@ -6,7 +6,6 @@ import Clipboard from '@react-native-clipboard/clipboard';
 import React, {useCallback, useMemo} from 'react';
 import {useIntl} from 'react-intl';
 import {Keyboard, View, Text, StyleSheet, Platform} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import FormattedText from '@components/formatted_text';
 import ErrorBoundary from '@components/markdown/error_boundary';
@@ -90,7 +89,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
 
 const LatexCodeBlock = ({content, theme}: Props) => {
     const intl = useIntl();
-    const {bottom} = useSafeAreaInsets();
     const managedConfig = useManagedConfig<ManagedConfig>();
     const styles = getStyleSheet(theme);
     const languageDisplayName = getHighlightLanguageName('latex');
@@ -161,12 +159,12 @@ const LatexCodeBlock = ({content, theme}: Props) => {
             bottomSheet({
                 closeButtonId: 'close-code-block',
                 renderContent,
-                snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT, bottom)],
+                snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT)],
                 title: intl.formatMessage({id: 'post.options.title', defaultMessage: 'Options'}),
                 theme,
             });
         }
-    }, [managedConfig?.copyAndPasteProtection, intl, bottom, theme]);
+    }, [managedConfig?.copyAndPasteProtection, intl, theme, styles.bottomSheet, content]);
 
     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 2b65bdc3a..9d471faa8 100644
--- a/app/components/markdown/markdown_link/markdown_link.tsx
+++ b/app/components/markdown/markdown_link/markdown_link.tsx
@@ -6,7 +6,6 @@ import Clipboard from '@react-native-clipboard/clipboard';
 import React, {Children, type ReactElement, useCallback} from 'react';
 import {useIntl} from 'react-intl';
 import {Alert, StyleSheet, Text, View} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import urlParse from 'url-parse';
 
 import SlideUpPanelItem, {ITEM_HEIGHT} from '@components/slide_up_panel_item';
@@ -47,7 +46,6 @@ const parseLinkLiteral = (literal: string) => {
 
 const MarkdownLink = ({children, experimentalNormalizeMarkdownLinks, href, siteURL, onLinkLongPress}: MarkdownLinkProps) => {
     const intl = useIntl();
-    const {bottom} = useSafeAreaInsets();
     const managedConfig = useManagedConfig<ManagedConfig>();
     const serverUrl = useServerUrl();
     const theme = useTheme();
@@ -146,12 +144,12 @@ const MarkdownLink = ({children, experimentalNormalizeMarkdownLinks, href, siteU
             bottomSheet({
                 closeButtonId: 'close-mardown-link',
                 renderContent,
-                snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT, bottom)],
+                snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT)],
                 title: intl.formatMessage({id: 'post.options.title', defaultMessage: 'Options'}),
                 theme,
             });
         }
-    }, [managedConfig, intl, bottom, theme, onLinkLongPress]);
+    }, [managedConfig?.copyAndPasteProtection, onLinkLongPress, intl, theme, href]);
 
     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 cfba22fdf..8285861ff 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
@@ -4,7 +4,6 @@
 import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
 import {Alert, StyleSheet} 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';
@@ -40,7 +39,6 @@ export default function CameraQuickAction({
 }: QuickActionAttachmentProps) {
     const intl = useIntl();
     const theme = useTheme();
-    const {bottom} = useSafeAreaInsets();
 
     const handleButtonPress = useCallback((options: CameraOptions) => {
         const picker = new PickerUtil(intl,
@@ -72,11 +70,11 @@ export default function CameraQuickAction({
         bottomSheet({
             title: intl.formatMessage({id: 'mobile.camera_type.title', defaultMessage: 'Camera options'}),
             renderContent,
-            snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT, bottom) + TITLE_HEIGHT],
+            snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT) + TITLE_HEIGHT],
             theme,
             closeButtonId: 'camera-close-id',
         });
-    }, [intl, theme, renderContent, maxFilesReached, maxFileCount, bottom]);
+    }, [intl, theme, renderContent, maxFilesReached, maxFileCount]);
 
     const actionTestID = disabled ? `${testID}.disabled` : testID;
     const color = disabled ? changeOpacity(theme.centerChannelColor, 0.16) : changeOpacity(theme.centerChannelColor, 0.64);
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 2da7a6ada..924d17309 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
@@ -55,7 +55,7 @@ export default function PostPriorityAction({
                 closeButtonId: POST_PRIORITY_PICKER_BUTTON,
             },
         });
-    }, [intl, postPriority, updatePostPriority, theme]);
+    }, [isTablet, intl, theme, postPriority, updatePostPriority]);
 
     const iconName = 'alert-circle-outline';
     const iconColor = changeOpacity(theme.centerChannelColor, 0.64);
diff --git a/app/components/post_list/post/body/acknowledgements/acknowledgements.tsx b/app/components/post_list/post/body/acknowledgements/acknowledgements.tsx
index 941d33d2b..18ba1f5c0 100644
--- a/app/components/post_list/post/body/acknowledgements/acknowledgements.tsx
+++ b/app/components/post_list/post/body/acknowledgements/acknowledgements.tsx
@@ -4,7 +4,6 @@
 import React, {useCallback, useMemo} from 'react';
 import {useIntl} from 'react-intl';
 import {View, Text, TouchableOpacity, useWindowDimensions} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {acknowledgePost, unacknowledgePost} from '@actions/remote/post';
 import {fetchMissingProfilesByIds} from '@actions/remote/user';
@@ -75,7 +74,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
 const Acknowledgements = ({currentUserId, currentUserTimezone, hasReactions, location, post, theme}: Props) => {
     const intl = useIntl();
     const isTablet = useIsTablet();
-    const {bottom} = useSafeAreaInsets();
     const serverUrl = useServerUrl();
     const {height} = useWindowDimensions();
 
@@ -143,7 +141,7 @@ const Acknowledgements = ({currentUserId, currentUserTimezone, hasReactions, loc
             </>
         );
 
-        const snapPoint1 = bottomSheetSnapPoint(Math.min(userIds.length, 5), USER_ROW_HEIGHT, bottom) + TITLE_HEIGHT;
+        const snapPoint1 = bottomSheetSnapPoint(Math.min(userIds.length, 5), USER_ROW_HEIGHT) + TITLE_HEIGHT;
         const snapPoint2 = height * 0.8;
         const snapPoints: number[] = [1, Math.min(snapPoint1, snapPoint2)];
         if (userIds.length > 5 && snapPoint1 < snapPoint2) {
@@ -158,7 +156,11 @@ const Acknowledgements = ({currentUserId, currentUserTimezone, hasReactions, loc
             title: intl.formatMessage({id: 'mobile.acknowledgements.header', defaultMessage: 'Acknowledgements'}),
             theme,
         });
-    }, [bottom, intl, isTablet, acknowledgements, theme, location, post.channelId, currentUserTimezone]);
+    }, [
+        acknowledgements, height, intl,
+        theme, serverUrl, isTablet, style.listHeaderText,
+        post.channelId, location, currentUserTimezone,
+    ]);
 
     return (
         <>
diff --git a/app/components/post_list/post/body/acknowledgements/users_list/user_list_item.tsx b/app/components/post_list/post/body/acknowledgements/users_list/user_list_item.tsx
index 55d621a23..6bf6af13c 100644
--- a/app/components/post_list/post/body/acknowledgements/users_list/user_list_item.tsx
+++ b/app/components/post_list/post/body/acknowledgements/users_list/user_list_item.tsx
@@ -62,7 +62,7 @@ const UserListItem = ({
             Keyboard.dismiss();
             openAsBottomSheet({screen, title, theme, closeButtonId, props});
         }
-    }, [channelId, location]);
+    }, [channelId, intl, location, theme]);
 
     return (
         <UserItem
diff --git a/app/components/post_list/post/body/failed/index.tsx b/app/components/post_list/post/body/failed/index.tsx
index 7d6dd2e7e..b5f2e59e7 100644
--- a/app/components/post_list/post/body/failed/index.tsx
+++ b/app/components/post_list/post/body/failed/index.tsx
@@ -4,7 +4,6 @@
 import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {removePost} from '@actions/local/post';
 import {retryFailedPost} from '@actions/remote/post';
@@ -33,7 +32,6 @@ const styles = StyleSheet.create({
 
 const Failed = ({post, theme}: FailedProps) => {
     const intl = useIntl();
-    const {bottom} = useSafeAreaInsets();
     const serverUrl = useServerUrl();
 
     const onPress = useCallback(() => {
@@ -69,11 +67,11 @@ const Failed = ({post, theme}: FailedProps) => {
         bottomSheet({
             closeButtonId: 'close-post-failed',
             renderContent,
-            snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT, bottom)],
+            snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT)],
             title: intl.formatMessage({id: 'post.options.title', defaultMessage: 'Options'}),
             theme,
         });
-    }, [bottom]);
+    }, [intl, post, serverUrl, theme]);
 
     return (
         <TouchableOpacity
diff --git a/app/components/post_list/post/body/reactions/reactions.tsx b/app/components/post_list/post/body/reactions/reactions.tsx
index 2ca18c922..8d3192d41 100644
--- a/app/components/post_list/post/body/reactions/reactions.tsx
+++ b/app/components/post_list/post/body/reactions/reactions.tsx
@@ -98,7 +98,7 @@ const Reactions = ({currentUserId, canAddReaction, canRemoveReaction, disabled,
         }, new Map<string, ReactionModel[]>());
 
         return {reactionsByName, highlightedReactions};
-    }, [sortedReactions, reactions]);
+    }, [reactions, currentUserId]);
 
     const handleToggleReactionToPost = (emoji: string) => {
         toggleReaction(serverUrl, postId, emoji);
diff --git a/app/components/post_list/post/footer/footer.tsx b/app/components/post_list/post/footer/footer.tsx
index e3a2f0ee6..60e2be25f 100644
--- a/app/components/post_list/post/footer/footer.tsx
+++ b/app/components/post_list/post/footer/footer.tsx
@@ -152,7 +152,7 @@ const Footer = ({channelId, location, participants, teamId, thread}: Props) => {
             return orderedParticipantsList;
         }
         return [];
-    }, [participants.length]);
+    }, [participants]);
 
     let userAvatarsStack;
     if (participantsList.length) {
diff --git a/app/components/selected_users/index.tsx b/app/components/selected_users/index.tsx
index 10648c341..c09a217ae 100644
--- a/app/components/selected_users/index.tsx
+++ b/app/components/selected_users/index.tsx
@@ -10,7 +10,7 @@ import Button from '@components/button';
 import {USER_CHIP_BOTTOM_MARGIN, USER_CHIP_HEIGHT} from '@components/selected_chip';
 import Toast from '@components/toast';
 import {useTheme} from '@context/theme';
-import {useKeyboardHeightWithDuration} from '@hooks/device';
+import {useIsTablet, useKeyboardHeightWithDuration} from '@hooks/device';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
 import SelectedUser from './selected_user';
@@ -92,7 +92,7 @@ const SCROLL_MARGIN_BOTTOM = 12;
 const USERS_CHIPS_MAX_HEIGHT = (CHIP_HEIGHT_WITH_MARGIN * MAX_CHIP_ROWS) + EXPOSED_CHIP_HEIGHT;
 const SCROLL_MAX_HEIGHT = USERS_CHIPS_MAX_HEIGHT + SCROLL_MARGIN_TOP + SCROLL_MARGIN_BOTTOM;
 const PANEL_MAX_HEIGHT = SCROLL_MAX_HEIGHT + BUTTON_HEIGHT;
-const TABLET_MARGIN_BOTTOM = 20;
+const MARGIN_BOTTOM = 20;
 const TOAST_BOTTOM_MARGIN = 24;
 
 const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
@@ -155,6 +155,7 @@ export default function SelectedUsers({
     const theme = useTheme();
     const style = getStyleFromTheme(theme);
     const keyboard = useKeyboardHeightWithDuration();
+    const isTablet = useIsTablet();
     const insets = useSafeAreaInsets();
 
     const usersChipsHeight = useSharedValue(0);
@@ -179,12 +180,10 @@ export default function SelectedUsers({
             );
         }
         return u;
-    }, [selectedIds, teammateNameDisplay, onRemove]);
+    }, [selectedIds, teammateNameDisplay, onRemove, testID]);
 
     const totalPanelHeight = useDerivedValue(() => (
-        isVisible ?
-            usersChipsHeight.value + SCROLL_MARGIN_BOTTOM + SCROLL_MARGIN_TOP + BUTTON_HEIGHT :
-            0
+        isVisible ? usersChipsHeight.value + SCROLL_MARGIN_BOTTOM + SCROLL_MARGIN_TOP + BUTTON_HEIGHT : 0
     ), [isVisible]);
 
     const handlePress = useCallback(() => {
@@ -205,10 +204,10 @@ export default function SelectedUsers({
     });
 
     const animatedContainerStyle = useAnimatedStyle(() => ({
-        marginBottom: withTiming(keyboardOverlap + TABLET_MARGIN_BOTTOM, {duration: keyboard.duration}),
+        marginBottom: withTiming(keyboardOverlap + ((Platform.OS === 'android' || isTablet) ? MARGIN_BOTTOM : -MARGIN_BOTTOM), {duration: keyboard.duration}),
         backgroundColor: isVisible ? theme.centerChannelBg : 'transparent',
         ...androidMaxHeight,
-    }), [keyboardOverlap, keyboard.duration, isVisible, theme.centerChannelBg]);
+    }), [keyboardOverlap, keyboard.duration, isVisible, isTablet, theme.centerChannelBg]);
 
     const animatedToastStyle = useAnimatedStyle(() => {
         return {
diff --git a/app/components/team_list/index.tsx b/app/components/team_list/index.tsx
index ff2e747ad..b1e5e4124 100644
--- a/app/components/team_list/index.tsx
+++ b/app/components/team_list/index.tsx
@@ -78,6 +78,7 @@ export default function TeamList({
                 testID={`${testID}.flat_list`}
                 onEndReached={onEndReached}
                 ListFooterComponent={footer}
+                scrollEnabled={teams.length > 3}
             />
         </View>
     );
diff --git a/app/components/user_avatars_stack/index.tsx b/app/components/user_avatars_stack/index.tsx
index f71d403f9..0ef8f8bb4 100644
--- a/app/components/user_avatars_stack/index.tsx
+++ b/app/components/user_avatars_stack/index.tsx
@@ -3,12 +3,12 @@
 
 import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
-import {type StyleProp, Text, type TextStyle, TouchableOpacity, View, type ViewStyle} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {Platform, type StyleProp, Text, type TextStyle, TouchableOpacity, View, type ViewStyle} from 'react-native';
 
 import FormattedText from '@components/formatted_text';
 import {useTheme} from '@context/theme';
 import {useIsTablet} from '@hooks/device';
+import {BOTTOM_SHEET_ANDROID_OFFSET} from '@screens/bottom_sheet';
 import {TITLE_HEIGHT} from '@screens/bottom_sheet/content';
 import {bottomSheet} from '@screens/navigation';
 import {bottomSheetSnapPoint} from '@utils/helpers';
@@ -102,7 +102,6 @@ const UserAvatarsStack = ({
     const theme = useTheme();
     const intl = useIntl();
     const isTablet = useIsTablet();
-    const {bottom} = useSafeAreaInsets();
 
     const showParticipantsList = useCallback(preventDoubleTap(() => {
         const renderContent = () => (
@@ -124,7 +123,12 @@ const UserAvatarsStack = ({
             </>
         );
 
-        const snapPoints: Array<string | number> = [1, bottomSheetSnapPoint(Math.min(users.length, 5), USER_ROW_HEIGHT, bottom) + TITLE_HEIGHT];
+        let height = bottomSheetSnapPoint(Math.min(users.length, 5), USER_ROW_HEIGHT) + TITLE_HEIGHT;
+        if (Platform.OS === 'android') {
+            height += BOTTOM_SHEET_ANDROID_OFFSET;
+        }
+
+        const snapPoints: Array<string | number> = [1, height];
         if (users.length > 5) {
             snapPoints.push('80%');
         }
@@ -137,7 +141,7 @@ const UserAvatarsStack = ({
             title: intl.formatMessage({id: 'mobile.participants.header', defaultMessage: 'Thread Participants'}),
             theme,
         });
-    }), [isTablet, theme, users, channelId, location, bottom]);
+    }), [isTablet, theme, users, channelId, location]);
 
     const displayUsers = users.slice(0, breakAt);
     const overflowUsersCount = Math.min(users.length - displayUsers.length, OVERFLOW_DISPLAY_LIMIT);
diff --git a/app/components/user_list/index.tsx b/app/components/user_list/index.tsx
index 38a6c598d..3568043be 100644
--- a/app/components/user_list/index.tsx
+++ b/app/components/user_list/index.tsx
@@ -221,7 +221,7 @@ export default function UserList({
         }
 
         return createProfilesSections(intl, profiles, channelMembers);
-    }, [channelMembers, loading, profiles, term]);
+    }, [channelMembers, intl, loading, profiles, term]);
 
     const openUserProfile = useCallback(async (profile: UserProfile | UserModel) => {
         let user: UserModel;
@@ -246,7 +246,7 @@ export default function UserList({
 
         Keyboard.dismiss();
         openAsBottomSheet({screen, title, theme, closeButtonId, props});
-    }, []);
+    }, [intl, serverUrl, theme]);
 
     const renderItem = useCallback(({item, index, section}: RenderItemType) => {
         // The list will re-render when the selection changes because it's passed into the list as extraData
@@ -275,7 +275,7 @@ export default function UserList({
                 includeMargin={includeUserMargin}
             />
         );
-    }, [selectedIds, handleSelectProfile, showManageMode, manageMode, tutorialWatched, includeUserMargin]);
+    }, [selectedIds, currentUserId, manageMode, handleSelectProfile, openUserProfile, showManageMode, tutorialWatched, includeUserMargin]);
 
     const renderLoading = useCallback(() => {
         if (!loading) {
diff --git a/app/products/calls/components/audio_device_button.tsx b/app/products/calls/components/audio_device_button.tsx
index c550cceb7..99793e81b 100644
--- a/app/products/calls/components/audio_device_button.tsx
+++ b/app/products/calls/components/audio_device_button.tsx
@@ -4,7 +4,6 @@
 import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
 import {Pressable, type StyleProp, Text, type TextStyle, View, type ViewStyle} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {setPreferredAudioRoute} from '@calls/actions/calls';
 import {AudioDevice, type CurrentCall} from '@calls/types/calls';
@@ -33,7 +32,6 @@ export const AudioDeviceButton = ({pressableStyle, iconStyle, buttonTextStyle, c
     const intl = useIntl();
     const theme = useTheme();
     const style = getStyleFromTheme(theme);
-    const {bottom} = useSafeAreaInsets();
     const isTablet = Device.IS_TABLET; // not `useIsTablet` because even if we're in splitView, we're still using a tablet.
     const color = theme.awayIndicator;
     const audioDeviceInfo = currentCall.audioDeviceInfo;
@@ -109,7 +107,7 @@ export const AudioDeviceButton = ({pressableStyle, iconStyle, buttonTextStyle, c
         bottomSheet({
             closeButtonId: 'close-other-actions',
             renderContent,
-            snapPoints: [1, bottomSheetSnapPoint(available.length + 1, ITEM_HEIGHT, bottom)],
+            snapPoints: [1, bottomSheetSnapPoint(available.length + 1, ITEM_HEIGHT)],
             title: intl.formatMessage({id: 'mobile.calls_audio_device', defaultMessage: 'Select audio device'}),
             theme,
         });
diff --git a/app/products/calls/hooks.ts b/app/products/calls/hooks.ts
index 5bf8ae65a..4315e66f1 100644
--- a/app/products/calls/hooks.ts
+++ b/app/products/calls/hooks.ts
@@ -208,7 +208,7 @@ export const useHostMenus = () => {
         const props = {closeButtonId: closeHostControls, session};
 
         openAsBottomSheet({screen, title, theme, closeButtonId: closeHostControls, props});
-    }, [theme]);
+    }, [intl, theme]);
 
     const openUserProfile = useCallback(async (session: CallSession) => {
         const screen = Screens.USER_PROFILE;
@@ -217,7 +217,7 @@ export const useHostMenus = () => {
         const props = {closeButtonId: closeUserProfile, location: '', userId: session.userId};
 
         openAsBottomSheet({screen, title, theme, closeButtonId: closeUserProfile, props});
-    }, [theme, currentCall?.channelId]);
+    }, [intl, theme]);
 
     const onPress = useCallback((session: CallSession) => () => {
         // Show host controls when allowed and I'm host or admin,
diff --git a/app/products/calls/screens/call_screen/call_screen.tsx b/app/products/calls/screens/call_screen/call_screen.tsx
index d2c6ed998..9af21a5eb 100644
--- a/app/products/calls/screens/call_screen/call_screen.tsx
+++ b/app/products/calls/screens/call_screen/call_screen.tsx
@@ -19,7 +19,6 @@ import {
     View,
 } from 'react-native';
 import {Navigation} from 'react-native-navigation';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {RTCView} from 'react-native-webrtc';
 
 import {muteMyself, unmuteMyself} from '@calls/actions';
@@ -330,7 +329,6 @@ const CallScreen = ({
 }: Props) => {
     const intl = useIntl();
     const theme = useTheme();
-    const {bottom} = useSafeAreaInsets();
     const {width, height} = useWindowDimensions();
     const isTablet = useIsTablet();
     const serverUrl = useServerUrl();
@@ -504,7 +502,7 @@ const CallScreen = ({
 
         Keyboard.dismiss();
         openAsBottomSheet({screen, title, theme, closeButtonId});
-    }, [theme]);
+    }, [intl, theme]);
 
     const showOtherActions = useCallback(async () => {
         const renderContent = () => {
@@ -552,11 +550,11 @@ const CallScreen = ({
         bottomSheet({
             closeButtonId: 'close-other-actions',
             renderContent,
-            snapPoints: [1, bottomSheetSnapPoint(items, ITEM_HEIGHT, bottom)],
+            snapPoints: [1, bottomSheetSnapPoint(items, ITEM_HEIGHT)],
             title: intl.formatMessage({id: 'post.options.title', defaultMessage: 'Options'}),
             theme,
         });
-    }, [bottom, intl, theme, isHost, EnableRecordings, waitingForRecording, recording, startRecording,
+    }, [intl, theme, isHost, EnableRecordings, waitingForRecording, recording, startRecording,
         recordOptionTitle, stopRecording, stopRecordingOptionTitle, style, switchToThread,
         callThreadOptionTitle, openChannelOptionTitle, ccAvailable, toggleCC, showCC, hideCCTitle,
         showCCTitle]);
diff --git a/app/products/calls/screens/host_controls/host_controls.tsx b/app/products/calls/screens/host_controls/host_controls.tsx
index accf1c23b..76e65f95d 100644
--- a/app/products/calls/screens/host_controls/host_controls.tsx
+++ b/app/products/calls/screens/host_controls/host_controls.tsx
@@ -4,7 +4,6 @@
 import React, {useCallback, useMemo} from 'react';
 import {useIntl} from 'react-intl';
 import {Platform, View} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {hostLowerHand, hostMake, hostMuteSession, hostStopScreenshare} from '@calls/actions/calls';
 import {removeFromCall} from '@calls/alerts';
@@ -56,7 +55,6 @@ export const HostControls = ({
 }: Props) => {
     const intl = useIntl();
     const theme = useTheme();
-    const {bottom} = useSafeAreaInsets();
     const {openUserProfile} = useHostMenus();
     const styles = getStyleFromTheme(theme);
 
@@ -85,7 +83,7 @@ export const HostControls = ({
     const profilePress = useCallback(async () => {
         await dismissBottomSheet();
         openUserProfile(session);
-    }, [session]);
+    }, [openUserProfile, session]);
 
     const removePress = useCallback(async () => {
         const displayName = displayUsername(session.userModel, intl.locale, teammateNameDisplay, true);
@@ -96,9 +94,9 @@ export const HostControls = ({
         const items = 3 + (session.muted ? 0 : 1) + (sharingScreen ? 1 : 0) + (session.raisedHand ? 1 : 0);
         return [
             1,
-            bottomSheetSnapPoint(items, ITEM_HEIGHT, bottom) + TITLE_HEIGHT + SEPARATOR_HEIGHT + (Platform.OS === 'android' ? ANDROID_BUMP_HEIGHT : 0),
+            bottomSheetSnapPoint(items, ITEM_HEIGHT) + TITLE_HEIGHT + SEPARATOR_HEIGHT + (Platform.OS === 'android' ? ANDROID_BUMP_HEIGHT : 0),
         ];
-    }, [bottom, session.muted, sharingScreen, session.raisedHand]);
+    }, [session.muted, sharingScreen, session.raisedHand]);
 
     const makeHostText = intl.formatMessage({id: 'mobile.calls_make_host', defaultMessage: 'Make host'});
     const muteText = intl.formatMessage({id: 'mobile.calls_mute_participant', defaultMessage: 'Mute participant'});
diff --git a/app/products/calls/screens/participants_list/participants_list.tsx b/app/products/calls/screens/participants_list/participants_list.tsx
index e4a86ca2c..134926adf 100644
--- a/app/products/calls/screens/participants_list/participants_list.tsx
+++ b/app/products/calls/screens/participants_list/participants_list.tsx
@@ -6,7 +6,6 @@ import React, {useCallback, useMemo} from 'react';
 import {useIntl} from 'react-intl';
 import {type ListRenderItemInfo, Text, TouchableOpacity, useWindowDimensions, View} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {hostMuteOthers} from '@calls/actions/calls';
 import {useHostControlsAvailable, useHostMenus} from '@calls/hooks';
@@ -79,14 +78,13 @@ export const ParticipantsList = ({
     const theme = useTheme();
     const {onPress} = useHostMenus();
     const hostControlsAvailable = useHostControlsAvailable();
-    const {bottom} = useSafeAreaInsets();
     const {height} = useWindowDimensions();
     const isTablet = useIsTablet();
     const List = useMemo(() => (isTablet ? FlatList : BottomSheetFlatList), [isTablet]);
     const styles = getStyleSheet(theme);
 
     const sessions = sortSessions(intl.locale, teammateNameDisplay, sessionsDict);
-    const snapPoint1 = bottomSheetSnapPoint(Math.min(sessions.length, MIN_ROWS), ROW_HEIGHT, bottom) + HEADER_HEIGHT;
+    const snapPoint1 = bottomSheetSnapPoint(Math.min(sessions.length, MIN_ROWS), ROW_HEIGHT) + HEADER_HEIGHT;
     const snapPoint2 = height * 0.8;
     const snapPoints = [1, Math.min(snapPoint1, snapPoint2)];
     if (sessions.length > MIN_ROWS && snapPoint1 < snapPoint2) {
@@ -141,7 +139,6 @@ export const ParticipantsList = ({
                     renderItem={renderItem}
                     overScrollMode={'auto'}
                 />
-                <View style={{height: bottom}}/>
             </>
         );
     };
diff --git a/app/screens/bottom_sheet/button.tsx b/app/screens/bottom_sheet/button.tsx
index 0dabe9c0b..2672d0ee9 100644
--- a/app/screens/bottom_sheet/button.tsx
+++ b/app/screens/bottom_sheet/button.tsx
@@ -88,7 +88,7 @@ function BottomSheetButton({disabled = false, onPress, icon, testID, text}: Prop
                     )}
 
                 </TouchableWithFeedback>
-                <View style={{paddingBottom: Platform.select({ios: (isTablet ? 20 : 32), android: 20})}}/>
+                <View style={{paddingBottom: Platform.select({ios: (isTablet ? 20 : 0), android: 20})}}/>
             </View>
         </View>
     );
diff --git a/app/screens/bottom_sheet/index.tsx b/app/screens/bottom_sheet/index.tsx
index f3e96c8e5..160ad93c1 100644
--- a/app/screens/bottom_sheet/index.tsx
+++ b/app/screens/bottom_sheet/index.tsx
@@ -5,6 +5,7 @@ import BottomSheetM, {BottomSheetBackdrop, type BottomSheetBackdropProps} from '
 import React, {type ReactNode, useCallback, useEffect, useMemo, useRef} from 'react';
 import {DeviceEventEmitter, type Handle, InteractionManager, Keyboard, type StyleProp, View, type ViewStyle} from 'react-native';
 import {ReduceMotion, type WithSpringConfig} from 'react-native-reanimated';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {Events} from '@constants';
 import {useTheme} from '@context/theme';
@@ -22,6 +23,8 @@ import type {AvailableScreens} from '@typings/screens/navigation';
 export {default as BottomSheetButton, BUTTON_HEIGHT} from './button';
 export {default as BottomSheetContent, TITLE_HEIGHT} from './content';
 
+export const BOTTOM_SHEET_ANDROID_OFFSET = 12;
+
 type Props = {
     closeButtonId?: string;
     componentId: AvailableScreens;
@@ -93,6 +96,7 @@ const BottomSheet = ({
 }: Props) => {
     const sheetRef = useRef<BottomSheetM>(null);
     const isTablet = useIsTablet();
+    const insets = useSafeAreaInsets();
     const theme = useTheme();
     const styles = getStyleSheet(theme);
     const interaction = useRef<Handle>();
@@ -216,6 +220,7 @@ const BottomSheet = ({
             keyboardBehavior='extend'
             keyboardBlurBehavior='restore'
             onClose={close}
+            bottomInset={insets.bottom}
         >
             {renderContainerContent()}
         </BottomSheetM>
diff --git a/app/screens/browse_channels/channel_dropdown.tsx b/app/screens/browse_channels/channel_dropdown.tsx
index 3be4fda24..0402c1e12 100644
--- a/app/screens/browse_channels/channel_dropdown.tsx
+++ b/app/screens/browse_channels/channel_dropdown.tsx
@@ -4,7 +4,6 @@
 import React from 'react';
 import {useIntl} from 'react-intl';
 import {View, Text} 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';
@@ -48,7 +47,6 @@ export default function ChannelDropdown({
     sharedChannelsEnabled,
 }: Props) {
     const intl = useIntl();
-    const {bottom} = useSafeAreaInsets();
     const theme = useTheme();
     const style = getStyleFromTheme(theme);
 
@@ -73,7 +71,7 @@ export default function ChannelDropdown({
             items += 1;
         }
 
-        const itemsSnap = bottomSheetSnapPoint(items, ITEM_HEIGHT, bottom) + TITLE_HEIGHT;
+        const itemsSnap = bottomSheetSnapPoint(items, ITEM_HEIGHT) + TITLE_HEIGHT;
         bottomSheet({
             title: intl.formatMessage({id: 'browse_channels.dropdownTitle', defaultMessage: 'Show'}),
             renderContent,
diff --git a/app/screens/channel/channel_post_list/intro/direct_channel/member/member.tsx b/app/screens/channel/channel_post_list/intro/direct_channel/member/member.tsx
index da97b275c..2b2b78c61 100644
--- a/app/screens/channel/channel_post_list/intro/direct_channel/member/member.tsx
+++ b/app/screens/channel/channel_post_list/intro/direct_channel/member/member.tsx
@@ -39,7 +39,7 @@ const Member = ({channelId, containerStyle, size = 72, showStatus = true, theme,
 
         Keyboard.dismiss();
         openAsBottomSheet({screen, title, theme, closeButtonId, props});
-    }, [theme, intl.locale]);
+    }, [intl, user.id, channelId, theme]);
 
     return (
         <TouchableWithFeedback
diff --git a/app/screens/channel/header/bookmarks.tsx b/app/screens/channel/header/bookmarks.tsx
index 21a6da487..e146ce7d8 100644
--- a/app/screens/channel/header/bookmarks.tsx
+++ b/app/screens/channel/header/bookmarks.tsx
@@ -50,7 +50,7 @@ const ChannelHeaderBookmarks = ({canAddBookmarks, channelId}: Props) => {
         ...styles.content,
         top: defaultHeight,
         zIndex: 1,
-    }), [defaultHeight]);
+    }), [defaultHeight, styles.content]);
 
     return (
         <View style={containerStyle}>
diff --git a/app/screens/channel/header/header.tsx b/app/screens/channel/header/header.tsx
index 0b93644c7..391b34a9d 100644
--- a/app/screens/channel/header/header.tsx
+++ b/app/screens/channel/header/header.tsx
@@ -4,7 +4,6 @@
 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 {getCallsConfig} from '@calls/state';
 import {CHANNEL_ACTIONS_OPTIONS_HEIGHT} from '@components/channel_actions/channel_actions';
@@ -19,6 +18,7 @@ import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
 import {useIsTablet} from '@hooks/device';
 import {useDefaultHeaderHeight} from '@hooks/header';
+import {BOTTOM_SHEET_ANDROID_OFFSET} from '@screens/bottom_sheet';
 import {bottomSheet, popTopScreen, showModal} from '@screens/navigation';
 import {isTypeDMorGM} from '@utils/channel';
 import {bottomSheetSnapPoint} from '@utils/helpers';
@@ -85,7 +85,6 @@ const ChannelHeader = ({
 }: ChannelProps) => {
     const intl = useIntl();
     const isTablet = useIsTablet();
-    const {bottom} = useSafeAreaInsets();
     const theme = useTheme();
     const styles = getStyleSheet(theme);
     const defaultHeight = useDefaultHeaderHeight();
@@ -155,7 +154,10 @@ const ChannelHeader = ({
 
         // When calls is enabled, we need space to move the "Copy Link" from a button to an option
         const items = callsAvailable && !isDMorGM ? 3 : 2;
-        const height = CHANNEL_ACTIONS_OPTIONS_HEIGHT + SEPARATOR_HEIGHT + MARGIN + (items * ITEM_HEIGHT);
+        let height = CHANNEL_ACTIONS_OPTIONS_HEIGHT + SEPARATOR_HEIGHT + MARGIN + (items * ITEM_HEIGHT);
+        if (Platform.OS === 'android') {
+            height += BOTTOM_SHEET_ANDROID_OFFSET;
+        }
 
         const renderContent = () => {
             return (
@@ -170,11 +172,11 @@ const ChannelHeader = ({
         bottomSheet({
             title: '',
             renderContent,
-            snapPoints: [1, bottomSheetSnapPoint(1, height, bottom)],
+            snapPoints: [1, bottomSheetSnapPoint(1, height)],
             theme,
             closeButtonId: 'close-channel-quick-actions',
         });
-    }, [bottom, channelId, isDMorGM, isTablet, onTitlePress, theme, callsAvailable]);
+    }, [channelId, isDMorGM, isTablet, onTitlePress, theme, callsAvailable]);
 
     const rightButtons: HeaderRightButton[] = useMemo(() => ([
 
diff --git a/app/screens/channel_bookmark/components/bookmark_detail.tsx b/app/screens/channel_bookmark/components/bookmark_detail.tsx
index 3f68a4c5e..bebd3e1b6 100644
--- a/app/screens/channel_bookmark/components/bookmark_detail.tsx
+++ b/app/screens/channel_bookmark/components/bookmark_detail.tsx
@@ -94,7 +94,7 @@ const BookmarkDetail = ({disabled, emoji, file, imageUrl, setBookmarkDisplayName
                 file,
             },
         });
-    }, [imageUrl, file, theme, setBookmarkEmoji]);
+    }, [theme, intl, setBookmarkEmoji, imageUrl, file]);
 
     return (
         <View style={paddingStyle}>
diff --git a/app/screens/channel_files/header.tsx b/app/screens/channel_files/header.tsx
index 4289ee5ae..c826d0a38 100644
--- a/app/screens/channel_files/header.tsx
+++ b/app/screens/channel_files/header.tsx
@@ -3,7 +3,6 @@
 import React, {useCallback, useMemo} from 'react';
 import {useIntl} from 'react-intl';
 import {Text, View} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import Badge from '@components/badge';
 import CompassIcon from '@components/compass_icon';
@@ -58,7 +57,6 @@ const Header = ({
     const theme = useTheme();
     const styles = getStyleFromTheme(theme);
     const intl = useIntl();
-    const {bottom} = useSafeAreaInsets();
     const isTablet = useIsTablet();
     const hasFilters = selectedFilter !== FileFilters.ALL;
     const messageObject = hasFilters ? {
@@ -78,10 +76,9 @@ const Header = ({
             bottomSheetSnapPoint(
                 NUMBER_FILTER_ITEMS,
                 FILTER_ITEM_HEIGHT,
-                bottom,
             ) + TITLE_HEIGHT + DIVIDERS_HEIGHT + (isTablet ? TITLE_SEPARATOR_MARGIN_TABLET : TITLE_SEPARATOR_MARGIN),
         ];
-    }, []);
+    }, [isTablet]);
 
     const handleFilterPress = useCallback(() => {
         const renderContent = () => {
diff --git a/app/screens/channel_info/extra/extra.tsx b/app/screens/channel_info/extra/extra.tsx
index 15bc3f217..f1b365abb 100644
--- a/app/screens/channel_info/extra/extra.tsx
+++ b/app/screens/channel_info/extra/extra.tsx
@@ -7,7 +7,6 @@ import moment from 'moment';
 import React, {useCallback, useMemo} from 'react';
 import {useIntl} from 'react-intl';
 import {Platform, StyleSheet, Text, View} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import CustomStatusExpiry from '@components/custom_status/custom_status_expiry';
 import Emoji from '@components/emoji';
@@ -97,7 +96,6 @@ const onCopy = async (text: string, isLink?: boolean) => {
 
 const Extra = ({channelId, createdAt, createdBy, customStatus, header, isCustomStatusEnabled}: Props) => {
     const intl = useIntl();
-    const {bottom} = useSafeAreaInsets();
     const theme = useTheme();
     const managedConfig = useManagedConfig<ManagedConfig>();
 
@@ -112,7 +110,7 @@ const Extra = ({channelId, createdAt, createdBy, customStatus, header, isCustomS
                 value={createdAt}
             />
         ),
-    }), [createdAt, createdBy, theme]);
+    }), [createdAt, createdBy, styles.created]);
 
     const handleLongPress = useCallback((url?: string) => {
         if (managedConfig?.copyAndPasteProtection !== 'true') {
@@ -163,18 +161,12 @@ const Extra = ({channelId, createdAt, createdBy, customStatus, header, isCustomS
             bottomSheet({
                 closeButtonId: 'close-markdown-link',
                 renderContent,
-                snapPoints: [1, bottomSheetSnapPoint(url ? 3 : 2, ITEM_HEIGHT, bottom)],
+                snapPoints: [1, bottomSheetSnapPoint(url ? 3 : 2, ITEM_HEIGHT)],
                 title: intl.formatMessage({id: 'post.options.title', defaultMessage: 'Options'}),
                 theme,
             });
         }
-    }, [
-        header,
-        bottom,
-        theme,
-        intl.formatMessage,
-        managedConfig?.copyAndPasteProtection,
-    ]);
+    }, [managedConfig?.copyAndPasteProtection, intl, theme, header]);
 
     const touchableHandleLongPress = useCallback(() => handleLongPress(), [handleLongPress]);
 
diff --git a/app/screens/channel_info/title/public_private/public_private.tsx b/app/screens/channel_info/title/public_private/public_private.tsx
index f74cdbb3c..1cf6dbcfa 100644
--- a/app/screens/channel_info/title/public_private/public_private.tsx
+++ b/app/screens/channel_info/title/public_private/public_private.tsx
@@ -6,7 +6,6 @@ import Clipboard from '@react-native-clipboard/clipboard';
 import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
 import {Platform, StyleSheet, Text, View} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import SlideUpPanelItem, {ITEM_HEIGHT} from '@components/slide_up_panel_item';
 import {SNACK_BAR_TYPE} from '@constants/snack_bar';
@@ -45,7 +44,6 @@ const PublicPrivate = ({displayName, purpose}: Props) => {
     const intl = useIntl();
     const theme = useTheme();
     const managedConfig = useManagedConfig<ManagedConfig>();
-    const {bottom} = useSafeAreaInsets();
 
     const styles = getStyleSheet(theme);
     const publicPrivateTestId = 'channel_info.title.public_private';
@@ -85,18 +83,12 @@ const PublicPrivate = ({displayName, purpose}: Props) => {
             bottomSheet({
                 closeButtonId: 'close-mardown-link',
                 renderContent,
-                snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT, bottom)],
+                snapPoints: [1, bottomSheetSnapPoint(2, ITEM_HEIGHT)],
                 title: intl.formatMessage({id: 'post.options.title', defaultMessage: 'Options'}),
                 theme,
             });
         }
-    }, [
-        bottom,
-        theme,
-        onCopy,
-        intl.formatMessage,
-        managedConfig?.copyAndPasteProtection,
-    ]);
+    }, [managedConfig?.copyAndPasteProtection, intl, theme, onCopy]);
 
     return (
         <>
diff --git a/app/screens/create_direct_message/create_direct_message.tsx b/app/screens/create_direct_message/create_direct_message.tsx
index f739d55eb..799e24852 100644
--- a/app/screens/create_direct_message/create_direct_message.tsx
+++ b/app/screens/create_direct_message/create_direct_message.tsx
@@ -143,7 +143,7 @@ export default function CreateDirectMessage({
         }
 
         return !result.error;
-    }, [selectedIds, intl.locale, teammateNameDisplay, serverUrl]);
+    }, [selectedIds, intl, teammateNameDisplay, serverUrl]);
 
     const createGroupChannel = useCallback(async (ids: string[]): Promise<boolean> => {
         const result = await makeGroupChannel(serverUrl, ids);
@@ -153,7 +153,7 @@ export default function CreateDirectMessage({
         }
 
         return !result.error;
-    }, [serverUrl]);
+    }, [intl, serverUrl]);
 
     const startConversation = useCallback(async (selectedId?: {[id: string]: boolean}, selectedUser?: UserProfile) => {
         if (startingConversation) {
@@ -208,7 +208,7 @@ export default function CreateDirectMessage({
                 return newSelectedIds;
             });
         }
-    }, [currentUserId, clearSearch]);
+    }, [currentUserId, startConversation, clearSearch, selectedCount]);
 
     const onLayout = useCallback((e: LayoutChangeEvent) => {
         setContainerHeight(e.nativeEvent.layout.height);
@@ -223,7 +223,7 @@ export default function CreateDirectMessage({
                 testID: 'close.create_direct_message.button',
             }],
         });
-    }, [intl.locale, theme]);
+    }, [componentId, theme.sidebarHeaderTextColor]);
 
     const onChangeText = useCallback((searchTerm: string) => {
         setTerm(searchTerm);
@@ -273,7 +273,7 @@ export default function CreateDirectMessage({
 
             return true;
         };
-    }, [selectedCount > 0, currentUserId]);
+    }, [currentUserId, selectedCount]);
 
     useNavButtonPressed(CLOSE_BUTTON, componentId, close, [close]);
     useAndroidHardwareBackHandler(componentId, close);
@@ -284,7 +284,7 @@ export default function CreateDirectMessage({
 
     useEffect(() => {
         setShowToast(selectedCount >= General.MAX_USERS_IN_GM);
-    }, [selectedCount >= General.MAX_USERS_IN_GM]);
+    }, [selectedCount]);
 
     if (startingConversation) {
         return (
@@ -300,7 +300,6 @@ export default function CreateDirectMessage({
             testID='create_direct_message.screen'
             onLayout={onLayout}
             ref={mainView}
-            edges={['top', 'left', 'right']}
         >
             <View style={style.searchBar}>
                 <Search
diff --git a/app/screens/custom_status/custom_status.tsx b/app/screens/custom_status/custom_status.tsx
index 361c9e6d9..8a64aa823 100644
--- a/app/screens/custom_status/custom_status.tsx
+++ b/app/screens/custom_status/custom_status.tsx
@@ -304,7 +304,7 @@ const CustomStatus = ({
         } else {
             dismissModal({componentId});
         }
-    }, [isTablet]);
+    }, [componentId, isTablet]);
 
     useAndroidHardwareBackHandler(componentId, handleBackButton);
     useNavButtonPressed(BTN_UPDATE_STATUS, componentId, handleSetStatus, [handleSetStatus]);
diff --git a/app/screens/edit_profile/components/profile_image_picker.tsx b/app/screens/edit_profile/components/profile_image_picker.tsx
index 6c159b59e..b73be0632 100644
--- a/app/screens/edit_profile/components/profile_image_picker.tsx
+++ b/app/screens/edit_profile/components/profile_image_picker.tsx
@@ -4,7 +4,6 @@
 import React, {useCallback, useMemo} from 'react';
 import {useIntl} from 'react-intl';
 import {TouchableOpacity} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {buildProfileImageUrlFromUser} from '@actions/remote/user';
 import CompassIcon from '@components/compass_icon';
@@ -68,7 +67,6 @@ const ProfileImagePicker = ({
 }: ImagePickerProps) => {
     const theme = useTheme();
     const intl = useIntl();
-    const {bottom} = useSafeAreaInsets();
     const serverUrl = useServerUrl();
     const pictureUtils = useMemo(() => new PickerUtil(intl, uploadFiles), [uploadFiles, intl]);
     const canRemovePicture = hasPictureUrl(user, serverUrl);
@@ -109,7 +107,7 @@ const ProfileImagePicker = ({
             );
         };
 
-        const snapPoint = bottomSheetSnapPoint(4, ITEM_HEIGHT, bottom) + TITLE_HEIGHT;
+        const snapPoint = bottomSheetSnapPoint(4, ITEM_HEIGHT) + TITLE_HEIGHT;
 
         return bottomSheet({
             closeButtonId: 'close-edit-profile',
@@ -118,7 +116,7 @@ const ProfileImagePicker = ({
             title: 'Change profile photo',
             theme,
         });
-    }), [canRemovePicture, onRemoveProfileImage, bottom, pictureUtils, theme]);
+    }), [canRemovePicture, onRemoveProfileImage, pictureUtils, theme]);
 
     return (
         <TouchableOpacity
diff --git a/app/screens/emoji_picker/picker/footer/index.tsx b/app/screens/emoji_picker/picker/footer/index.tsx
index bdda8e1e4..d7052c66a 100644
--- a/app/screens/emoji_picker/picker/footer/index.tsx
+++ b/app/screens/emoji_picker/picker/footer/index.tsx
@@ -35,7 +35,7 @@ const PickerFooter = (props: BottomSheetFooterProps) => {
 
     const animatedStyle = useAnimatedStyle(() => {
         const paddingBottom = withTiming(
-            Platform.OS === 'ios' ? 20 : 0,
+            Platform.OS === 'ios' ? 32 : 0,
             {duration: 250},
         );
         return {backgroundColor: theme.centerChannelBg, paddingBottom};
@@ -44,7 +44,7 @@ const PickerFooter = (props: BottomSheetFooterProps) => {
     const heightAnimatedStyle = useAnimatedStyle(() => {
         let height = 55;
         if (keyboardHeight === 0 && Platform.OS === 'ios') {
-            height += 20;
+            height -= 10;
         } else if (keyboardHeight) {
             height = 0;
         }
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 6b3ffb9c8..82f5bcfec 100644
--- a/app/screens/home/account/components/options/user_presence/index.tsx
+++ b/app/screens/home/account/components/options/user_presence/index.tsx
@@ -4,7 +4,6 @@
 import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
 import {TouchableOpacity, View} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {setStatus} from '@actions/remote/user';
 import FormattedText from '@components/formatted_text';
@@ -57,7 +56,6 @@ type Props = {
 };
 const UserStatus = ({currentUser}: Props) => {
     const intl = useIntl();
-    const {bottom} = useSafeAreaInsets();
     const serverUrl = useServerUrl();
     const theme = useTheme();
     const styles = getStyleSheet(theme);
@@ -125,7 +123,7 @@ const UserStatus = ({currentUser}: Props) => {
             );
         };
 
-        const snapPoint = bottomSheetSnapPoint(4, ITEM_HEIGHT, bottom);
+        const snapPoint = bottomSheetSnapPoint(4, ITEM_HEIGHT);
         bottomSheet({
             closeButtonId: 'close-set-user-status',
             renderContent,
@@ -133,7 +131,7 @@ const UserStatus = ({currentUser}: Props) => {
             title: intl.formatMessage({id: 'user_status.title', defaultMessage: 'Status'}),
             theme,
         });
-    }), [theme, bottom]);
+    }), [theme]);
 
     const updateStatus = useCallback((status: string) => {
         const userStatus = {
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 ca2840642..94cacb891 100644
--- a/app/screens/home/channel_list/categories_list/header/header.tsx
+++ b/app/screens/home/channel_list/categories_list/header/header.tsx
@@ -5,7 +5,6 @@ import React, {useCallback, useEffect} from 'react';
 import {useIntl} from 'react-intl';
 import {type Insets, Text, TouchableWithoutFeedback, View} from 'react-native';
 import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {logout} from '@actions/remote/session';
 import CompassIcon from '@components/compass_icon';
@@ -115,7 +114,6 @@ const ChannelListHeader = ({
     const theme = useTheme();
     const isTablet = useIsTablet();
     const intl = useIntl();
-    const {bottom} = useSafeAreaInsets();
     const serverDisplayName = useServerDisplayName();
     const marginLeft = useSharedValue(iconPad ? 50 : 0);
     const styles = getStyles(theme);
@@ -158,11 +156,11 @@ const ChannelListHeader = ({
         bottomSheet({
             closeButtonId,
             renderContent,
-            snapPoints: [1, bottomSheetSnapPoint(items, ITEM_HEIGHT, bottom) + (separators * SEPARATOR_HEIGHT)],
+            snapPoints: [1, bottomSheetSnapPoint(items, ITEM_HEIGHT) + (separators * SEPARATOR_HEIGHT)],
             theme,
             title: intl.formatMessage({id: 'home.header.plus_menu', defaultMessage: 'Options'}),
         });
-    }), [intl, bottom, isTablet, theme]);
+    }), [intl, 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 c07711772..eb30c5f78 100644
--- a/app/screens/home/channel_list/servers/index.tsx
+++ b/app/screens/home/channel_list/servers/index.tsx
@@ -4,7 +4,6 @@
 import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
 import {Dimensions, StyleSheet} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import ServerIcon from '@components/server_icon';
 import {useServerUrl} from '@context/server';
@@ -49,7 +48,6 @@ const Servers = React.forwardRef<ServersRef>((_, ref) => {
     const registeredServers = useRef<ServersModel[]|undefined>();
     const currentServerUrl = useServerUrl();
     const isTablet = useIsTablet();
-    const {bottom} = useSafeAreaInsets();
     const theme = useTheme();
 
     const updateTotal = () => {
@@ -119,7 +117,7 @@ const Servers = React.forwardRef<ServersRef>((_, ref) => {
             const maxScreenHeight = Math.ceil(0.6 * Dimensions.get('window').height);
             const maxSnapPoint = Math.min(
                 maxScreenHeight,
-                bottomSheetSnapPoint(registeredServers.current.length, SERVER_ITEM_HEIGHT, bottom) + TITLE_HEIGHT + BUTTON_HEIGHT +
+                bottomSheetSnapPoint(registeredServers.current.length, SERVER_ITEM_HEIGHT) + TITLE_HEIGHT + BUTTON_HEIGHT +
                     (registeredServers.current.filter((s: ServersModel) => s.lastActiveAt).length * PUSH_ALERT_TEXT_HEIGHT),
             );
 
@@ -141,7 +139,7 @@ const Servers = React.forwardRef<ServersRef>((_, ref) => {
                 title: intl.formatMessage({id: 'your.servers', defaultMessage: 'Your servers'}),
             });
         }
-    }, [bottom, isTablet, theme]);
+    }, [intl, isTablet, theme]);
 
     useImperativeHandle(ref, () => ({
         openServers: onPress,
diff --git a/app/screens/home/search/results/header.tsx b/app/screens/home/search/results/header.tsx
index 35f1fad35..e989ecd38 100644
--- a/app/screens/home/search/results/header.tsx
+++ b/app/screens/home/search/results/header.tsx
@@ -3,7 +3,6 @@
 import React, {useCallback, useMemo} from 'react';
 import {useIntl} from 'react-intl';
 import {View} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import Badge from '@components/badge';
 import CompassIcon from '@components/compass_icon';
@@ -70,7 +69,6 @@ const Header = ({
     const theme = useTheme();
     const styles = getStyleFromTheme(theme);
     const intl = useIntl();
-    const {bottom} = useSafeAreaInsets();
     const isTablet = useIsTablet();
 
     const messagesText = intl.formatMessage({id: 'screen.search.header.messages', defaultMessage: 'Messages'});
@@ -94,10 +92,9 @@ const Header = ({
             bottomSheetSnapPoint(
                 NUMBER_FILTER_ITEMS,
                 FILTER_ITEM_HEIGHT,
-                bottom,
             ) + TITLE_HEIGHT + DIVIDERS_HEIGHT + (isTablet ? TITLE_SEPARATOR_MARGIN_TABLET : TITLE_SEPARATOR_MARGIN),
         ];
-    }, []);
+    }, [isTablet]);
 
     const handleFilterPress = useCallback(() => {
         const renderContent = () => {
diff --git a/app/screens/home/search/team_picker_icon.tsx b/app/screens/home/search/team_picker_icon.tsx
index 5d535eef5..954e90436 100644
--- a/app/screens/home/search/team_picker_icon.tsx
+++ b/app/screens/home/search/team_picker_icon.tsx
@@ -4,7 +4,6 @@
 import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
 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';
@@ -57,7 +56,6 @@ const TeamPickerIcon = ({size = 24, divider = false, setTeamId, teams, teamId}:
     const intl = useIntl();
     const theme = useTheme();
     const styles = getStyleFromTheme(theme);
-    const {bottom} = useSafeAreaInsets();
 
     const selectedTeam = teams.find((t) => t.id === teamId);
 
@@ -77,7 +75,7 @@ const TeamPickerIcon = ({size = 24, divider = false, setTeamId, teams, teamId}:
 
         const snapPoints: Array<string | number> = [
             1,
-            teams.length ? (bottomSheetSnapPoint(Math.min(3, teams.length), ITEM_HEIGHT, bottom) + TITLE_HEIGHT) : NO_TEAMS_HEIGHT,
+            teams.length ? bottomSheetSnapPoint(Math.min(3, teams.length), ITEM_HEIGHT) + (2 * TITLE_HEIGHT) : NO_TEAMS_HEIGHT,
         ];
 
         if (teams.length > 3) {
@@ -91,7 +89,7 @@ const TeamPickerIcon = ({size = 24, divider = false, setTeamId, teams, teamId}:
             theme,
             title,
         });
-    }), [theme, setTeamId, teamId, teams, bottom]);
+    }), [theme, setTeamId, teamId, teams]);
 
     return (
         <>
diff --git a/app/screens/manage_channel_members/manage_channel_members.tsx b/app/screens/manage_channel_members/manage_channel_members.tsx
index 610fa0335..396c45408 100644
--- a/app/screens/manage_channel_members/manage_channel_members.tsx
+++ b/app/screens/manage_channel_members/manage_channel_members.tsx
@@ -130,7 +130,7 @@ export default function ManageChannelMembers({
 
         Keyboard.dismiss();
         openAsBottomSheet({screen: USER_PROFILE, title, theme, closeButtonId: CLOSE_BUTTON_ID, props});
-    }, [canManageAndRemoveMembers, channelId, isManageMode, currentUserId]);
+    }, [currentUserId, isManageMode, formatMessage, channelId, canManageAndRemoveMembers, theme, serverUrl]);
 
     const searchUsers = useCallback(async (searchTerm: string) => {
         setSearchedTerm(searchTerm);
diff --git a/app/screens/post_options/post_options.tsx b/app/screens/post_options/post_options.tsx
index c850809cf..d33ef6a26 100644
--- a/app/screens/post_options/post_options.tsx
+++ b/app/screens/post_options/post_options.tsx
@@ -5,7 +5,6 @@ import {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';
@@ -55,7 +54,6 @@ 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]);
 
@@ -82,7 +80,7 @@ const PostOptions = ({
             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));
+        items.push(bottomSheetSnapPoint(optionsCount, ITEM_HEIGHT) + (canAddReaction ? REACTION_PICKER_HEIGHT + REACTION_PICKER_MARGIN : 0));
 
         if (shouldShowBindings) {
             items.push('80%');
@@ -92,7 +90,7 @@ const PostOptions = ({
     }, [
         canAddReaction, canCopyPermalink, canCopyText,
         canDelete, canEdit, shouldRenderFollow, shouldShowBindings,
-        canMarkAsUnread, canPin, canReply, isSystemPost, bottom,
+        canMarkAsUnread, canPin, canReply, isSystemPost,
     ]);
 
     const renderContent = () => {
diff --git a/app/screens/post_options/reaction_bar/reaction_bar.tsx b/app/screens/post_options/reaction_bar/reaction_bar.tsx
index 14874b707..d1bd54f79 100644
--- a/app/screens/post_options/reaction_bar/reaction_bar.tsx
+++ b/app/screens/post_options/reaction_bar/reaction_bar.tsx
@@ -69,7 +69,7 @@ const ReactionBar = ({bottomSheetId, recentEmojis = [], postId}: QuickReactionPr
             title: intl.formatMessage({id: 'mobile.post_info.add_reaction', defaultMessage: 'Add Reaction'}),
             props: {onEmojiPress: handleEmojiPress},
         });
-    }, [handleEmojiPress, intl, theme]);
+    }, [bottomSheetId, handleEmojiPress, intl, theme]);
 
     let containerSize = LARGE_CONTAINER_SIZE;
     let iconSize = LARGE_ICON_SIZE;
diff --git a/app/screens/post_priority_picker/footer.tsx b/app/screens/post_priority_picker/footer.tsx
index 512ce30f5..e660191ff 100644
--- a/app/screens/post_priority_picker/footer.tsx
+++ b/app/screens/post_priority_picker/footer.tsx
@@ -19,7 +19,7 @@ export type Props = BottomSheetFooterProps & {
 const TEXT_HEIGHT = 24; // typography 200 line height
 const BUTTON_PADDING = 15;
 const FOOTER_PADDING = 20;
-const FOOTER_PADDING_BOTTOM_TABLET_ADJUST = 12;
+const FOOTER_PADDING_BOTTOM_TABLET_ADJUST = 20;
 export const FOOTER_HEIGHT = (FOOTER_PADDING * 2) + (BUTTON_PADDING * 2) + TEXT_HEIGHT;
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
@@ -64,7 +64,7 @@ const PostPriorityPickerFooter = ({onCancel, onSubmit, ...props}: Props) => {
     const footer = (
         <View
             style={[style.container, {
-                paddingBottom: FOOTER_PADDING + Platform.select({ios: (isTablet ? FOOTER_PADDING_BOTTOM_TABLET_ADJUST : 0), default: 0}),
+                paddingBottom: Platform.select({ios: (isTablet ? FOOTER_PADDING_BOTTOM_TABLET_ADJUST : 0), default: FOOTER_PADDING}),
             }]}
         >
             <TouchableOpacity
diff --git a/app/screens/post_priority_picker/post_priority_picker.tsx b/app/screens/post_priority_picker/post_priority_picker.tsx
index 65e197938..5d625daac 100644
--- a/app/screens/post_priority_picker/post_priority_picker.tsx
+++ b/app/screens/post_priority_picker/post_priority_picker.tsx
@@ -3,8 +3,7 @@
 
 import React, {useCallback, useMemo, useState} from 'react';
 import {useIntl} from 'react-intl';
-import {View} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {Platform, View} from 'react-native';
 
 import FormattedText from '@components/formatted_text';
 import {getItemHeightWithDescription} from '@components/option_item';
@@ -89,7 +88,6 @@ const PostPriorityPicker = ({
     updatePostPriority,
     closeButtonId,
 }: Props) => {
-    const {bottom} = useSafeAreaInsets();
     const intl = useIntl();
     const isTablet = useIsTablet();
     const theme = useTheme();
@@ -108,8 +106,8 @@ const PostPriorityPicker = ({
 
     const snapPoints = useMemo(() => {
         const paddingBottom = 10;
-        const bottomSheetAdjust = 5;
-        let COMPONENT_HEIGHT = TITLE_HEIGHT + OPTIONS_PADDING + FOOTER_HEIGHT + bottomSheetSnapPoint(3, ITEM_HEIGHT, bottom) + paddingBottom + bottomSheetAdjust;
+        const bottomSheetAdjust = Platform.select({ios: 5, default: 20});
+        let COMPONENT_HEIGHT = TITLE_HEIGHT + OPTIONS_PADDING + FOOTER_HEIGHT + bottomSheetSnapPoint(3, ITEM_HEIGHT) + paddingBottom + bottomSheetAdjust;
 
         if (isPostAcknowledgementEnabled) {
             COMPONENT_HEIGHT += OPTIONS_SEPARATOR_HEIGHT + TOGGLE_OPTION_MARGIN_TOP + getItemHeightWithDescription(2);
@@ -119,7 +117,7 @@ const PostPriorityPicker = ({
         }
 
         return [1, COMPONENT_HEIGHT];
-    }, [displayPersistentNotifications, isPostAcknowledgementEnabled, bottom]);
+    }, [displayPersistentNotifications, isPostAcknowledgementEnabled]);
 
     const handleUpdatePriority = useCallback((priority: PostPriority['priority']) => {
         setData((prevData) => ({
@@ -131,16 +129,16 @@ const PostPriorityPicker = ({
 
     const handleUpdateRequestedAck = useCallback((requested_ack: boolean) => {
         setData((prevData) => ({...prevData, requested_ack}));
-    }, [data]);
+    }, []);
 
     const handleUpdatePersistentNotifications = useCallback((persistent_notifications: boolean) => {
         setData((prevData) => ({...prevData, persistent_notifications}));
-    }, [data]);
+    }, []);
 
     const handleSubmit = useCallback(() => {
         updatePostPriority(data);
         closeBottomSheet();
-    }, [data]);
+    }, [closeBottomSheet, data, updatePostPriority]);
 
     const renderContent = () => (
         <View style={style.container}>
diff --git a/app/screens/thread_options/thread_options.tsx b/app/screens/thread_options/thread_options.tsx
index cdcbd4ec2..9fb0cecd4 100644
--- a/app/screens/thread_options/thread_options.tsx
+++ b/app/screens/thread_options/thread_options.tsx
@@ -4,7 +4,6 @@
 import {useManagedConfig} from '@mattermost/react-native-emm';
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {CopyPermalinkOption, FollowThreadOption, ReplyOption, SaveOption} from '@components/common_post_options';
 import FormattedText from '@components/formatted_text';
@@ -59,7 +58,6 @@ const ThreadOptions = ({
 }: ThreadOptionsProps) => {
     const theme = useTheme();
     const isTablet = useIsTablet();
-    const {bottom} = useSafeAreaInsets();
     const style = getStyleSheet(theme);
 
     const close = () => {
@@ -111,7 +109,7 @@ const ThreadOptions = ({
         );
     }
 
-    const snapPoint = useMemo(() => TITLE_HEIGHT + bottomSheetSnapPoint(options.length, ITEM_HEIGHT, bottom), [bottom, options.length]);
+    const snapPoint = useMemo(() => TITLE_HEIGHT + bottomSheetSnapPoint(options.length, ITEM_HEIGHT), [options.length]);
 
     const renderContent = () => (
         <>
diff --git a/app/screens/user_profile/user_profile.tsx b/app/screens/user_profile/user_profile.tsx
index 3a68a4b27..a8ca2d1ae 100644
--- a/app/screens/user_profile/user_profile.tsx
+++ b/app/screens/user_profile/user_profile.tsx
@@ -89,10 +89,10 @@ const UserProfile = ({
 }: Props) => {
     const {formatMessage, locale} = useIntl();
     const serverUrl = useServerUrl();
-    const {bottom} = useSafeAreaInsets();
     const channelContext = channelContextScreens.includes(location);
     const showOptions: OptionsType = channelContext && !user.isBot ? 'all' : 'message';
     const override = Boolean(userIconOverride || usernameOverride);
+    const {bottom} = useSafeAreaInsets();
     const timezone = getUserTimezone(user);
     const customStatus = getUserCustomStatus(user);
     let localTime: string|undefined;
@@ -145,15 +145,17 @@ const UserProfile = ({
             }
         }
 
-        const extraHeight = manageMode ? 0 : EXTRA_HEIGHT;
+        const extraHeight = manageMode ? 0 : (EXTRA_HEIGHT - bottom);
 
         return [
             1,
-            bottomSheetSnapPoint(optionsCount, LABEL_HEIGHT, bottom) + title + extraHeight,
+            bottomSheetSnapPoint(optionsCount, LABEL_HEIGHT) + title + extraHeight,
         ];
     }, [
-        showUserProfileOptions, showCustomStatus, showNickname,
-        showPosition, showLocalTime, bottom,
+        headerText, showUserProfileOptions, showCustomStatus,
+        showNickname, showPosition, showLocalTime,
+        manageMode, bottom, showOptions,
+        canChangeMemberRoles, canManageAndRemoveMembers,
     ]);
 
     useEffect(() => {
diff --git a/app/utils/helpers.test.ts b/app/utils/helpers.test.ts
index fbea00872..8041deff8 100644
--- a/app/utils/helpers.test.ts
+++ b/app/utils/helpers.test.ts
@@ -197,9 +197,8 @@ describe('Helpers', () => {
         test('should calculate bottom sheet snap point', () => {
             const itemsCount = 5;
             const itemHeight = 50;
-            const bottomInset = 20;
-            const result = bottomSheetSnapPoint(itemsCount, itemHeight, bottomInset);
-            const expected = (itemsCount * itemHeight) + bottomInset + STATUS_BAR_HEIGHT;
+            const result = bottomSheetSnapPoint(itemsCount, itemHeight);
+            const expected = (itemsCount * itemHeight) + STATUS_BAR_HEIGHT;
             expect(result).toBe(expected);
         });
     });
diff --git a/app/utils/helpers.ts b/app/utils/helpers.ts
index f654063aa..1555f0a77 100644
--- a/app/utils/helpers.ts
+++ b/app/utils/helpers.ts
@@ -140,9 +140,8 @@ export 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: number) {
-    const bottom = Platform.select({ios: bottomInset, default: 0}) + STATUS_BAR_HEIGHT;
-    return (itemsCount * itemHeight) + bottom;
+export function bottomSheetSnapPoint(itemsCount: number, itemHeight: number) {
+    return (itemsCount * itemHeight) + STATUS_BAR_HEIGHT;
 }
 
 export function hasTrailingSpaces(term: string) {
diff --git a/patches/@gorhom+bottom-sheet+4.6.4.patch b/patches/@gorhom+bottom-sheet+4.6.4.patch
new file mode 100644
index 000000000..1a276350d
--- /dev/null
+++ b/patches/@gorhom+bottom-sheet+4.6.4.patch
@@ -0,0 +1,17 @@
+diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/BottomSheetContainer.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/BottomSheetContainer.tsx
+index 72fe2cb..abac348 100644
+--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/BottomSheetContainer.tsx
++++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/BottomSheetContainer.tsx
+@@ -30,10 +30,10 @@ function BottomSheetContainerComponent({
+       {
+         top: topInset,
+         bottom: bottomInset,
+-        overflow: detached ? 'visible' : 'hidden',
++        overflow: 'visible',
+       },
+     ],
+-    [style, detached, topInset, bottomInset]
++    [style, topInset, bottomInset]
+   );
+   //#endregion
+