diff --git a/native/account/siwe-panel.react.js b/native/account/siwe-panel.react.js --- a/native/account/siwe-panel.react.js +++ b/native/account/siwe-panel.react.js @@ -18,6 +18,7 @@ type BindServerCallsParams, } from 'lib/utils/action-utils.js'; +import { useKeyboardHeight } from '../keyboard/keyboard-hooks.js'; import { useSelector } from '../redux/redux-utils.js'; import Alert from '../utils/alert.js'; import { getContentSigningKey } from '../utils/crypto-utils.js'; @@ -88,21 +89,24 @@ const [walletConnectModalHeight, setWalletConnectModalHeight] = React.useState(0); const insets = useSafeAreaInsets(); + const keyboardHeight = useKeyboardHeight(); const bottomInset = insets.bottom; const snapPoints = React.useMemo(() => { if (isLoading) { return [1]; } else if (walletConnectModalHeight) { - const baseHeight = bottomInset + walletConnectModalHeight; + const baseHeight = + bottomInset + walletConnectModalHeight + keyboardHeight; if (baseHeight < 400) { - return [baseHeight + 3]; + return [baseHeight - 10]; } else { - return [baseHeight - 17]; + return [baseHeight + 5]; } } else { - return [bottomInset + 435, bottomInset + 600]; + const baseHeight = bottomInset + keyboardHeight; + return [baseHeight + 435, baseHeight + 600]; } - }, [isLoading, walletConnectModalHeight, bottomInset]); + }, [isLoading, walletConnectModalHeight, bottomInset, keyboardHeight]); const bottomSheetRef = React.useRef(); const snapToIndex = bottomSheetRef.current?.snapToIndex; diff --git a/native/keyboard/keyboard-hooks.js b/native/keyboard/keyboard-hooks.js new file mode 100644 --- /dev/null +++ b/native/keyboard/keyboard-hooks.js @@ -0,0 +1,41 @@ +// @flow + +import * as React from 'react'; + +import { + addKeyboardShowListener, + addKeyboardDismissListener, + removeKeyboardListener, +} from './keyboard.js'; +import type { KeyboardEvent } from '../types/react-native.js'; + +function useKeyboardHeight(): number { + const [keyboardHeight, setKeyboardHeight] = React.useState(0); + + const onKeyboardShow = React.useCallback((event: KeyboardEvent) => { + const height = event?.endCoordinates?.height ?? 0; + setKeyboardHeight(height); + }, []); + React.useEffect(() => { + const keyboardShowListener = addKeyboardShowListener(onKeyboardShow); + return () => { + removeKeyboardListener(keyboardShowListener); + }; + }, [onKeyboardShow]); + + const onKeyboardDismiss = React.useCallback(() => { + setKeyboardHeight(0); + }, []); + + React.useEffect(() => { + const keyboardDismissListener = + addKeyboardDismissListener(onKeyboardDismiss); + return () => { + removeKeyboardListener(keyboardDismissListener); + }; + }, [onKeyboardDismiss]); + + return keyboardHeight; +} + +export { useKeyboardHeight };