@gorhom/bottom-sheet
Version:
A performant interactive bottom sheet with fully configurable options 🚀
91 lines (86 loc) • 3.65 kB
JavaScript
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useKeyboard = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _reactNativeReanimated = require("react-native-reanimated");
var _constants = require("../constants");
const KEYBOARD_EVENT_MAPPER = {
KEYBOARD_SHOW: _reactNative.Platform.select({
ios: 'keyboardWillShow',
android: 'keyboardDidShow',
default: ''
}),
KEYBOARD_HIDE: _reactNative.Platform.select({
ios: 'keyboardWillHide',
android: 'keyboardDidHide',
default: ''
})
};
const useKeyboard = () => {
//#region variables
const shouldHandleKeyboardEvents = (0, _reactNativeReanimated.useSharedValue)(false);
const keyboardState = (0, _reactNativeReanimated.useSharedValue)(_constants.KEYBOARD_STATE.UNDETERMINED);
const keyboardHeight = (0, _reactNativeReanimated.useSharedValue)(0);
const keyboardAnimationEasing = (0, _reactNativeReanimated.useSharedValue)('keyboard');
const keyboardAnimationDuration = (0, _reactNativeReanimated.useSharedValue)(500);
// biome-ignore lint: to be addressed!
const temporaryCachedKeyboardEvent = (0, _reactNativeReanimated.useSharedValue)([]);
//#endregion
//#region worklets
const handleKeyboardEvent = (0, _reactNativeReanimated.useWorkletCallback)((state, height, duration, easing) => {
if (state === _constants.KEYBOARD_STATE.SHOWN && !shouldHandleKeyboardEvents.value) {
/**
* if the keyboard event was fired before the `onFocus` on TextInput,
* then we cache the input, and wait till the `shouldHandleKeyboardEvents`
* to be updated then fire this function again.
*/
temporaryCachedKeyboardEvent.value = [state, height, duration, easing];
return;
}
keyboardHeight.value = state === _constants.KEYBOARD_STATE.SHOWN ? height : keyboardHeight.value;
keyboardAnimationDuration.value = duration;
keyboardAnimationEasing.value = easing;
keyboardState.value = state;
temporaryCachedKeyboardEvent.value = [];
}, []);
//#endregion
//#region effects
(0, _react.useEffect)(() => {
const handleOnKeyboardShow = event => {
(0, _reactNativeReanimated.runOnUI)(handleKeyboardEvent)(_constants.KEYBOARD_STATE.SHOWN, event.endCoordinates.height, event.duration, event.easing);
};
const handleOnKeyboardHide = event => {
(0, _reactNativeReanimated.runOnUI)(handleKeyboardEvent)(_constants.KEYBOARD_STATE.HIDDEN, event.endCoordinates.height, event.duration, event.easing);
};
const showSubscription = _reactNative.Keyboard.addListener(KEYBOARD_EVENT_MAPPER.KEYBOARD_SHOW, handleOnKeyboardShow);
const hideSubscription = _reactNative.Keyboard.addListener(KEYBOARD_EVENT_MAPPER.KEYBOARD_HIDE, handleOnKeyboardHide);
return () => {
showSubscription.remove();
hideSubscription.remove();
};
}, [handleKeyboardEvent]);
/**
* This reaction is needed to handle the issue with multiline text input.
*
* @link https://github.com/gorhom/react-native-bottom-sheet/issues/411
*/
(0, _reactNativeReanimated.useAnimatedReaction)(() => shouldHandleKeyboardEvents.value, result => {
const params = temporaryCachedKeyboardEvent.value;
if (result && params.length > 0) {
handleKeyboardEvent(params[0], params[1], params[2], params[3]);
}
}, []);
//#endregion
return {
state: keyboardState,
height: keyboardHeight,
animationEasing: keyboardAnimationEasing,
animationDuration: keyboardAnimationDuration,
shouldHandleKeyboardEvents
};
};
exports.useKeyboard = useKeyboard;
//# sourceMappingURL=useKeyboard.js.map
;