From 3f8e4aa683c15d48e7e8ebc9caccade40df31b0b Mon Sep 17 00:00:00 2001
From: Wojciech Lewicki <wojciech.lewicki@swmansion.com>
Date: Wed, 8 Sep 2021 15:10:33 +0200
Subject: [PATCH] feat: move `react-native-window-view` to screens package
 (#1096)

Moved the `WindowView` to this repo and renamed it to `RNSFullWindowOverlay`. Removed the necessity of adding changes to `AppDelegate.m` by providing an extension of `UIWindow` in the package.
---
 TestsExample/App.js           |   1 +
 TestsExample/src/Test1096.tsx |  89 ++++++++++++++++++++++++++++
 ios/RNSFullWindowOverlay.h    |  15 +++++
 ios/RNSFullWindowOverlay.m    | 105 ++++++++++++++++++++++++++++++++++
 ios/UIWindow+RNScreens.h      |   9 +++
 ios/UIWindow+RNScreens.m      |  17 ++++++
 src/index.native.tsx          |  15 +++++
 src/index.tsx                 |   2 +
 8 files changed, 253 insertions(+)
 create mode 100644 TestsExample/src/Test1096.tsx
 create mode 100644 ios/RNSFullWindowOverlay.h
 create mode 100644 ios/RNSFullWindowOverlay.m
 create mode 100644 ios/UIWindow+RNScreens.h
 create mode 100644 ios/UIWindow+RNScreens.m

diff --git a/TestsExample/App.js b/TestsExample/App.js
index 95ee260478..3f8627a318 100644
--- a/TestsExample/App.js
+++ b/TestsExample/App.js
@@ -57,6 +57,7 @@ import Test1032 from './src/Test1032';
 import Test1036 from './src/Test1036';
 import Test1072 from './src/Test1072';
 import Test1084 from './src/Test1084';
+import Test1096 from './src/Test1096';
 
 export default function App() {
   return (
diff --git a/TestsExample/src/Test1096.tsx b/TestsExample/src/Test1096.tsx
new file mode 100644
index 0000000000..6e6bb1753e
--- /dev/null
+++ b/TestsExample/src/Test1096.tsx
@@ -0,0 +1,89 @@
+import * as React from 'react';
+
+import { Button, StyleSheet, View, Modal } from 'react-native';
+import {FullWindowOverlay} from 'react-native-screens';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+
+function Home({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
+  const [isShowModal, setIsShowModal] = React.useState(false);
+
+  return (
+    <View style={styles.container}>
+      <Button title="show rn modal" onPress={() => setIsShowModal(true)} />
+      <Button
+        title="Go to RNScreens modal"
+        onPress={() => navigation.navigate('Modal')}
+      />
+      <Modal
+        animationType="slide"
+        visible={isShowModal}
+        presentationStyle="pageSheet"
+      >
+        <View style={styles.container}>
+          <Button
+            title="dismiss rn modal"
+            onPress={() => setIsShowModal(false)}
+          />
+        </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>
+  );
+}
+
+function ModalScreen({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
+  return (
+    <View style={styles.container}>
+      <Button title="dismiss modal" onPress={() => navigation.goBack()} />
+    </View>
+  );
+}
+
+const NativeStack = createNativeStackNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <NativeStack.Navigator>
+        <NativeStack.Screen name="Home" component={Home} />
+        <NativeStack.Screen
+          name="Modal"
+          component={ModalScreen}
+          options={{ stackPresentation: 'modal' }}
+        />
+      </NativeStack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+
+  box: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: 'black',
+    backgroundColor: 'red',
+  },
+});
diff --git a/ios/RNSFullWindowOverlay.h b/ios/RNSFullWindowOverlay.h
new file mode 100644
index 0000000000..3ed174381a
--- /dev/null
+++ b/ios/RNSFullWindowOverlay.h
@@ -0,0 +1,15 @@
+#import <React/RCTInvalidating.h>
+#import <React/RCTView.h>
+#import <React/RCTViewManager.h>
+
+@interface RNSFullWindowOverlayManager : RCTViewManager
+
+@end
+
+@interface RNSFullWindowOverlayContainer : UIView
+
+@end
+
+@interface RNSFullWindowOverlay : RCTView <RCTInvalidating>
+
+@end
diff --git a/ios/RNSFullWindowOverlay.m b/ios/RNSFullWindowOverlay.m
new file mode 100644
index 0000000000..b8c13e2730
--- /dev/null
+++ b/ios/RNSFullWindowOverlay.m
@@ -0,0 +1,105 @@
+#import <UIKit/UIKit.h>
+
+#import "RNSFullWindowOverlay.h"
+
+#import <React/RCTTouchHandler.h>
+
+@implementation RNSFullWindowOverlayContainer
+
+- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event
+{
+  for (UIView *view in [self subviews]) {
+    if (view.userInteractionEnabled && [view pointInside:[self convertPoint:point toView:view] withEvent:event]) {
+      return YES;
+    }
+  }
+  return NO;
+}
+
+@end
+
+@implementation RNSFullWindowOverlay {
+  __weak RCTBridge *_bridge;
+  RNSFullWindowOverlayContainer *_container;
+  CGRect _reactFrame;
+  RCTTouchHandler *_touchHandler;
+}
+
+- (instancetype)initWithBridge:(RCTBridge *)bridge
+{
+  if (self = [super init]) {
+    _bridge = bridge;
+    _reactFrame = CGRectNull;
+    _container = self.container;
+    [self show];
+  }
+
+  return self;
+}
+
+- (void)reactSetFrame:(CGRect)frame
+{
+  _reactFrame = frame;
+  [_container setFrame:frame];
+}
+
+- (void)addSubview:(UIView *)view
+{
+  [_container addSubview:view];
+}
+
+- (RNSFullWindowOverlayContainer *)container
+{
+  if (_container == nil) {
+    _container = [[RNSFullWindowOverlayContainer alloc] initWithFrame:_reactFrame];
+  }
+
+  return _container;
+}
+
+- (void)show
+{
+  UIWindow *window = RCTSharedApplication().delegate.window;
+  [window addSubview:_container];
+}
+
+- (void)hide
+{
+  if (!_container) {
+    return;
+  }
+
+  [_container removeFromSuperview];
+}
+
+- (void)didMoveToWindow
+{
+  if (self.window == nil) {
+    [self hide];
+    [_touchHandler detachFromView:_container];
+  } else {
+    if (_touchHandler == nil) {
+      _touchHandler = [[RCTTouchHandler alloc] initWithBridge:_bridge];
+    }
+    [_touchHandler attachToView:_container];
+  }
+}
+
+- (void)invalidate
+{
+  [self hide];
+  _container = nil;
+}
+
+@end
+
+@implementation RNSFullWindowOverlayManager
+
+RCT_EXPORT_MODULE()
+
+- (UIView *)view
+{
+  return [[RNSFullWindowOverlay alloc] initWithBridge:self.bridge];
+}
+
+@end
diff --git a/ios/UIWindow+RNScreens.h b/ios/UIWindow+RNScreens.h
new file mode 100644
index 0000000000..77484b7949
--- /dev/null
+++ b/ios/UIWindow+RNScreens.h
@@ -0,0 +1,9 @@
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface UIWindow (RNScreens)
+
+@end
+
+NS_ASSUME_NONNULL_END
diff --git a/ios/UIWindow+RNScreens.m b/ios/UIWindow+RNScreens.m
new file mode 100644
index 0000000000..e295dcc154
--- /dev/null
+++ b/ios/UIWindow+RNScreens.m
@@ -0,0 +1,17 @@
+#import "RNSFullWindowOverlay.h"
+#import "UIWindow+RNScreens.h"
+
+@implementation UIWindow (RNScreens)
+
+- (void)didAddSubview:(UIView *)subview
+{
+  if (![subview isKindOfClass:[RNSFullWindowOverlayContainer class]]) {
+    for (UIView *view in self.subviews) {
+      if ([view isKindOfClass:[RNSFullWindowOverlayContainer class]]) {
+        [self bringSubviewToFront:view];
+      }
+    }
+  }
+}
+
+@end
diff --git a/src/index.native.tsx b/src/index.native.tsx
index b61b4da7fd..832490f19d 100644
--- a/src/index.native.tsx
+++ b/src/index.native.tsx
@@ -66,6 +66,7 @@ let NativeScreenStackHeaderSubview: React.ComponentType<React.PropsWithChildren<
 >>;
 let AnimatedNativeScreen: React.ComponentType<ScreenProps>;
 let NativeSearchBar: React.ComponentType<SearchBarProps>;
+let NativeFullWindowOverlay: React.ComponentType<View>;
 
 const ScreensNativeModules = {
   get NativeScreen() {
@@ -112,6 +113,12 @@ const ScreensNativeModules = {
     NativeSearchBar = NativeSearchBar || requireNativeComponent('RNSSearchBar');
     return NativeSearchBar;
   },
+
+  get NativeFullWindowOverlay() {
+    NativeFullWindowOverlay =
+      NativeFullWindowOverlay || requireNativeComponent('RNSFullWindowOverlay');
+    return NativeFullWindowOverlay;
+  },
 };
 
 class Screen extends React.Component<ScreenProps> {
@@ -347,6 +354,14 @@ 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 4d38fb7946..bfc14fe73c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -62,6 +62,8 @@ export const NativeScreenNavigationContainer: React.ComponentType<ScreenContaine
 
 export const ScreenStack: React.ComponentType<ScreenStackProps> = View;
 
+export const FullWindowOverlay = View;
+
 export const ScreenStackHeaderBackButtonImage = (
   props: ImageProps
 ): JSX.Element => (