[PAY-1333] Mobile dms end of history only shows with >10 messages (#3515

)
AudiusProject · Jun 6, 2023 · 3a3b206 · 3a3b206
1 parent f1f5dc0
commit 3a3b206
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/packages/mobile/src/screens/chat-screen/ChatScreen.tsx b/packages/mobile/src/screens/chat-screen/ChatScreen.tsx
@@ -16,7 +16,7 @@ import {
   useCanSendMessage
 } from '@audius/common'
 import { Portal } from '@gorhom/portal'
-import type { FlatListProps } from 'react-native'
+import type { FlatListProps, LayoutChangeEvent } from 'react-native'
 import {
   FlatList,
   Keyboard,
@@ -56,7 +56,7 @@ import { ChatUnavailable } from './ChatUnavailable'
 import { EmptyChatMessages } from './EmptyChatMessages'
 import { HeaderShadow } from './HeaderShadow'
 import { ReactionPopup } from './ReactionPopup'
-import { END_REACHED_OFFSET } from './constants'
+import { END_REACHED_MIN_MESSAGES } from './constants'
 
 type ChatFlatListProps = FlatListProps<ChatMessageWithExtras>
 type ChatListEventHandler<K extends keyof ChatFlatListProps> = NonNullable<
@@ -104,8 +104,7 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
   },
   listContentContainer: {
     paddingHorizontal: spacing(6),
-    display: 'flex',
-    minHeight: '100%'
+    display: 'flex'
   },
   profileTitle: {
     display: 'flex',
@@ -231,15 +230,12 @@ export const ChatScreen = () => {
   const isLoading =
     (chat?.messagesStatus ?? Status.LOADING) === Status.LOADING &&
     chatMessages?.length === 0
-  // Only show the end reached indicator if there are no previous messages and
-  // flatlist is scrollable. Add an offset to the screen height because flatListInnerHeight
-  // starts at screen height due to height: 100% css property.
+  // Only show the end reached indicator if there are no previous messages, more than 10 messages,
+  // and the flatlist is scrollable.
   const shouldShowEndReachedIndicator =
     !(chat?.messagesSummary?.prev_count ?? true) &&
-    flatListInnerHeight.current - chatContainerTop.current >
-      chatContainerBottom.current -
-        chatContainerTop.current +
-        END_REACHED_OFFSET
+    chatMessages.length > END_REACHED_MIN_MESSAGES &&
+    flatListInnerHeight.current > chatContainerBottom.current
   const popupMessageId = useSelector(getReactionsPopupMessageId)
   const popupMessage = useSelector((state) =>
     getChatMessageById(state, chatId ?? '', popupMessageId ?? '')
@@ -479,6 +475,10 @@ export const ChatScreen = () => {
     []
   )
 
+  const handleFlatListLayout = useCallback((event: LayoutChangeEvent) => {
+    flatListInnerHeight.current = event.nativeEvent.layout.height
+  }, [])
+
   return (
     <Screen
       url={url}
@@ -553,6 +553,7 @@ export const ChatScreen = () => {
             ) : (
               <View style={styles.listContainer}>
                 <FlatList
+                  onLayout={handleFlatListLayout}
                   contentContainerStyle={styles.listContentContainer}
                   data={chatMessages}
                   keyExtractor={(message) => message.message_id}

diff --git a/packages/mobile/src/screens/chat-screen/constants.ts b/packages/mobile/src/screens/chat-screen/constants.ts
@@ -4,4 +4,4 @@ export const REACTION_CONTAINER_TOP_OFFSET = 20
 export const BACKGROUND_OPACITY = 0.3
 export const MOUNT_ANIMATION_DURATION_MS = 100
 export const UNMOUNT_ANIMATION_DURATION_MS = 100
-export const END_REACHED_OFFSET = 100
+export const END_REACHED_MIN_MESSAGES = 10