From 6b368acde263296667ccf7e0a6668bde092a0ed5 Mon Sep 17 00:00:00 2001
From: Wojciech Lewicki <wojciech.lewicki@swmansion.com>
Date: Tue, 6 Sep 2022 13:39:10 +0200
Subject: [PATCH 1/6] fix: try to apply pointer events behaviors in overlay

---
 ios/RNSFullWindowOverlay.mm | 34 +++++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/ios/RNSFullWindowOverlay.mm b/ios/RNSFullWindowOverlay.mm
index 52d1914d0d..17a8be48e8 100644
--- a/ios/RNSFullWindowOverlay.mm
+++ b/ios/RNSFullWindowOverlay.mm
@@ -4,11 +4,11 @@
 
 #ifdef RN_FABRIC_ENABLED
 #import <React/RCTConversions.h>
+#import <React/RCTFabricComponentsPlugins.h>
 #import <React/RCTSurfaceTouchHandler.h>
 #import <react/renderer/components/rnscreens/ComponentDescriptors.h>
 #import <react/renderer/components/rnscreens/Props.h>
 #import <react/renderer/components/rnscreens/RCTComponentViewHelpers.h>
-#import <React/RCTFabricComponentsPlugins.h>
 #else
 #import <React/RCTTouchHandler.h>
 #endif // RN_FABRIC_ENABLED
@@ -25,6 +25,38 @@ - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event
   return NO;
 }
 
+- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
+{
+  BOOL canReceiveTouchEvents = ([self isUserInteractionEnabled] && ![self isHidden]);
+  if (!canReceiveTouchEvents) {
+    return nil;
+  }
+
+  // `hitSubview` is the topmost subview which was hit. The hit point can
+  // be outside the bounds of `view` (e.g., if -clipsToBounds is NO).
+  UIView *hitSubview = nil;
+  BOOL isPointInside = [self pointInside:point withEvent:event];
+  if (![self clipsToBounds] || isPointInside) {
+    // Take z-index into account when calculating the touch target.
+    NSArray<UIView *> *sortedSubviews = [self reactZIndexSortedSubviews];
+
+    // The default behaviour of UIKit is that if a view does not contain a point,
+    // then no subviews will be returned from hit testing, even if they contain
+    // the hit point. By doing hit testing directly on the subviews, we bypass
+    // the strict containment policy (i.e., UIKit guarantees that every ancestor
+    // of the hit view will return YES from -pointInside:withEvent:). See:
+    //  - https://developer.apple.com/library/ios/qa/qa2013/qa1812.html
+    for (UIView *subview in [sortedSubviews reverseObjectEnumerator]) {
+      CGPoint convertedPoint = [subview convertPoint:point fromView:self];
+      hitSubview = [subview hitTest:convertedPoint withEvent:event];
+      if (hitSubview != nil) {
+        break;
+      }
+    }
+  }
+  return hitSubview;
+}
+
 @end
 
 @implementation RNSFullWindowOverlay {

From b0ca11746aa0e3c90b422a3c6cb62d3f83d59b51 Mon Sep 17 00:00:00 2001
From: Wojciech Lewicki <wojciech.lewicki@swmansion.com>
Date: Tue, 6 Sep 2022 13:42:43 +0200
Subject: [PATCH 2/6] feat: make test case show new behavior

---
 TestsExample/src/Test1096.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/TestsExample/src/Test1096.tsx b/TestsExample/src/Test1096.tsx
index 6e6bb1753e..f18b52d31f 100644
--- a/TestsExample/src/Test1096.tsx
+++ b/TestsExample/src/Test1096.tsx
@@ -34,9 +34,11 @@ function Home({
           />
         </View>
       </Modal>
-      <FullWindowOverlay style={{position: 'absolute', width: '100%', height: '100%', justifyContent: 'center'}}>
-        <View style={styles.box} />
-        <Button title="click me" onPress={() => console.warn('clicked')} />
+      <FullWindowOverlay style={{position: 'absolute', width: '100%', height: '100%'}}>
+        <View style={{flex: 1, justifyContent: 'center'}} pointerEvents="box-none">
+          <View style={styles.box} />
+          <Button title="click me" onPress={() => console.warn('clicked')} />
+        </View >
       </FullWindowOverlay>
     </View>
   );

From 48c48c2e32e98d6574080f7c85f5a6a545f186f1 Mon Sep 17 00:00:00 2001
From: Wojciech Lewicki <wojciech.lewicki@swmansion.com>
Date: Tue, 6 Sep 2022 18:50:20 +0200
Subject: [PATCH 3/6] feat: change the impl to one with better typings

---
 TestsExample/src/Test1096.tsx |  2 +-
 src/index.native.tsx          | 30 ++++++++++++++++++++----------
 src/index.tsx                 |  7 +++++--
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/TestsExample/src/Test1096.tsx b/TestsExample/src/Test1096.tsx
index f18b52d31f..a9a214e575 100644
--- a/TestsExample/src/Test1096.tsx
+++ b/TestsExample/src/Test1096.tsx
@@ -34,7 +34,7 @@ function Home({
           />
         </View>
       </Modal>
-      <FullWindowOverlay style={{position: 'absolute', width: '100%', height: '100%'}}>
+      <FullWindowOverlay>
         <View style={{flex: 1, justifyContent: 'center'}} pointerEvents="box-none">
           <View style={styles.box} />
           <Button title="click me" onPress={() => console.warn('clicked')} />
diff --git a/src/index.native.tsx b/src/index.native.tsx
index edcd032888..5279497c49 100644
--- a/src/index.native.tsx
+++ b/src/index.native.tsx
@@ -1,14 +1,16 @@
-import React from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 import {
   Animated,
   Image,
   ImageProps,
   Platform,
   requireNativeComponent,
+  StyleProp,
   StyleSheet,
   UIManager,
   View,
   ViewProps,
+  ViewStyle,
 } from 'react-native';
 import { Freeze } from 'react-freeze';
 import { version } from 'react-native/package.json';
@@ -84,7 +86,9 @@ let NativeScreenStackHeaderSubview: React.ComponentType<React.PropsWithChildren<
 >>;
 let AnimatedNativeScreen: React.ComponentType<ScreenProps>;
 let NativeSearchBar: React.ComponentType<SearchBarProps>;
-let NativeFullWindowOverlay: React.ComponentType<View>;
+let NativeFullWindowOverlay: React.ComponentType<PropsWithChildren<{
+  style: StyleProp<ViewStyle>;
+}>>;
 
 const ScreensNativeModules = {
   get NativeScreen() {
@@ -337,6 +341,19 @@ function ScreenContainer(props: ScreenContainerProps) {
   return <View {...rest} />;
 }
 
+function FullWindowOverlay(props: { children: ReactNode }) {
+  if (Platform.OS !== 'ios') {
+    console.warn('Importing FullWindowOverlay is only valid on iOS devices.');
+    return <View {...props} />;
+  }
+  return (
+    <ScreensNativeModules.NativeFullWindowOverlay
+      style={{ position: 'absolute', width: '100%', height: '100%' }}>
+      {props.children}
+    </ScreensNativeModules.NativeFullWindowOverlay>
+  );
+}
+
 const styles = StyleSheet.create({
   headerSubview: {
     position: 'absolute',
@@ -431,6 +448,7 @@ module.exports = {
   ScreenContext,
   ScreenStack,
   InnerScreen,
+  FullWindowOverlay,
 
   get NativeScreen() {
     return ScreensNativeModules.NativeScreen;
@@ -460,14 +478,6 @@ module.exports = {
 
     return ScreensNativeModules.NativeSearchBar;
   },
-  get FullWindowOverlay() {
-    if (Platform.OS !== 'ios') {
-      console.warn('Importing FullWindowOverlay is only valid on iOS devices.');
-      return View;
-    }
-
-    return ScreensNativeModules.NativeFullWindowOverlay;
-  },
   // these are functions and will not be evaluated until used
   // so no need to use getters for them
   ScreenStackHeaderBackButtonImage,
diff --git a/src/index.tsx b/src/index.tsx
index 9502a36694..bd01bf47fd 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Animated, View, ViewProps, ImageProps, Image } from 'react-native';
 import {
   ScreenProps,
@@ -74,7 +74,10 @@ export const NativeScreenNavigationContainer: React.ComponentType<ScreenContaine
 
 export const ScreenStack: React.ComponentType<ScreenStackProps> = View;
 
-export const FullWindowOverlay = View;
+// @ts-ignore TODO: make this type work correctly
+export const FullWindowOverlay: React.ComponentType<{
+  children: ReactNode;
+}> = View;
 
 export const ScreenStackHeaderBackButtonImage = (
   props: ImageProps

From 5d203379ae952461ed4261717c8debe38257d568 Mon Sep 17 00:00:00 2001
From: Wojciech Lewicki <wojciech.lewicki@swmansion.com>
Date: Tue, 6 Sep 2022 19:06:49 +0200
Subject: [PATCH 4/6] feat: add simple readme

---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index 2511d5f6ba..22d2946c76 100644
--- a/README.md
+++ b/README.md
@@ -163,6 +163,10 @@ To take advantage of the native stack navigator primitive for React Navigation t
 - for React Navigation v5 to the [README in react-native-screens/native-stack](https://github.com/software-mansion/react-native-screens/tree/main/native-stack)
 - for older versions to the [README in react-native-screens/createNativeStackNavigator](https://github.com/software-mansion/react-native-screens/tree/main/createNativeStackNavigator)
 
+## `FullWindowOverlay`
+
+Native `iOS` component for rendering views straight under the `Window`. Based on `RCTPerfMonitor`. For the example usage, see https://github.com/software-mansion/react-native-screens/blob/main/TestsExample/src/Test1096.tsx
+
 ## Interop with [react-native-navigation](https://github.com/wix/react-native-navigation)
 
 React-native-navigation library already uses native containers for rendering navigation scenes so wrapping these scenes with `<ScreenContainer>` or `<Screen>` component does not provide any benefits. Yet if you would like to build a component that uses screens primitives under the hood (for example a view pager component) it is safe to use `<ScreenContainer>` and `<Screen>` components for that as these work out of the box when rendered on react-native-navigation scenes.

From 1cd59234944242867349062f66beecc9cfc766ff Mon Sep 17 00:00:00 2001
From: Wojciech Lewicki <wojciech.lewicki@swmansion.com>
Date: Wed, 7 Sep 2022 11:27:52 +0200
Subject: [PATCH 5/6] chore: add more info to README

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 22d2946c76..7cde9ef801 100644
--- a/README.md
+++ b/README.md
@@ -165,7 +165,7 @@ To take advantage of the native stack navigator primitive for React Navigation t
 
 ## `FullWindowOverlay`
 
-Native `iOS` component for rendering views straight under the `Window`. Based on `RCTPerfMonitor`. For the example usage, see https://github.com/software-mansion/react-native-screens/blob/main/TestsExample/src/Test1096.tsx
+Native `iOS` component for rendering views straight under the `Window`. Based on `RCTPerfMonitor`. You should treat it as a wrapper, providing full-screen, transparent view which receives no props and should ideally render one child `View`, being the root of its view hierarchy. For the example usage, see https://github.com/software-mansion/react-native-screens/blob/main/TestsExample/src/Test1096.tsx
 
 ## Interop with [react-native-navigation](https://github.com/wix/react-native-navigation)
 

From 029b730c45a7dae214c18e5118574af1bf5562ed Mon Sep 17 00:00:00 2001
From: Wojciech Lewicki <wojciech.lewicki@swmansion.com>
Date: Mon, 3 Oct 2022 12:18:53 +0200
Subject: [PATCH 6/6] fix: make ts happy

---
 src/index.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index bd01bf47fd..1c28c4bc66 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -74,10 +74,9 @@ export const NativeScreenNavigationContainer: React.ComponentType<ScreenContaine
 
 export const ScreenStack: React.ComponentType<ScreenStackProps> = View;
 
-// @ts-ignore TODO: make this type work correctly
-export const FullWindowOverlay: React.ComponentType<{
+export const FullWindowOverlay = View as React.ComponentType<{
   children: ReactNode;
-}> = View;
+}>;
 
 export const ScreenStackHeaderBackButtonImage = (
   props: ImageProps