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 cf31492)

Author: alduzy

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,

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>
   );