From 994af1454f668af8ae051d1bd8395e626f6f19e8 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Mon, 20 May 2024 12:53:15 -0700
Subject: [PATCH] =?UTF-8?q?[=F0=9F=90=B4]=20Adjust=20content=20height=20wh?=
 =?UTF-8?q?enever=20the=20emoji=20picker=20keyboard=20is=20opened=20or=20c?=
 =?UTF-8?q?losed=20(#4120)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* properly resize whenever the emoji keyboard is opened

* properly resize whenever the emoji keyboard is opened
---
 .../Messages/Conversation/MessagesList.tsx    | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx
index 68e68b8cb5..cbe037fecd 100644
--- a/src/screens/Messages/Conversation/MessagesList.tsx
+++ b/src/screens/Messages/Conversation/MessagesList.tsx
@@ -226,10 +226,21 @@ export function MessagesList({
   const keyboardHeight = useSharedValue(0)
   const keyboardIsOpening = useSharedValue(false)
 
+  // In some cases - like when the emoji piker opens - we don't want to animate the scroll in the list onLayout event.
+  // We use this value to keep track of when we want to disable the animation.
+  const layoutScrollWithoutAnimation = useSharedValue(false)
+
   useKeyboardHandler({
-    onStart: () => {
+    onStart: e => {
       'worklet'
-      keyboardIsOpening.value = true
+      // Immediate updates - like opening the emoji picker - will have a duration of zero. In those cases, we should
+      // just update the height here instead of having the `onMove` event do it (that event will not fire!)
+      if (e.duration === 0) {
+        layoutScrollWithoutAnimation.value = true
+        keyboardHeight.value = e.height
+      } else {
+        keyboardIsOpening.value = true
+      }
     },
     onMove: e => {
       'worklet'
@@ -277,11 +288,13 @@ export function MessagesList({
 
   // -- List layout changes (opening emoji keyboard, etc.)
   const onListLayout = React.useCallback(() => {
-    if (keyboardIsOpening.value) return
     if (isWeb || !keyboardIsOpening.value) {
-      flatListRef.current?.scrollToEnd({animated: true})
+      flatListRef.current?.scrollToEnd({
+        animated: !layoutScrollWithoutAnimation.value,
+      })
+      layoutScrollWithoutAnimation.value = false
     }
-  }, [flatListRef, keyboardIsOpening.value])
+  }, [flatListRef, keyboardIsOpening.value, layoutScrollWithoutAnimation])
 
   const scrollToEndOnPress = React.useCallback(() => {
     flatListRef.current?.scrollToOffset({