[🐴] set layout height in `onLayout` (#4135)

* set layout height in `onLayout`

* keep setting it in `onScroll` too

1 files changed, 22 insertions, 12 deletions

diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx
index 167cc72bd..ce466d95e 100644
--- a/src/screens/Messages/Conversation/MessagesList.tsx
+++ b/src/screens/Messages/Conversation/MessagesList.tsx
@@ -1,5 +1,5 @@
 import React, {useCallback, useRef} from 'react'
-import {FlatList, View} from 'react-native'
+import {FlatList, LayoutChangeEvent, View} from 'react-native'
 import {
   KeyboardStickyView,
   useKeyboardHandler,
@@ -292,14 +292,24 @@ export function MessagesList({
   )
 
   // -- List layout changes (opening emoji keyboard, etc.)
-  const onListLayout = React.useCallback(() => {
-    if (isWeb || !keyboardIsOpening.value) {
-      flatListRef.current?.scrollToEnd({
-        animated: !layoutScrollWithoutAnimation.value,
-      })
-      layoutScrollWithoutAnimation.value = false
-    }
-  }, [flatListRef, keyboardIsOpening.value, layoutScrollWithoutAnimation])
+  const onListLayout = React.useCallback(
+    (e: LayoutChangeEvent) => {
+      layoutHeight.value = e.nativeEvent.layout.height
+
+      if (isWeb || !keyboardIsOpening.value) {
+        flatListRef.current?.scrollToEnd({
+          animated: !layoutScrollWithoutAnimation.value,
+        })
+        layoutScrollWithoutAnimation.value = false
+      }
+    },
+    [
+      flatListRef,
+      keyboardIsOpening.value,
+      layoutScrollWithoutAnimation,
+      layoutHeight,
+    ],
+  )
 
   const scrollToEndOnPress = React.useCallback(() => {
     flatListRef.current?.scrollToOffset({
@@ -347,9 +357,9 @@ export function MessagesList({
           footer
         ) : (
           <>
-            {isConvoActive(convoState) && convoState.items.length === 0 && (
-              <ChatEmptyPill />
-            )}
+            {isConvoActive(convoState) &&
+              !convoState.isFetchingHistory &&
+              convoState.items.length === 0 && <ChatEmptyPill />}
             <MessageInput onSendMessage={onSendMessage} />
           </>
         )}