fix: try to apply pointer events behaviors in overlay

README.md

@@ -167,6 +167,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`. 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)
 
 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.

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>
+        <View style={{flex: 1, justifyContent: 'center'}} pointerEvents="box-none">
+          <View style={styles.box} />
+          <Button title="click me" onPress={() => console.warn('clicked')} />
+        </View >
       </FullWindowOverlay>
     </View>
   );

ios/RNSFullWindowOverlay.mm

@@ -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 {

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,

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,9 @@ export const NativeScreenNavigationContainer: React.ComponentType<ScreenContaine
 
 export const ScreenStack: React.ComponentType<ScreenStackProps> = View;
 
-export const FullWindowOverlay = View;
+export const FullWindowOverlay = View as React.ComponentType<{
+  children: ReactNode;
+}>;
 
 export const ScreenStackHeaderBackButtonImage = (
   props: ImageProps