@tactics/toddle-styleguide 5.4.48 → 5.4.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "5.4.48",
+  "version": "5.4.49",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

package/src/components/templates/popover/components/modal/modal.component.tsx

@@ -14,6 +14,7 @@ type PopoverModalProps = {
   isVisible: boolean;
   children: React.ReactNode;
   windowHeight: number;
+  bottomInset?: number;
   disableScrollContent?: boolean;
 };
 
@@ -24,6 +25,7 @@ const Modal = ({
   onClose,
   children,
   windowHeight,
+  bottomInset = 0,
   disableScrollContent,
 }: PopoverModalProps) => {
   // Keep element and window size in local state.
@@ -36,7 +38,11 @@ const Modal = ({
   const elementHeight = Math.round(elementSize.height);
 
   const maxHeight = Math.round(windowHeight / 100) * 90;
-  const translateYStartingPoint = windowHeight;
+  // windowHeight already reflects the full edge-to-edge screen height on
+  // Android, but it excludes the space behind the navigation bar, so the
+  // sheet's rest/closed position needs bottomInset added or its top edge
+  // peeks out from behind the nav bar when closed (see PopoverAction).
+  const translateYStartingPoint = windowHeight + bottomInset;
 
   const saveHeight = elementHeight > maxHeight ? maxHeight : elementHeight;
 

package/src/components/templates/popover/popover.component.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {useEffect, useState} from 'react';
-import {Dimensions, Platform, StatusBar, View} from 'react-native';
+import {Dimensions, Platform, View} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Stylesheet} from './popover.styles';
 import {Backdrop} from '../../atoms/backdrop/backdrop.component';
 import {Modal, Foreground} from './components';
@@ -23,17 +24,14 @@ const Popover = ({
   disableScrollContent,
 }: PopoverProps) => {
   const styles = Stylesheet();
+  const insets = useSafeAreaInsets();
   const [windowHeight, setWindowHeight] = useState(
     Dimensions.get('window').height
   );
 
   useEffect(() => {
     const updateWindowHeight = () => {
-      let availableHeight = Dimensions.get('window').height;
-      if (Platform.OS === 'android') {
-        availableHeight += StatusBar.currentHeight ?? 0;
-      }
-      setWindowHeight(availableHeight);
+      setWindowHeight(Dimensions.get('window').height);
     };
 
     updateWindowHeight();
@@ -52,6 +50,7 @@ const Popover = ({
       <Foreground>
         <Modal
           windowHeight={windowHeight}
+          bottomInset={Platform.OS === 'android' ? insets.bottom : 0}
           isVisible={isVisible}
           onClose={onClose}
           title={title}

package/src/components/templates/popover-action/popover-action.component.tsx

@@ -12,7 +12,6 @@ import {
   Dimensions,
   LayoutChangeEvent,
   Platform,
-  StatusBar,
   View,
   ViewProps,
 } from 'react-native';
@@ -114,11 +113,7 @@ export const PopOverAction = ({
 
   useEffect(() => {
     const updateWindowHeight = () => {
-      let availableHeight = Dimensions.get('window').height;
-      if (Platform.OS === 'android') {
-        availableHeight += StatusBar.currentHeight ?? 0;
-      }
-      setWindowHeight(availableHeight);
+      setWindowHeight(Dimensions.get('window').height);
     };
 
     updateWindowHeight();