From 5359e4e566aa0ddb70bed3f72954a123993e19e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20Du=C5=BCy?=
 <91994767+alduzy@users.noreply.github.com>
Date: Tue, 22 Oct 2024 14:17:37 +0200
Subject: [PATCH] fix(iOS): FullWindowOverlay layout height (#2430)

## Description

This PR intents to fix `FullWindowOverlay`s height issue.

The component is given wrong frame size during layout because of it's
placement in the react tree. Although in the iOS view hierarchy it is
displayed independently its height is still reduced by the height of the
header.

Correct frame can be achieved by utilising `useWindowDimensions` hook
and forcing correct width and height on the JS side.

Fixes #1247

## Changes

- modified `Test1096` repro

## Screenshots / GIFs

### Before
![Simulator Screenshot - iPhone 16 Pro - 2024-10-22 at 10 08
00](https://github.com/user-attachments/assets/2b7164b4-8fc8-4685-b3e5-a7d1f01f08af)

### After
![Simulator Screenshot - iPhone 16 Pro - 2024-10-22 at 10 08
09](https://github.com/user-attachments/assets/8362dcc9-e5fd-4ce1-a2ea-a47ec6e7b214)

## Test code and steps to reproduce

- use `Test1096` repro

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes

(cherry picked from commit cf314920db7007d12228ebd2b1b9aa4970bd5283)
---
 apps/src/tests/Test1096.tsx          | 11 +++++++----
 src/components/FullWindowOverlay.tsx | 12 ++++++++++--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/apps/src/tests/Test1096.tsx b/apps/src/tests/Test1096.tsx
index f10691468..f07cdcd4b 100644
--- a/apps/src/tests/Test1096.tsx
+++ b/apps/src/tests/Test1096.tsx
@@ -34,9 +34,7 @@ function Home({
         </View>
       </Modal>
       <FullWindowOverlay>
-        <View
-          style={{ flex: 1, justifyContent: 'center' }}
-          pointerEvents="box-none">
+        <View style={styles.overlay} pointerEvents="box-none">
           <View style={styles.box} />
           <Button title="click me" onPress={() => console.warn('clicked')} />
         </View>
@@ -80,7 +78,12 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     justifyContent: 'center',
   },
-
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: `rgba(0,0,0,0.5)`,
+  },
   box: {
     width: 40,
     height: 40,
diff --git a/src/components/FullWindowOverlay.tsx b/src/components/FullWindowOverlay.tsx
index bbe41b61f..adf3fba1f 100644
--- a/src/components/FullWindowOverlay.tsx
+++ b/src/components/FullWindowOverlay.tsx
@@ -1,5 +1,12 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
-import { Platform, StyleProp, View, ViewStyle } from 'react-native';
+import {
+  Platform,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+  useWindowDimensions,
+} from 'react-native';
 
 // Native components
 import FullWindowOverlayNativeComponent from '../fabric/FullWindowOverlayNativeComponent';
@@ -10,13 +17,14 @@ const NativeFullWindowOverlay: React.ComponentType<
 > = FullWindowOverlayNativeComponent as any;
 
 function FullWindowOverlay(props: { children: ReactNode }) {
+  const { width, height } = useWindowDimensions();
   if (Platform.OS !== 'ios') {
     console.warn('Using FullWindowOverlay is only valid on iOS devices.');
     return <View {...props} />;
   }
   return (
     <NativeFullWindowOverlay
-      style={{ position: 'absolute', width: '100%', height: '100%' }}>
+      style={[StyleSheet.absoluteFill, { width, height }]}>
       {props.children}
     </NativeFullWindowOverlay>
   );