Workaround fix for iOS

app/green/index.tsx

@@ -2,16 +2,17 @@ import { router } from "expo-router";
 import { Button, View } from "react-native";
 import * as React from "react";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ModalScreenWrapper } from "@/components/ModalScreenWrapper";
 
 export default function GreenScreen() {
   const insets = useSafeAreaInsets();
   return (
-    <>
+    <ModalScreenWrapper>
       <View style={{ flex: 1, paddingBottom: insets.bottom }}>
         <Button title="Green / Modal " onPress={() => router.navigate("/green/modal")} />
         <View style={{ flex: 1, width: 50, backgroundColor: "green" }} />
         <View style={{ height: 50, width: "100%", backgroundColor: "darkgreen" }} />
       </View>
-    </>
+    </ModalScreenWrapper>
   );
 }

app/green/modal.tsx

@@ -1,17 +1,19 @@
 import { router } from "expo-router";
 import { Button, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-
+import { ModalScreenWrapper } from "@/components/ModalScreenWrapper";
 export default function GreenModal() {
   const insets = useSafeAreaInsets();
   return (
-    <View style={{ flex: 1, paddingBottom: insets.bottom }}>
-      <Button title="dismiss()" onPress={() => router.dismiss()} />
-      <Button title="dismissAll()" onPress={() => router.dismissAll()} />
-      <Button title="dismissTo /blue" onPress={() => router.dismissTo("/blue")} />
-      <Button title="dismissTo /red" onPress={() => router.dismissTo("/red")} />
-      <View style={{ flex: 1, width: 50, backgroundColor: "green" }} />
-      <View style={{ height: 50, width: "100%", backgroundColor: "darkgreen" }} />
-    </View>
+    <ModalScreenWrapper>
+      <View style={{ flex: 1, paddingBottom: insets.bottom }}>
+        <Button title="dismiss()" onPress={() => router.dismiss()} />
+        <Button title="dismissAll()" onPress={() => router.dismissAll()} />
+        <Button title="dismissTo /blue" onPress={() => router.dismissTo("/blue")} />
+        <Button title="dismissTo /red" onPress={() => router.dismissTo("/red")} />
+        <View style={{ flex: 1, width: 50, backgroundColor: "green" }} />
+        <View style={{ height: 50, width: "100%", backgroundColor: "darkgreen" }} />
+      </View>
+    </ModalScreenWrapper>
   );
 }

components/ModalScreenWrapper.tsx

@@ -0,0 +1,40 @@
+import type { ViewProps } from "react-native";
+import { useHeaderHeight } from "@react-navigation/elements";
+import { Platform, useWindowDimensions, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+/*
+This component is necessary to workaround a bug with react-native-screens on New Architecture (or possibly Fabric)
+Affecting iOS-only, Modal-presented screens only. 
+https://github.com/software-mansion/react-native-screens/issues/2587
+
+Height calculation of the view is sometimes incorrect. 
+In cases where we have a fixed bottom footer, this results in the footer being cut off.
+As a workaround, this component manually calculates the height of the view instead of relying on Flex. 
+
+This is a temporary solution until the underlying issue is resolved and this component can be safely removed. 
+*/
+
+export function ModalScreenWrapper({ children, style, ...props }: ViewProps) {
+  const headerHeight = useHeaderHeight();
+  const dimensions = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  return (
+    <View
+      {...props}
+      style={[
+        Platform.select({
+          default: {
+            flex: 1,
+          },
+          ios: {
+            height: dimensions.height - insets.top - headerHeight - 10,
+          },
+        }),
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}

package.json

@@ -47,6 +47,8 @@
     "@types/react-test-renderer": "^18.3.0",
     "jest": "^29.2.1",
     "jest-expo": "~52.0.4",
+    "patch-package": "^8.0.0",
+    "postinstall-postinstall": "^2.1.0",
     "react-test-renderer": "18.3.1",
     "typescript": "^5.3.3"
   },