From 597ec73f4c774a2fbc02ad7d52159e4413cf5122 Mon Sep 17 00:00:00 2001 From: adids1221 Date: Sun, 24 Aug 2025 14:15:12 +0300 Subject: [PATCH 1/2] useKeyboardHeight hook init --- src/hooks/index.ts | 1 + src/hooks/useKeyboardHeight/index.ts | 30 ++++++++++++++++++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 src/hooks/useKeyboardHeight/index.ts diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 29a8b5f1ca..1209e16ee5 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -10,4 +10,5 @@ export {default as useScrollToItem} from './useScrollToItem'; export {default as useScrollTo} from './useScrollTo'; export {default as useThemeProps} from './useThemeProps'; export {default as useDebounce} from './useDebounce'; +export {default as useKeyboardHeight} from './useKeyboardHeight'; export * from './useScrollTo'; diff --git a/src/hooks/useKeyboardHeight/index.ts b/src/hooks/useKeyboardHeight/index.ts new file mode 100644 index 0000000000..8188c4af2a --- /dev/null +++ b/src/hooks/useKeyboardHeight/index.ts @@ -0,0 +1,30 @@ +import {useEffect, useRef, useState} from 'react'; +import {Keyboard, KeyboardEvent} from 'react-native'; + +/** + * Hook that tracks keyboard height and provides real-time updates + */ +const useKeyboardHeight = (): number => { + const keyboardDidHideListener = useRef(); + const keyboardDidShowListener = useRef(); + const [keyboardHeight, setKeyboardHeight] = useState(0); + + useEffect(() => { + keyboardDidHideListener.current = Keyboard.addListener('keyboardDidHide', () => { + setKeyboardHeight(0); + }); + + keyboardDidShowListener.current = Keyboard.addListener('keyboardDidShow', (e: KeyboardEvent) => { + setKeyboardHeight(e.endCoordinates.height); + }); + + return () => { + keyboardDidHideListener.current?.remove(); + keyboardDidShowListener.current?.remove(); + }; + }, []); + + return keyboardHeight; +}; + +export default useKeyboardHeight; From 6e57a58f1bc633a85e67e57b8ea0be2eb939656d Mon Sep 17 00:00:00 2001 From: adids1221 Date: Sun, 24 Aug 2025 14:23:14 +0300 Subject: [PATCH 2/2] Refactor useKeyboardHeight hook removing useRef and directly using Keyboard.addListener. --- src/hooks/useKeyboardHeight/index.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/hooks/useKeyboardHeight/index.ts b/src/hooks/useKeyboardHeight/index.ts index 8188c4af2a..c69c30fe9c 100644 --- a/src/hooks/useKeyboardHeight/index.ts +++ b/src/hooks/useKeyboardHeight/index.ts @@ -1,26 +1,24 @@ -import {useEffect, useRef, useState} from 'react'; +import {useEffect, useState} from 'react'; import {Keyboard, KeyboardEvent} from 'react-native'; /** * Hook that tracks keyboard height and provides real-time updates */ const useKeyboardHeight = (): number => { - const keyboardDidHideListener = useRef(); - const keyboardDidShowListener = useRef(); const [keyboardHeight, setKeyboardHeight] = useState(0); useEffect(() => { - keyboardDidHideListener.current = Keyboard.addListener('keyboardDidHide', () => { + const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => { setKeyboardHeight(0); }); - keyboardDidShowListener.current = Keyboard.addListener('keyboardDidShow', (e: KeyboardEvent) => { + const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', (e: KeyboardEvent) => { setKeyboardHeight(e.endCoordinates.height); }); return () => { - keyboardDidHideListener.current?.remove(); - keyboardDidShowListener.current?.remove(); + keyboardDidHideListener.remove(); + keyboardDidShowListener.remove(); }; }, []);