Skip to content

Commit a71c5d2

Browse files
adids1221M-i-k-e-l
andcommitted
Infra/use keyboard height (#3796)
* useKeyboardHeight hook init * Refactor useKeyboardHeight hook removing useRef and directly using Keyboard.addListener. --------- Co-authored-by: Miki Leib <38354019+M-i-k-e-l@users.noreply.github.com>
1 parent fe6c0a1 commit a71c5d2

File tree

2 files changed

+29
-0
lines changed

2 files changed

+29
-0
lines changed

src/hooks/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@ export {default as useScrollToItem} from './useScrollToItem';
1010
export {default as useScrollTo} from './useScrollTo';
1111
export {default as useThemeProps} from './useThemeProps';
1212
export {default as useDebounce} from './useDebounce';
13+
export {default as useKeyboardHeight} from './useKeyboardHeight';
1314
export * from './useScrollTo';

src/hooks/useKeyboardHeight/index.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import {useEffect, useState} from 'react';
2+
import {Keyboard, KeyboardEvent} from 'react-native';
3+
4+
/**
5+
* Hook that tracks keyboard height and provides real-time updates
6+
*/
7+
const useKeyboardHeight = (): number => {
8+
const [keyboardHeight, setKeyboardHeight] = useState(0);
9+
10+
useEffect(() => {
11+
const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
12+
setKeyboardHeight(0);
13+
});
14+
15+
const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', (e: KeyboardEvent) => {
16+
setKeyboardHeight(e.endCoordinates.height);
17+
});
18+
19+
return () => {
20+
keyboardDidHideListener.remove();
21+
keyboardDidShowListener.remove();
22+
};
23+
}, []);
24+
25+
return keyboardHeight;
26+
};
27+
28+
export default useKeyboardHeight;

0 commit comments

Comments
 (0)