[Gekidou] bugs squash (#6184)

* MM-43605 Fix JumboEmoji cutoff on Android

* MM-43604 Fix More messages bar position

* MM-43532 Fix tap next to a single image to open trigger onPress

* MM-43606 Show backdrop when canceling the bottom sheet close

app/components/jumbo_emoji/index.tsx

@@ -43,6 +43,9 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
             fontSize: 50,
             lineHeight: 60,
         },
+        newLine: {
+            lineHeight: 60,
+        },
     };
 });
 
@@ -74,7 +77,7 @@ const JumboEmoji = ({baseTextStyle, isEdited, value}: JumboEmojiProps) => {
     };
 
     const renderNewLine = () => {
-        return <Text style={baseTextStyle}>{'\n'}</Text>;
+        return <Text style={[baseTextStyle, style.newLine]}>{'\n'}</Text>;
     };
 
     const renderEditedIndicator = ({context}: {context: string[]}) => {

app/components/post_list/more_messages/more_messages.tsx

@@ -11,6 +11,7 @@ import FormattedText from '@components/formatted_text';
 import TouchableWithFeedback from '@components/touchable_with_feedback';
 import {Events} from '@constants';
 import {useServerUrl} from '@context/server';
+import {useIsTablet} from '@hooks/device';
 import {makeStyleSheetFromTheme, hexToHue} from '@utils/theme';
 import {typography} from '@utils/typography';
 
@@ -30,7 +31,7 @@ type Props = {
 }
 
 const HIDDEN_TOP = -60;
-const SHOWN_TOP = Platform.select({ios: 40, default: 0});
+const SHOWN_TOP = Platform.select({ios: 50, default: 5});
 const MIN_INPUT = 0;
 const MAX_INPUT = 1;
 
@@ -101,6 +102,7 @@ const MoreMessages = ({
     theme,
 }: Props) => {
     const serverUrl = useServerUrl();
+    const isTablet = useIsTablet();
     const pressed = useRef(false);
     const resetting = useRef(false);
     const initialScroll = useRef(false);
@@ -108,6 +110,7 @@ const MoreMessages = ({
     const [remaining, setRemaining] = useState(0);
     const underlayColor = useMemo(() => `hsl(${hexToHue(theme.buttonBg)}, 50%, 38%)`, [theme]);
     const top = useSharedValue(0);
+    const shownTop = isTablet ? 5 : SHOWN_TOP;
     const BARS_FACTOR = Math.abs((1) / (HIDDEN_TOP - SHOWN_TOP));
     const styles = getStyleSheet(theme);
     const animatedStyle = useAnimatedStyle(() => ({
@@ -123,13 +126,13 @@ const MoreMessages = ({
                 [
                     HIDDEN_TOP,
                     HIDDEN_TOP,
-                    SHOWN_TOP,
-                    SHOWN_TOP,
+                    shownTop,
+                    shownTop,
                 ],
                 Animated.Extrapolate.CLAMP,
             ), {damping: 15}),
         }],
-    }), []);
+    }), [isTablet, shownTop]);
 
     const resetCount = async () => {
         if (resetting.current) {

app/components/post_list/post/body/files/files.tsx

@@ -100,7 +100,7 @@ const Files = ({canDownloadFiles, failed, filesInfo, isReplyPost, layoutWidth, l
     const renderItems = (items: FileInfo[], moreImagesCount = 0, includeGutter = false) => {
         const singleImage = isSingleImage();
         let nonVisibleImagesCount: number;
-        let container: StyleProp<ViewStyle> = styles.container;
+        let container: StyleProp<ViewStyle> = items.length > 1 ? styles.container : undefined;
         const containerWithGutter = [container, styles.gutter];
 
         return items.map((file, idx) => {

app/screens/bottom_sheet/index.tsx

@@ -150,6 +150,9 @@ const BottomSheet = ({closeButtonId, componentId, initialSnapIndex = 0, renderCo
                 onCloseStart={() => {
                     backdropOpacity.value = 0;
                 }}
+                onOpenEnd={() => {
+                    backdropOpacity.value = 1;
+                }}
                 enabledBottomInitialAnimation={false}
                 renderHeader={Indicator}
                 enabledContentTapInteraction={false}