From faea36dc9dfd5bdba07d60284ac970bed3e1b9f2 Mon Sep 17 00:00:00 2001
From: Jakub Grzywacz <kontakt@jakubgrzywacz.pl>
Date: Tue, 2 May 2023 18:26:47 +0200
Subject: [PATCH] fix: prevent running onKeyboardWillShow when picker is closed
 (#132)

---
 src/EmojiPicker.tsx      |  2 +-
 src/hooks/useKeyboard.ts | 26 +++++++++++++++-----------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/EmojiPicker.tsx b/src/EmojiPicker.tsx
index 7ae977a4..22034c5b 100644
--- a/src/EmojiPicker.tsx
+++ b/src/EmojiPicker.tsx
@@ -24,7 +24,7 @@ export const EmojiPicker = ({
   const offsetY = React.useRef(new Animated.Value(0)).current
   const height = React.useRef(new Animated.Value(getHeight(defaultHeight, screenHeight))).current
   const additionalHeight = React.useRef(new Animated.Value(0)).current
-  const { keyboardVisible, keyboardHeight } = useKeyboard()
+  const { keyboardVisible, keyboardHeight } = useKeyboard(open)
   const [isExpanded, setIsExpanded] = React.useState(false)
 
   React.useEffect(() => {
diff --git a/src/hooks/useKeyboard.ts b/src/hooks/useKeyboard.ts
index 66587f0e..2f0e9340 100644
--- a/src/hooks/useKeyboard.ts
+++ b/src/hooks/useKeyboard.ts
@@ -1,28 +1,32 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Keyboard, KeyboardEvent } from 'react-native'
 
-export const useKeyboard = () => {
+export const useKeyboard = (isOpen: boolean) => {
   const [keyboardVisible, setKeyboardVisible] = useState(false)
   const [keyboardHeight, setKeyboardHeight] = useState(0)
 
-  function onKeyboardDidShow(e: KeyboardEvent) {
-    setKeyboardHeight(e.endCoordinates.height)
-    setKeyboardVisible(true)
-  }
+  const onKeyboardWillShow = useCallback(
+    (e: KeyboardEvent) => {
+      if (!isOpen) return
+      setKeyboardHeight(e.endCoordinates.height)
+      setKeyboardVisible(true)
+    },
+    [isOpen]
+  )
 
-  function onKeyboardDidHide() {
+  const onKeyboardWillHide = useCallback(() => {
     setKeyboardHeight(0)
     setKeyboardVisible(false)
-  }
+  }, [])
 
   useEffect(() => {
-    const showSubscription = Keyboard.addListener('keyboardWillShow', onKeyboardDidShow)
-    const hideSubscription = Keyboard.addListener('keyboardWillHide', onKeyboardDidHide)
+    const showSubscription = Keyboard.addListener('keyboardWillShow', onKeyboardWillShow)
+    const hideSubscription = Keyboard.addListener('keyboardWillHide', onKeyboardWillHide)
     return () => {
       showSubscription.remove()
       hideSubscription.remove()
     }
-  }, [])
+  }, [onKeyboardWillHide, onKeyboardWillShow])
 
   return { keyboardVisible, keyboardHeight }
 }