48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
|
|
import { useRef, useEffect } from 'react';
|
|
import { Animated, Keyboard, KeyboardEvent } from 'react-native';
|
|
|
|
/**
|
|
* This returns an animated height that the keyboard is poking up from the
|
|
* bottom of the screen. This can be used to position elements to "hug" the
|
|
* keyboard.
|
|
* Adapted from https://stackoverflow.com/a/65267045/3586761
|
|
*/
|
|
export const useKeyboardHeight = () => {
|
|
const keyboardHeight = useRef(new Animated.Value(0)).current;
|
|
const tabBarHeight = useBottomTabBarHeight();
|
|
|
|
useEffect(() => {
|
|
const keyboardWillShow = (e: KeyboardEvent) => {
|
|
Animated.timing(keyboardHeight, {
|
|
duration: e.duration,
|
|
toValue: tabBarHeight - e.endCoordinates.height,
|
|
useNativeDriver: true,
|
|
}).start();
|
|
};
|
|
|
|
const keyboardWillHide = (e: KeyboardEvent) => {
|
|
Animated.timing(keyboardHeight, {
|
|
duration: e.duration,
|
|
toValue: 0,
|
|
useNativeDriver: true,
|
|
}).start();
|
|
};
|
|
|
|
const keyboardWillShowSub = Keyboard.addListener(
|
|
'keyboardWillShow',
|
|
keyboardWillShow
|
|
);
|
|
const keyboardWillHideSub = Keyboard.addListener(
|
|
'keyboardWillHide',
|
|
keyboardWillHide
|
|
);
|
|
|
|
return () => {
|
|
keyboardWillHideSub.remove();
|
|
keyboardWillShowSub.remove();
|
|
};
|
|
}, [keyboardHeight, tabBarHeight]);
|
|
|
|
return keyboardHeight;
|
|
}; |