AppMinHeightWrapper.tsx

import { Box, useDimensions, useSafeAreaInsets } from '@th3rdwave/ui';
import * as React from 'react';
import { updateSafeAreaInsets } from './metrics';

/**
 * This is a hack to simulate iOS keyboard behavior on Android. We use the
 * keyboard behavior that causes the window to resize and make sure
 * the min height stays the same when we detect that the keyboard opens.
 */
export function AppMinHeightWrapper({
  children,
}: {
  children?: React.ReactNode;
}) {
  const dimensions = useDimensions();
  const safeAreaInsets = useSafeAreaInsets();
  // Might be a better place to do this but w/e
  updateSafeAreaInsets(safeAreaInsets);
  const [minHeight, setMinHeight] = React.useState(dimensions.height);

  React.useLayoutEffect(() => {
    setMinHeight(dimensions.height);
  }, [
    // Whenever safe area changes we need to recalculate layout.
    safeAreaInsets.top,
    safeAreaInsets.left,
    safeAreaInsets.right,
    safeAreaInsets.bottom,
    dimensions.height,
  ]);

  return (
    <Box
      minHeight={minHeight}
      flexGrow={1}
      width="100%"
      bg="white"
      onLayout={({ nativeEvent: { layout } }) => {
        // On android devices with notches RN dimensions module doesn't get
        // the right value so we use flex grow and adjust here only if the
        // measured layout is bigger than the screen.
        if (layout.height > dimensions.height) {
          setMinHeight(layout.height);
        }
      }}
    >
      {children}
    </Box>
  );
}