33546 visual viewport deplay

src/components/ScreenWrapper.tsx

@@ -122,7 +122,7 @@ function ScreenWrapper(
  */
  const navigationFallback = useNavigation<StackNavigationProp<RootStackParamList>>();
  const navigation = navigationProp ?? navigationFallback;
- const {windowHeight, isSmallScreenWidth} = useWindowDimensions();
+ const {windowHeight, isSmallScreenWidth} = useWindowDimensions(shouldEnableMaxHeight);
  const {initialHeight} = useInitialDimensions();
  const styles = useThemeStyles();
  const keyboardState = useKeyboardState();

src/hooks/useWindowDimensions/index.ts

@@ -1,23 +1,83 @@
+import {useEffect, useRef, useState} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {Dimensions, useWindowDimensions} from 'react-native';
+import * as Browser from '@libs/Browser';
 import variables from '@styles/variables';
 import type WindowDimensions from './types';
 
+const initalViewportHeight = window.visualViewport?.height ?? window.innerHeight;
+const tagNamesOpenKeyboard = ['INPUT', 'TEXTAREA'];
+
 /**
  * A convenience wrapper around React Native's useWindowDimensions hook that also provides booleans for our breakpoints.
  */
-export default function (): WindowDimensions {
+export default function (useCachedViewportHeight = false): WindowDimensions {
+ const isCachedViewportHeight = useCachedViewportHeight && Browser.isMobileSafari();
+ const cachedViewportHeightWithKeyboardRef = useRef(initalViewportHeight);
  const {width: windowWidth, height: windowHeight} = useWindowDimensions();
+
  // When the soft keyboard opens on mWeb, the window height changes. Use static screen height instead to get real screenHeight.
  const screenHeight = Dimensions.get('screen').height;
  const isExtraSmallScreenHeight = screenHeight <= variables.extraSmallMobileResponsiveHeightBreakpoint;
  const isSmallScreenWidth = windowWidth <= variables.mobileResponsiveWidthBreakpoint;
  const isMediumScreenWidth = windowWidth > variables.mobileResponsiveWidthBreakpoint && windowWidth <= variables.tabletResponsiveWidthBreakpoint;
  const isLargeScreenWidth = windowWidth > variables.tabletResponsiveWidthBreakpoint;
 
+ const [cachedViewportHeight, setCachedViewportHeight] = useState(windowHeight);
+
+ const handleFocusIn = useRef((event: FocusEvent) => {
+ const targetElement = event.target as HTMLElement;
+ if (tagNamesOpenKeyboard.includes(targetElement.tagName)) {
+ setCachedViewportHeight(cachedViewportHeightWithKeyboardRef.current);
+ }
+ });
+
+ useEffect(() => {
+ if (!isCachedViewportHeight) {
+ return;
+ }
+ window.addEventListener('focusin', handleFocusIn.current);
+ return () => {
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ window.removeEventListener('focusin', handleFocusIn.current);
+ };
+ }, [isCachedViewportHeight]);
+
+ const handleFocusOut = useRef((event: FocusEvent) => {
+ const targetElement = event.target as HTMLElement;
+ if (tagNamesOpenKeyboard.includes(targetElement.tagName)) {
+ setCachedViewportHeight(initalViewportHeight);
+ }
+ });
+
+ useEffect(() => {
+ if (!isCachedViewportHeight) {
+ return;
+ }
+ window.addEventListener('focusout', handleFocusOut.current);
+ return () => {
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ window.removeEventListener('focusout', handleFocusOut.current);
+ };
+ }, [isCachedViewportHeight]);
+
+ useEffect(() => {
+ if (!isCachedViewportHeight && windowHeight >= cachedViewportHeightWithKeyboardRef.current) {
+ return;
+ }
+ setCachedViewportHeight(windowHeight);
+ }, [windowHeight, isCachedViewportHeight]);
+
+ useEffect(() => {
+ if (!isCachedViewportHeight || !window.matchMedia('(orientation: portrait)').matches || windowHeight >= initalViewportHeight) {
+ return;
+ }
+ cachedViewportHeightWithKeyboardRef.current = windowHeight;
+ }, [isCachedViewportHeight, windowHeight]);
+
  return {
  windowWidth,
- windowHeight,
+ windowHeight: isCachedViewportHeight ? cachedViewportHeight : windowHeight,
  isExtraSmallScreenHeight,
  isSmallScreenWidth,
  isMediumScreenWidth,