From a5b981dae5cd236e647704a2629551f42ed29493 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=92=9F=E5=8A=A0=E4=BB=81?= <zhongjiaren@shimo.im>
Date: Thu, 19 Sep 2019 17:11:59 +0800
Subject: [PATCH 1/5] feature: add popover support

---
 .../ScreensExample.xcodeproj/project.pbxproj  |  2 ++
 Example/nativeStack.js                        | 31 +++++++++++++++++--
 createNativeStackNavigator.js                 | 19 ++++++++++--
 3 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/Example/ios/ScreensExample.xcodeproj/project.pbxproj b/Example/ios/ScreensExample.xcodeproj/project.pbxproj
index f3aec24c47..09c9f5abda 100644
--- a/Example/ios/ScreensExample.xcodeproj/project.pbxproj
+++ b/Example/ios/ScreensExample.xcodeproj/project.pbxproj
@@ -975,6 +975,7 @@
 					"-lc++",
 				);
 				PRODUCT_NAME = ScreensExample;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Debug;
@@ -999,6 +1000,7 @@
 					"-lc++",
 				);
 				PRODUCT_NAME = ScreensExample;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Release;
diff --git a/Example/nativeStack.js b/Example/nativeStack.js
index e5aeb4c8a1..107a11437e 100644
--- a/Example/nativeStack.js
+++ b/Example/nativeStack.js
@@ -8,6 +8,7 @@ import {
   Image,
   Text,
   ToolbarAndroid,
+  Platform,
 } from 'react-native';
 import {
   Screen,
@@ -57,13 +58,35 @@ export class Stack extends Component {
     const active =
       index === stack.length - 1 ||
       (transitioning !== 0 && index === stack.length - 2);
+    let stackPresentation = 'transparentModal';
+    let popoverConfig = {};
+    if (key === 'cyan' && Platform.isPad) {
+      style = { flex: 1 };
+      stackPresentation = 'popover';
+      popoverConfig = {
+        popoverSourceViewNativeID: 'push:pink',
+        popoverSourceRect: {
+          x: 10,
+          y: 10,
+          width: 44,
+          height: 44,
+        },
+        popoverPermittedArrowDirections: ['up', 'down'],
+        preferredContentSize: {
+          width: 600,
+          height: 600,
+        },
+      };
+    }
     return (
       <Screen
         style={style}
         key={key}
         stackAnimation="fade"
         active={1}
-        onDismissed={() => this.removeByKey(key)}>
+        stackPresentation={stackPresentation}
+        onDismissed={() => this.removeByKey(key)}
+        {...popoverConfig}>
         <ScreenStackHeaderConfig title={key}>
           {/* {index === 0 && (
             <ScreenStackHeaderLeftView>
@@ -130,7 +153,11 @@ class App extends Component {
           }}
         />
         {pop && <Button title="Pop" onPress={pop} />}
-        {push && <Button title="Push" onPress={push} />}
+        {push && (
+          <View nativeID={`push:${key}`}>
+            <Button title="Push" onPress={push} />
+          </View>
+        )}
         {remove && <Button title="Remove middle screen" onPress={remove} />}
         <TextInput placeholder="Hello" style={styles.textInput} />
         <View style={{ height: 100, backgroundColor: 'red', width: '70%' }} />
diff --git a/createNativeStackNavigator.js b/createNativeStackNavigator.js
index 967874f87c..7177765ada 100644
--- a/createNativeStackNavigator.js
+++ b/createNativeStackNavigator.js
@@ -130,12 +130,23 @@ class StackView extends React.Component {
 
   _renderScene = (scene, scenes) => {
     const { navigation, getComponent } = scene.descriptor;
-    const { mode, transparentCard } = this.props.navigationConfig;
+    const {
+      mode,
+      transparentCard,
+      popoverSourceViewNativeID,
+      popoverSourceRect,
+      popoverPermittedArrowDirections,
+      preferredContentSize,
+    } = this.props.navigationConfig;
     const SceneComponent = getComponent();
 
-    let stackPresentation = 'push';
+    let stackPresentation;
     if (mode === 'modal') {
       stackPresentation = transparentCard ? 'transparentModal' : 'modal';
+    } else if (mode === 'popover') {
+      stackPresentation = mode;
+    } else {
+      stackPresentation = 'push';
     }
 
     const { screenProps } = this.props;
@@ -144,6 +155,10 @@ class StackView extends React.Component {
         key={`screen_${scene.key}`}
         style={StyleSheet.absoluteFill}
         stackPresentation={stackPresentation}
+        popoverSourceViewNativeID={popoverSourceViewNativeID}
+        popoverSourceRect={popoverSourceRect}
+        popoverPermittedArrowDirections={popoverPermittedArrowDirections}
+        preferredContentSize={preferredContentSize}
         onDismissed={() => this._removeScene(scene)}>
         {this._renderHeaderConfig(scene, scenes)}
         <SceneView

From 5aebbe3ca764b15eea4e0211dd19e841ba70aa03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=92=9F=E5=8A=A0=E4=BB=81?= <zhongjiaren@shimo.im>
Date: Thu, 19 Sep 2019 17:17:02 +0800
Subject: [PATCH 2/5] chore: fix popover display

---
 Example/nativeStack.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Example/nativeStack.js b/Example/nativeStack.js
index 107a11437e..0003e558db 100644
--- a/Example/nativeStack.js
+++ b/Example/nativeStack.js
@@ -61,7 +61,6 @@ export class Stack extends Component {
     let stackPresentation = 'transparentModal';
     let popoverConfig = {};
     if (key === 'cyan' && Platform.isPad) {
-      style = { flex: 1 };
       stackPresentation = 'popover';
       popoverConfig = {
         popoverSourceViewNativeID: 'push:pink',
@@ -77,6 +76,7 @@ export class Stack extends Component {
           height: 600,
         },
       };
+      style = popoverConfig.preferredContentSize;
     }
     return (
       <Screen

From e2a5d39c99446912eb66677b0816ad0f04d18254 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=92=9F=E5=8A=A0=E4=BB=81?= <zhongjiaren@shimo.im>
Date: Thu, 19 Sep 2019 17:24:25 +0800
Subject: [PATCH 3/5] chore: native code

---
 ios/RNSScreen.h      | 40 ++++++++++++++++++++++++++
 ios/RNSScreen.m      | 68 +++++++++++++++++++++++++++++++++++++++++---
 ios/RNSScreenStack.m | 39 +++++++++++++++++++++++--
 3 files changed, 140 insertions(+), 7 deletions(-)

diff --git a/ios/RNSScreen.h b/ios/RNSScreen.h
index d3115ad319..9dcf0baed6 100644
--- a/ios/RNSScreen.h
+++ b/ios/RNSScreen.h
@@ -9,6 +9,7 @@ typedef NS_ENUM(NSInteger, RNSScreenStackPresentation) {
   RNSScreenStackPresentationPush,
   RNSScreenStackPresentationModal,
   RNSScreenStackPresentationTransparentModal,
+  RNSScreenStackPresentationPopover,
 };
 
 typedef NS_ENUM(NSInteger, RNSScreenStackAnimation) {
@@ -36,6 +37,45 @@ typedef NS_ENUM(NSInteger, RNSScreenStackAnimation) {
 @property (nonatomic) RNSScreenStackAnimation stackAnimation;
 @property (nonatomic) RNSScreenStackPresentation stackPresentation;
 
+/**
+ nativeID for the native view containing the anchor rectangle for the popover.
+ 
+ @see https://developer.apple.com/documentation/uikit/uipopoverpresentationcontroller/1622313-sourceview
+ @see https://facebook.github.io/react-native/docs/view.html#nativeid
+ */
+@property (nullable, nonatomic, strong) NSString *popoverSourceViewNativeID;
+
+/**
+ The rectangle in the specified view in which to anchor the popover.
+ 
+ @example: {x: 0, y: 0, width: 44, height: 44}
+ @see https://developer.apple.com/documentation/uikit/uipopoverpresentationcontroller/1622324-sourcerect
+ */
+@property (nonatomic, assign) CGRect popoverSourceRect;
+
+/**
+ The arrow directions that you prefer for the popover.
+ 
+ up: UIPopoverArrowDirectionUp = 1UL << 0,
+ down: UIPopoverArrowDirectionDown = 1UL << 1,
+ left: UIPopoverArrowDirectionLeft = 1UL << 2,
+ right: UIPopoverArrowDirectionRight = 1UL << 3,
+ 
+ @default: [up, down, left, right]
+ @see https://developer.apple.com/documentation/uikit/uipopoverpresentationcontroller/1622319-permittedarrowdirections
+ */
+@property (nullable, nonatomic, strong) NSArray *popoverPermittedArrowDirections;
+
+/**
+ The preferred size for the view controller’s view.
+ 
+ @example: {width: 300, height: 500}
+ @see https://developer.apple.com/documentation/uikit/uiviewcontroller/1621476-preferredcontentsize
+ */
+@property (nonatomic, assign) CGSize preferredContentSize;
+
+@property (nonatomic, assign, readonly) UIPopoverArrowDirection realPopoverPermittedArrowDirections;
+
 - (void)notifyFinishTransitioning;
 
 @end
diff --git a/ios/RNSScreen.m b/ios/RNSScreen.m
index 939f43f9ca..a7f34ea8d6 100644
--- a/ios/RNSScreen.m
+++ b/ios/RNSScreen.m
@@ -5,6 +5,7 @@
 
 #import <React/RCTUIManager.h>
 #import <React/RCTShadowView.h>
+#import <React/RCTTouchHandler.h>
 
 @interface RNSScreenFrameData : NSObject
 @property (nonatomic, readonly) CGFloat rightInset;
@@ -40,10 +41,17 @@ - (void)notifyFinishTransitioning;
 
 @end
 
+@interface RNSScreenView()
+
+@property (nonatomic, assign) UIPopoverArrowDirection realPopoverPermittedArrowDirections;
+
+@end
+
 @implementation RNSScreenView {
   __weak RCTBridge *_bridge;
   RNSScreen *_controller;
   BOOL _invalidated;
+  NSMapTable *_touchHandlers;
 }
 
 @synthesize controller = _controller;
@@ -56,11 +64,32 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
     _controller.modalPresentationStyle = UIModalPresentationOverCurrentContext;
     _stackPresentation = RNSScreenStackPresentationPush;
     _stackAnimation = RNSScreenStackAnimationDefault;
+    _touchHandlers = [NSMapTable weakToStrongObjectsMapTable];
+    _realPopoverPermittedArrowDirections = UIPopoverArrowDirectionAny;
   }
-
   return self;
 }
 
+- (void)insertReactSubview:(UIView *)subview atIndex:(NSInteger)atIndex {
+  [super insertReactSubview:subview atIndex:atIndex];
+  
+  RCTTouchHandler *touchHandler = [_touchHandlers objectForKey:subview];
+  if (touchHandler == nil) {
+    touchHandler = [[RCTTouchHandler alloc] initWithBridge:_bridge];
+    [touchHandler attachToView:subview];
+    [_touchHandlers setObject:touchHandler forKey:subview];
+  }
+}
+
+- (void)removeReactSubview:(UIView *)subview {
+  [super removeReactSubview:subview];
+  RCTTouchHandler *touchHandler = [_touchHandlers objectForKey:subview];
+  if (touchHandler != nil) {
+    [touchHandler detachFromView:subview];
+    [_touchHandlers removeObjectForKey:subview];
+  }
+}
+
 - (void)updateBounds
 {
   CGFloat navbarOffset = 0;
@@ -77,6 +106,8 @@ - (void)updateBounds
    forView:self];
 }
 
+#pragma mark - Setter
+
 - (void)setActive:(BOOL)active
 {
   if (active != _active) {
@@ -101,7 +132,32 @@ - (void)setStackPresentation:(RNSScreenStackPresentation)stackPresentation
     case RNSScreenStackPresentationTransparentModal:
       _controller.modalPresentationStyle = UIModalPresentationOverCurrentContext;
       break;
+    case RNSScreenStackPresentationPopover:
+      _controller.modalPresentationStyle = UIModalPresentationPopover;
+      break;
+  }
+}
+
+- (void)setPopoverPermittedArrowDirections:(NSArray *)popoverPermittedArrowDirections
+{
+  if (popoverPermittedArrowDirections.count == 0 || [_popoverPermittedArrowDirections isEqualToArray:popoverPermittedArrowDirections]) {
+    return;
   }
+  _popoverPermittedArrowDirections = popoverPermittedArrowDirections;
+  
+  UIPopoverArrowDirection permittedArrowDirections = 0;
+  for (NSString *direction in popoverPermittedArrowDirections) {
+    if ([direction isEqualToString:@"up"]) {
+      permittedArrowDirections |= UIPopoverArrowDirectionUp;
+    } else if ([direction isEqualToString:@"down"]) {
+      permittedArrowDirections |= UIPopoverArrowDirectionDown;
+    } else if ([direction isEqualToString:@"left"]) {
+      permittedArrowDirections |= UIPopoverArrowDirectionLeft;
+    } else if ([direction isEqualToString:@"right"]) {
+      permittedArrowDirections |= UIPopoverArrowDirectionRight;
+    }
+  }
+  _realPopoverPermittedArrowDirections = permittedArrowDirections;
 }
 
 - (UIView *)reactSuperview
@@ -218,7 +274,11 @@ @implementation RNSScreenManager
 RCT_EXPORT_VIEW_PROPERTY(active, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(stackPresentation, RNSScreenStackPresentation)
 RCT_EXPORT_VIEW_PROPERTY(stackAnimation, RNSScreenStackAnimation)
-RCT_EXPORT_VIEW_PROPERTY(onDismissed, RCTDirectEventBlock);
+RCT_EXPORT_VIEW_PROPERTY(popoverSourceViewNativeID, NSString)
+RCT_EXPORT_VIEW_PROPERTY(popoverSourceRect, CGRect)
+RCT_EXPORT_VIEW_PROPERTY(popoverPermittedArrowDirections, NSArray)
+RCT_EXPORT_VIEW_PROPERTY(preferredContentSize, CGSize)
+RCT_EXPORT_VIEW_PROPERTY(onDismissed, RCTDirectEventBlock)
 
 - (UIView *)view
 {
@@ -237,7 +297,8 @@ @implementation RCTConvert (RNSScreen)
 RCT_ENUM_CONVERTER(RNSScreenStackPresentation, (@{
                                                   @"push": @(RNSScreenStackPresentationPush),
                                                   @"modal": @(RNSScreenStackPresentationModal),
-                                                  @"transparentModal": @(RNSScreenStackPresentationTransparentModal)
+                                                  @"transparentModal": @(RNSScreenStackPresentationTransparentModal),
+                                                  @"popover": @(RNSScreenStackPresentationPopover)
                                                   }), RNSScreenStackPresentationPush, integerValue)
 
 RCT_ENUM_CONVERTER(RNSScreenStackAnimation, (@{
@@ -246,5 +307,4 @@ @implementation RCTConvert (RNSScreen)
                                                   @"fade": @(RNSScreenStackAnimationFade)
                                                   }), RNSScreenStackAnimationDefault, integerValue)
 
-
 @end
diff --git a/ios/RNSScreenStack.m b/ios/RNSScreenStack.m
index 17c67f4407..85f7bbc34a 100644
--- a/ios/RNSScreenStack.m
+++ b/ios/RNSScreenStack.m
@@ -156,9 +156,9 @@ - (void)setModalViewControllers:(NSArray<UIViewController *> *)controllers
   for (UIViewController *newController in newControllers) {
     [_presentedModals addObject:newController];
     if (_controller.presentedViewController != nil) {
-      [_controller.presentedViewController presentViewController:newController animated:YES completion:nil];
+      [self presentViewController:newController parentViewController:_controller.presentedViewController animated:YES completion:nil];
     } else {
-      [_controller presentViewController:newController animated:YES completion:nil];
+      [self presentViewController:newController parentViewController:_controller animated:YES completion:nil];
     }
   }
 
@@ -170,7 +170,7 @@ - (void)setModalViewControllers:(NSArray<UIViewController *> *)controllers
       UIViewController *parent = controller.presentingViewController;
       [controller dismissViewControllerAnimated:NO completion:^{
         [parent dismissViewControllerAnimated:NO completion:^{
-          [parent presentViewController:restore animated:NO completion:nil];
+          [self presentViewController:restore parentViewController:parent animated:NO completion:nil];
         }];
       }];
     } else {
@@ -233,6 +233,7 @@ - (void)updateContainer
             break;
           case RNSScreenStackPresentationModal:
           case RNSScreenStackPresentationTransparentModal:
+          case RNSScreenStackPresentationPopover:
             [modalControllers addObject:screen.controller];
             break;
         }
@@ -251,6 +252,38 @@ - (void)layoutSubviews
   _controller.view.frame = self.bounds;
 }
 
+#pragma mark - private
+
+- (void)presentViewController:(UIViewController *)viewController parentViewController:(UIViewController *)parentViewController animated: (BOOL)flag completion:(void (^ __nullable)(void))completion {
+  if (viewController.modalPresentationStyle == UIModalPresentationPopover) {
+    RNSScreenView *screenView = (RNSScreenView *)viewController.view;
+    [self getSourceView:screenView completion:^(UIView *view) {
+      viewController.popoverPresentationController.sourceRect = screenView.popoverSourceRect;
+      viewController.popoverPresentationController.sourceView = view ?: parentViewController.view;
+      viewController.popoverPresentationController.permittedArrowDirections = screenView.realPopoverPermittedArrowDirections;
+      if (!CGSizeEqualToSize(CGSizeZero, screenView.preferredContentSize)) {
+        viewController.preferredContentSize = screenView.preferredContentSize;
+      }
+      [parentViewController presentViewController:viewController animated:flag completion:completion];
+    }];
+  } else {
+    [parentViewController presentViewController:viewController animated:flag completion:completion];
+  }
+}
+
+- (void)getSourceView:(RNSScreenView *)screenView completion:(void (^)(UIView *view))completion {
+  if (screenView.popoverSourceViewNativeID) {
+    __block NSString *nativeID = screenView.popoverSourceViewNativeID;
+    RCTUIManager *uiManager = _manager.bridge.uiManager;
+    [uiManager rootViewForReactTag:screenView.reactTag withCompletion:^(UIView *view) {
+      UIView *target = [uiManager viewForNativeID:nativeID withRootTag:view.reactTag];
+      completion(target);
+    }];
+  } else {
+    completion(nil);
+  }
+}
+
 @end
 
 @implementation RNSScreenStackManager

From 1917fb6eb00089b2660dba487aa8c6083444e163 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=92=9F=E5=8A=A0=E4=BB=81?= <zhongjiaren@shimo.im>
Date: Thu, 19 Sep 2019 17:35:11 +0800
Subject: [PATCH 4/5] chore: lint

---
 ios/RNSScreenStack.m | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ios/RNSScreenStack.m b/ios/RNSScreenStack.m
index 85f7bbc34a..5709f62f75 100644
--- a/ios/RNSScreenStack.m
+++ b/ios/RNSScreenStack.m
@@ -273,10 +273,9 @@ - (void)presentViewController:(UIViewController *)viewController parentViewContr
 
 - (void)getSourceView:(RNSScreenView *)screenView completion:(void (^)(UIView *view))completion {
   if (screenView.popoverSourceViewNativeID) {
-    __block NSString *nativeID = screenView.popoverSourceViewNativeID;
     RCTUIManager *uiManager = _manager.bridge.uiManager;
     [uiManager rootViewForReactTag:screenView.reactTag withCompletion:^(UIView *view) {
-      UIView *target = [uiManager viewForNativeID:nativeID withRootTag:view.reactTag];
+      UIView *target = [uiManager viewForNativeID:screenView.popoverSourceViewNativeID withRootTag:view.reactTag];
       completion(target);
     }];
   } else {

From ef01e86e465be8487357a85226f1b98b8a4e3d9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=92=9F=E5=8A=A0=E4=BB=81?= <zhongjiaren@shimo.im>
Date: Thu, 19 Sep 2019 18:44:29 +0800
Subject: [PATCH 5/5] fix: fix popover will not dismiss when reload project

---
 ios/RNSScreenStack.h |  4 ++--
 ios/RNSScreenStack.m | 28 ++++++++++++++++++++++++++--
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/ios/RNSScreenStack.h b/ios/RNSScreenStack.h
index 6e38d4d40e..f117614597 100644
--- a/ios/RNSScreenStack.h
+++ b/ios/RNSScreenStack.h
@@ -2,13 +2,13 @@
 #import <React/RCTUIManagerObserverCoordinator.h>
 #import "RNSScreenContainer.h"
 
-@interface RNSScreenStackView : UIView <RNSScreenContainerDelegate>
+@interface RNSScreenStackView : UIView <RNSScreenContainerDelegate, RCTInvalidating>
 
 - (void)markChildUpdated;
 - (void)didUpdateChildren;
 
 @end
 
-@interface RNSScreenStackManager : RCTViewManager
+@interface RNSScreenStackManager : RCTViewManager <RCTInvalidating>
 
 @end
diff --git a/ios/RNSScreenStack.m b/ios/RNSScreenStack.m
index 5709f62f75..940831bb9d 100644
--- a/ios/RNSScreenStack.m
+++ b/ios/RNSScreenStack.m
@@ -117,6 +117,14 @@ - (void)didUpdateChildren
   // do nothing
 }
 
+#pragma mark - RCTInvalidating
+
+- (void)invalidate {
+  [_reactSubviews removeAllObjects];
+  [_dismissedScreens removeAllObjects];
+  [self updateContainer];
+}
+
 - (void)insertReactSubview:(RNSScreenView *)subview atIndex:(NSInteger)atIndex
 {
   if (![subview isKindOfClass:[RNSScreenView class]]) {
@@ -285,7 +293,9 @@ - (void)getSourceView:(RNSScreenView *)screenView completion:(void (^)(UIView *v
 
 @end
 
-@implementation RNSScreenStackManager
+@implementation RNSScreenStackManager {
+  NSHashTable *_hostViews;
+}
 
 RCT_EXPORT_MODULE()
 
@@ -294,7 +304,21 @@ @implementation RNSScreenStackManager
 
 - (UIView *)view
 {
-  return [[RNSScreenStackView alloc] initWithManager:self];
+  RNSScreenStackView *view = [[RNSScreenStackView alloc] initWithManager:self];
+  if (!_hostViews) {
+    _hostViews = [NSHashTable weakObjectsHashTable];
+  }
+  [_hostViews addObject:view];
+  return view;
+}
+
+#pragma mark - RCTInvalidating
+
+- (void)invalidate {
+  for (RNSScreenStackView *hostView in _hostViews) {
+    [hostView invalidate];
+  }
+  [_hostViews removeAllObjects];
 }
 
 @end