fix: keyboard handler memoization (#6719)

* fix: keyboard handler memoization

* fix: return missing dependency

1 files changed, 25 insertions, 22 deletions

diff --git a/src/screens/Messages/components/MessagesList.tsx b/src/screens/Messages/components/MessagesList.tsx
index 9f67929a3..067abb27e 100644
--- a/src/screens/Messages/components/MessagesList.tsx
+++ b/src/screens/Messages/components/MessagesList.tsx
@@ -250,30 +250,33 @@ export function MessagesList({
   // We use this value to keep track of when we want to disable the animation.
   const layoutScrollWithoutAnimation = useSharedValue(false)
 
-  useKeyboardHandler({
-    onStart: e => {
-      'worklet'
-      // 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.set(true)
+  useKeyboardHandler(
+    {
+      onStart: e => {
+        'worklet'
+        // 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.set(true)
+          keyboardHeight.set(e.height)
+        } else {
+          keyboardIsOpening.set(true)
+        }
+      },
+      onMove: e => {
+        'worklet'
         keyboardHeight.set(e.height)
-      } else {
-        keyboardIsOpening.set(true)
-      }
-    },
-    onMove: e => {
-      'worklet'
-      keyboardHeight.set(e.height)
-      if (e.height > bottomOffset) {
-        scrollTo(flatListRef, 0, 1e7, false)
-      }
-    },
-    onEnd: () => {
-      'worklet'
-      keyboardIsOpening.set(false)
+        if (e.height > bottomOffset) {
+          scrollTo(flatListRef, 0, 1e7, false)
+        }
+      },
+      onEnd: () => {
+        'worklet'
+        keyboardIsOpening.set(false)
+      },
     },
-  })
+    [bottomOffset],
+  )
 
   const animatedListStyle = useAnimatedStyle(() => ({
     marginBottom: