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

* set layout height in `onLayout` * keep setting it in `onScroll` too
bluesky-social · May 21, 2024 · a7c2370 · a7c2370
1 parent cadc33c
commit a7c2370
Showing 1 changed file with 22 additions and 12 deletions.
diff --git 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} />
           </>
         )}