From 25ddc894f21aea3ce30a4baaf28d257bc7ace1ee Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Fri, 11 Nov 2022 20:47:25 +0200
Subject: [PATCH] Fix more messages bar on iOS without insets (#6752)

---
 .../post_list/more_messages/more_messages.tsx    | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/components/post_list/more_messages/more_messages.tsx b/app/components/post_list/more_messages/more_messages.tsx
index 20e4b7938..cd99bc1c2 100644
--- a/app/components/post_list/more_messages/more_messages.tsx
+++ b/app/components/post_list/more_messages/more_messages.tsx
@@ -2,8 +2,9 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {ActivityIndicator, DeviceEventEmitter, Platform, View, ViewToken} from 'react-native';
+import {ActivityIndicator, DeviceEventEmitter, View, ViewToken} from 'react-native';
 import Animated, {interpolate, useAnimatedStyle, useSharedValue, withSpring} from 'react-native-reanimated';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {resetMessageCount} from '@actions/local/channel';
 import CompassIcon from '@components/compass_icon';
@@ -36,7 +37,7 @@ type Props = {
 }
 
 const HIDDEN_TOP = -60;
-const SHOWN_TOP = Platform.select({ios: 50, default: 5});
+const SHOWN_TOP = 5;
 const MIN_INPUT = 0;
 const MAX_INPUT = 1;
 
@@ -112,6 +113,7 @@ const MoreMessages = ({
 }: Props) => {
     const serverUrl = useServerUrl();
     const isTablet = useIsTablet();
+    const insets = useSafeAreaInsets();
     const pressed = useRef(false);
     const resetting = useRef(false);
     const initialScroll = useRef(false);
@@ -120,9 +122,11 @@ const MoreMessages = ({
     const underlayColor = useMemo(() => `hsl(${hexToHue(theme.buttonBg)}, 50%, 38%)`, [theme]);
     const top = useSharedValue(0);
     const adjustedShownTop = SHOWN_TOP + (currentCallBarVisible ? CURRENT_CALL_BAR_HEIGHT : 0) + (joinCallBannerVisible ? JOIN_CALL_BAR_HEIGHT : 0);
-    const shownTop = isTablet || (isCRTEnabled && rootId) ? 5 : adjustedShownTop;
+    const adjustTop = isTablet || (isCRTEnabled && rootId);
+    const shownTop = adjustTop ? SHOWN_TOP : adjustedShownTop;
     const BARS_FACTOR = Math.abs((1) / (HIDDEN_TOP - SHOWN_TOP));
     const styles = getStyleSheet(theme);
+
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [{
             translateY: withSpring(interpolate(
@@ -136,13 +140,13 @@ const MoreMessages = ({
                 [
                     HIDDEN_TOP,
                     HIDDEN_TOP,
-                    shownTop,
-                    shownTop,
+                    shownTop + (adjustTop ? 0 : insets.top),
+                    shownTop + (adjustTop ? 0 : insets.top),
                 ],
                 Animated.Extrapolate.CLAMP,
             ), {damping: 15}),
         }],
-    }), [isTablet, shownTop]);
+    }), [shownTop, insets.top, adjustTop]);
 
     // Due to the implementation differences "unreadCount" gets updated for a channel on reset but not for a thread.
     // So we maintain a localUnreadCount to hide the indicator when the count is reset.