BottomSheet migration to react-native-bottom-sheet (mattermost#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
jguzdv · Jan 5, 2023 · dbe5653 · dbe5653
1 parent e9b8160
commit dbe5653
Show file tree

Hide file tree

Showing 47 changed files with 545 additions and 397 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -19,6 +19,8 @@ type Props = {
     onSubmit: (data: PostPriorityData) => void;
 };
 
+export const COMPONENT_HEIGHT = 200;
+
 const getStyle = makeStyleSheetFromTheme((theme: Theme) => ({
     container: {
         backgroundColor: theme.centerChannelBg,