Files
spacedrive/apps/mobile/src/hooks/useKeyboard.ts
Utku 62f2c77a52 [MOB-1] Theme support for Mobile (#755)
* revert rspc changes and some theme stuff

* Run onboarding test first

* test adding a tag

* handle keyboard on Create Tag Modal

* listen system theme changes

* fix delete tag button

* wait add tag mutation

* remove duplicate assert

* fix edit location setting screen

* select theme & fix add tag test

* add how to run web app to contributing

* add note about how to use stores correctly

* use theme colors

* system theme

* remove metro-minify-terser

* final tweaks

* cleanup

* cleanup

---------

Co-authored-by: Oscar Beaumont <oscar@otbeaumont.me>
2023-05-04 08:10:31 +00:00

63 lines
1.7 KiB
TypeScript

import { useEffect, useState } from 'react';
import { Keyboard, KeyboardEventListener, KeyboardMetrics } from 'react-native';
const emptyCoordinates = Object.freeze({
screenX: 0,
screenY: 0,
width: 0,
height: 0
});
const initialValue = {
start: emptyCoordinates,
end: emptyCoordinates
};
export function useKeyboard() {
const [shown, setShown] = useState(false);
const [coordinates, setCoordinates] = useState<{
start: undefined | KeyboardMetrics;
end: KeyboardMetrics;
}>(initialValue);
const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
const handleKeyboardWillShow: KeyboardEventListener = (e) => {
setCoordinates({ start: e.startCoordinates, end: e.endCoordinates });
};
const handleKeyboardDidShow: KeyboardEventListener = (e) => {
setShown(true);
setCoordinates({ start: e.startCoordinates, end: e.endCoordinates });
setKeyboardHeight(e.endCoordinates.height);
};
const handleKeyboardWillHide: KeyboardEventListener = (e) => {
setCoordinates({ start: e.startCoordinates, end: e.endCoordinates });
};
const handleKeyboardDidHide: KeyboardEventListener = (e) => {
setShown(false);
if (e) {
setCoordinates({ start: e.startCoordinates, end: e.endCoordinates });
} else {
setCoordinates(initialValue);
setKeyboardHeight(0);
}
};
useEffect(() => {
const subscriptions = [
Keyboard.addListener('keyboardWillShow', handleKeyboardWillShow),
Keyboard.addListener('keyboardDidShow', handleKeyboardDidShow),
Keyboard.addListener('keyboardWillHide', handleKeyboardWillHide),
Keyboard.addListener('keyboardDidHide', handleKeyboardDidHide)
];
return () => {
subscriptions.forEach((subscription) => subscription.remove());
};
}, []);
return {
keyboardShown: shown,
coordinates,
keyboardHeight
};
}