V2 overlays (#2510)

* overlay support

e2e/ScreenStack.test.js

@@ -59,4 +59,30 @@ describe('screen stack', () => {
     await elementById(testIDs.SWITCH_FIRST_TAB_BUTTON).tap();
     await expect(elementByLabel('This is tab 1')).toBeVisible();
   });
+
+  it('show and dismiss overlay', async () => {
+    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
+    await elementById(testIDs.SHOW_OVERLAY_BUTTON).tap();
+    await expect(elementById(testIDs.DIALOG_HEADER)).toBeVisible();
+    await elementById(testIDs.OK_BUTTON).tap();
+    await expect(elementById(testIDs.DIALOG_HEADER)).toBeNotVisible();
+  });
+
+  it('overlay pass touches - true', async () => {
+    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
+    await elementById(testIDs.SHOW_TOUCH_THROUGH_OVERLAY_BUTTON).tap();
+    await expect(elementById(testIDs.DIALOG_HEADER)).toBeVisible();
+    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
+    await elementById(testIDs.HIDE_TOP_BAR_BUTTON).tap();
+    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeNotVisible();
+  });
+
+  it('overlay pass touches - false', async () => {
+    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
+    await elementById(testIDs.SHOW_OVERLAY_BUTTON).tap();
+    await expect(elementById(testIDs.DIALOG_HEADER)).toBeVisible();
+    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
+    await elementById(testIDs.HIDE_TOP_BAR_BUTTON).tap();
+    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
+  });
 });

lib/ios/RNNBridgeModule.m

@@ -78,5 +78,17 @@ RCT_EXPORT_METHOD(dismissAllModals:(RCTPromiseResolveBlock)resolve rejecter:(RCT
 	}];
 }
 
+RCT_EXPORT_METHOD(showOverlay:(NSDictionary*)layout resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) {
+	[_commandsHandler showOverlay:layout completion:^{
+		resolve(layout[@"id"]);
+	}];
+}
+
+RCT_EXPORT_METHOD(dismissOverlay:(NSString*)componentId resolve:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) {
+	[_commandsHandler dismissOverlay:componentId completion:^{
+		resolve(@(1));
+	}];
+}
+
 @end
 

lib/ios/RNNCommandsHandler.h

@@ -28,4 +28,8 @@
 
 -(void) dismissAllModalsWithCompletion:(RNNTransitionCompletionBlock)completion;
 
+-(void)showOverlay:(NSDictionary *)layout completion:(RNNTransitionCompletionBlock)completion;
+
+-(void)dismissOverlay:(NSString*)componentId completion:(RNNTransitionCompletionBlock)completion;
+
 @end

lib/ios/RNNCommandsHandler.m

@@ -1,6 +1,7 @@
 #import "RNNCommandsHandler.h"
 #import "RNNModalManager.h"
 #import "RNNNavigationStackManager.h"
+#import "RNNOverlayManager.h"
 #import "RNNNavigationOptions.h"
 #import "RNNRootViewController.h"
 #import "React/RCTUIManager.h"
@@ -10,6 +11,7 @@
 	RNNStore *_store;
 	RNNNavigationStackManager* _navigationStackManager;
 	RNNModalManager* _modalManager;
+	RNNOverlayManager* _overlayManager;
 }
 
 -(instancetype) initWithStore:(RNNStore*)store controllerFactory:(RNNControllerFactory*)controllerFactory {
@@ -18,6 +20,7 @@
 	_controllerFactory = controllerFactory;
 	_navigationStackManager = [[RNNNavigationStackManager alloc] initWithStore:_store];
 	_modalManager = [[RNNModalManager alloc] initWithStore:_store];
+	_overlayManager = [[RNNOverlayManager alloc] init];
 	return self;
 }
 
@@ -128,6 +131,17 @@
 	[CATransaction commit];
 }
 
+-(void)showOverlay:(NSDictionary *)layout completion:(RNNTransitionCompletionBlock)completion {
+	[self assertReady];
+	UIViewController* overlayVC = [_controllerFactory createOverlay:layout];
+	[_overlayManager showOverlay:overlayVC completion:completion];
+}
+
+- (void)dismissOverlay:(NSString*)componentId completion:(RNNTransitionCompletionBlock)completion {
+	[self assertReady];
+	[_overlayManager dismissOverlay:componentId completion:completion];
+}
+
 #pragma mark - private
 
 -(void) assertReady {

lib/ios/RNNControllerFactory.h

@@ -15,6 +15,9 @@
 
 -(UIViewController<RNNRootViewProtocol> *)createLayoutAndSaveToStore:(NSDictionary*)layout;
 
+-(UIViewController *)createOverlay:(NSDictionary*)layout;
+
 @property (nonatomic, strong) RNNNavigationOptions* defaultOptions;
 
+
 @end

lib/ios/RNNControllerFactory.m

@@ -162,6 +162,17 @@
 	return sideMenuChild;
 }
 
-
+- (UIViewController *)createOverlay:(NSDictionary*)layout {
+	UIViewController *vc = [self fromTree:layout];
+	NSDictionary* options = layout[@"data"][@"options"];
+	RCTRootView* rootView = (RCTRootView*)vc.view;
+	rootView.passThroughTouches = ![options[@"interceptTouches"] boolValue];
+	rootView.backgroundColor = [UIColor clearColor];
+	CGSize availableSize = UIApplication.sharedApplication.delegate.window.bounds.size;
+	rootView.frame = CGRectMake(0, 0, availableSize.width, availableSize.height);
+	[_bridge.uiManager setAvailableSize:availableSize forRootView:vc.view];
+	
+	return vc;
+}
 
 @end

lib/ios/RNNOverlayManager.h

@@ -0,0 +1,10 @@
+#import <Foundation/Foundation.h>
+#import <UIKit/UIKit.h>
+#import "RNNStore.h"
+
+@interface RNNOverlayManager : NSObject
+
+- (void)showOverlay:(UIViewController*)viewController completion:(RNNTransitionCompletionBlock)completion;
+- (void)dismissOverlay:(NSString*)componentId completion:(RNNTransitionCompletionBlock)completion;
+
+@end

lib/ios/RNNOverlayManager.m

@@ -0,0 +1,38 @@
+#import "RNNOverlayManager.h"
+
+@implementation RNNOverlayManager {
+	NSMutableDictionary* _overlayDict;
+}
+
+- (instancetype)init {
+	self = [super init];
+	_overlayDict = [[NSMutableDictionary alloc] init];
+	return self;
+}
+
+#pragma mark - public
+
+- (void)showOverlay:(RNNRootViewController *)viewController completion:(RNNTransitionCompletionBlock)completion {
+	[self cacheOverlay:viewController];
+	[[[UIApplication sharedApplication] keyWindow] addSubview:viewController.view];
+	completion();
+}
+
+- (void)dismissOverlay:(NSString*)componentId completion:(RNNTransitionCompletionBlock)completion {
+	RNNRootViewController* viewController = [_overlayDict objectForKey:componentId];
+	[self removeCachedOverlay:viewController];
+	completion();
+}
+
+#pragma mark - private
+
+- (void)cacheOverlay:(RNNRootViewController*)viewController {
+	[_overlayDict setObject:viewController forKey:viewController.componentId];
+}
+
+- (void)removeCachedOverlay:(RNNRootViewController*)viewController {
+	[viewController.view removeFromSuperview];
+	[_overlayDict removeObjectForKey:viewController.componentId];
+}
+
+@end

lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

@@ -76,6 +76,8 @@
 		507F44201FFA8A8800D9425B /* RNNRootViewProtocol.h in Headers */ = {isa = PBXBuildFile; fileRef = 507F441F1FFA8A8800D9425B /* RNNRootViewProtocol.h */; };
 		50CB3B691FDE911400AA153B /* RNNSideMenuOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 50CB3B671FDE911400AA153B /* RNNSideMenuOptions.h */; };
 		50CB3B6A1FDE911400AA153B /* RNNSideMenuOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 50CB3B681FDE911400AA153B /* RNNSideMenuOptions.m */; };
+		50D031342005149000386B3D /* RNNOverlayManager.h in Headers */ = {isa = PBXBuildFile; fileRef = 50D031322005149000386B3D /* RNNOverlayManager.h */; };
+		50D031352005149000386B3D /* RNNOverlayManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 50D031332005149000386B3D /* RNNOverlayManager.m */; };
 		50EB93421FE14A3E00BD8EEE /* RNNBottomTabOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 50EB93401FE14A3E00BD8EEE /* RNNBottomTabOptions.m */; };
 		50F5DFC11F407A8C001A00BC /* RNNTabBarController.h in Headers */ = {isa = PBXBuildFile; fileRef = 50F5DFBF1F407A8C001A00BC /* RNNTabBarController.h */; };
 		50F5DFC21F407A8C001A00BC /* RNNTabBarController.m in Sources */ = {isa = PBXBuildFile; fileRef = 50F5DFC01F407A8C001A00BC /* RNNTabBarController.m */; };
@@ -240,6 +242,8 @@
 		507F441F1FFA8A8800D9425B /* RNNRootViewProtocol.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNRootViewProtocol.h; sourceTree = "<group>"; };
 		50CB3B671FDE911400AA153B /* RNNSideMenuOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNSideMenuOptions.h; sourceTree = "<group>"; };
 		50CB3B681FDE911400AA153B /* RNNSideMenuOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNSideMenuOptions.m; sourceTree = "<group>"; };
+		50D031322005149000386B3D /* RNNOverlayManager.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNOverlayManager.h; sourceTree = "<group>"; };
+		50D031332005149000386B3D /* RNNOverlayManager.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNOverlayManager.m; sourceTree = "<group>"; };
 		50EB933F1FE14A3E00BD8EEE /* RNNBottomTabOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNBottomTabOptions.h; sourceTree = "<group>"; };
 		50EB93401FE14A3E00BD8EEE /* RNNBottomTabOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNBottomTabOptions.m; sourceTree = "<group>"; };
 		50F5DFBF1F407A8C001A00BC /* RNNTabBarController.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNTabBarController.h; sourceTree = "<group>"; };
@@ -459,16 +463,26 @@
 			name = HMSegmentControl;
 			sourceTree = "<group>";
 		};
-		7B1E4C4B1E2D173700C3A525 /* Controllers */ = {
+		50D031312005146C00386B3D /* Managers */ = {
 			isa = PBXGroup;
 			children = (
-				E8AEDB471F584175000F5A6A /* Components */,
-				E8AEDB461F58414D000F5A6A /* Animations */,
-				504AFE611FFE52EF0076E904 /* Options */,
 				261F0E621E6EC94900989DE2 /* RNNModalManager.h */,
 				261F0E631E6EC94900989DE2 /* RNNModalManager.m */,
 				261F0E681E6F028A00989DE2 /* RNNNavigationStackManager.h */,
 				261F0E691E6F028A00989DE2 /* RNNNavigationStackManager.m */,
+				50D031322005149000386B3D /* RNNOverlayManager.h */,
+				50D031332005149000386B3D /* RNNOverlayManager.m */,
+			);
+			name = Managers;
+			sourceTree = "<group>";
+		};
+		7B1E4C4B1E2D173700C3A525 /* Controllers */ = {
+			isa = PBXGroup;
+			children = (
+				E8AEDB471F584175000F5A6A /* Components */,
+				E8AEDB461F58414D000F5A6A /* Animations */,
+				504AFE611FFE52EF0076E904 /* Options */,
+				50D031312005146C00386B3D /* Managers */,
 				26916C941E4B9CCC00D13680 /* RNNRootViewCreator.h */,
 				26916C961E4B9E7700D13680 /* RNNReactRootViewCreator.h */,
 				26916C971E4B9E7700D13680 /* RNNReactRootViewCreator.m */,
@@ -668,6 +682,7 @@
 				E8DA24401F97459B00CD552B /* RNNElementFinder.h in Headers */,
 				263905BE1E4C6F440023D7D3 /* RCCTheSideBarManagerViewController.h in Headers */,
 				263905CE1E4C6F440023D7D3 /* TheSidebarController.h in Headers */,
+				50D031342005149000386B3D /* RNNOverlayManager.h in Headers */,
 				7B1126A71E2D2B6C00F9B03B /* RNNEventEmitter.h in Headers */,
 				E8A430111F9CB87B00B61A20 /* RNNAnimatedView.h in Headers */,
 				268692821E5054F800E2C612 /* RNNStore.h in Headers */,
@@ -850,6 +865,7 @@
 				268692831E5054F800E2C612 /* RNNStore.m in Sources */,
 				7BC9346E1E26886E00EFA125 /* RNNControllerFactory.m in Sources */,
 				507F43F91FF525B500D9425B /* RNNSegmentedControl.m in Sources */,
+				50D031352005149000386B3D /* RNNOverlayManager.m in Sources */,
 				E8E5182F1F83A48B000467AC /* RNNTransitionStateHolder.m in Sources */,
 				263905B61E4C6F440023D7D3 /* MMExampleDrawerVisualStateManager.m in Sources */,
 				E8E518331F83B3E0000467AC /* RNNUtils.m in Sources */,

lib/src/Navigation.js

@@ -119,18 +119,26 @@ class Navigation {
   }
 
   /**
-   * Obtain the events registery instance
+   * Show overlay on top of the window
+   * @param {*} params
    */
-  events() {
-    return this.publicEventsRegistry;
+  showOverlay(params) {
+    return this.commands.showOverlay(params);
   }
 
-  showOverlay(type, options) {
-    return this.commands.showOverlay(type, options);
+  /**
+   * dismiss overlay by componentId
+   * @param {string} componentId
+   */
+  dismissOverlay(componentId) {
+    return this.commands.dismissOverlay(componentId);
   }
 
-  dismissOverlay() {
-    return this.commands.dismissOverlay();
+  /**
+   * Obtain the events registery instance
+   */
+  events() {
+    return this.publicEventsRegistry;
   }
 }
 

lib/src/adapters/NativeCommandsSender.js

@@ -47,13 +47,12 @@ class NativeCommandsSender {
     return this.nativeCommandsModule.dismissAllModals();
   }
 
-  showOverlay(type, options) {
-    return this.nativeCommandsModule.showOverlay(type, options);
+  showOverlay(layout) {
+    return this.nativeCommandsModule.showOverlay(layout);
   }
 
-  dismissOverlay() {
-    this.nativeCommandsModule.dismissOverlay();
-    return Promise.resolve(true);
+  dismissOverlay(componentId) {
+    return this.nativeCommandsModule.dismissOverlay(componentId);
   }
 }
 

lib/src/commands/Commands.js

@@ -62,22 +62,18 @@ class Commands {
     return this.nativeCommandsSender.popToRoot(componentId);
   }
 
-  // showOverlay(type, options) {
-    // let promise;
-    // if (type === 'custom') {
-    //   const layout = this.layoutTreeParser.createDialogComponent({ name: options });
-    //   this.layoutTreeCrawler.crawl(layout);
-    //   promise = this.nativeCommandsSender.showOverlay(type, layout);
-    // } else {
-    //   const input = _.cloneDeep(options);
-    //   OptionsProcessor.processOptions(input);
-    //   promise = this.nativeCommandsSender.showOverlay(type, input);
-    // }
-    // return promise;
-  // }
-
-  dismissOverlay() {
-    return this.nativeCommandsSender.dismissOverlay();
+  showOverlay(componentData) {
+    const input = _.cloneDeep(componentData);
+    OptionsProcessor.processOptions(input);
+
+    const layout = this.layoutTreeParser.parse(input);
+    this.layoutTreeCrawler.crawl(layout);
+
+    return this.nativeCommandsSender.showOverlay(layout);
+  }
+
+  dismissOverlay(componentId) {
+    return this.nativeCommandsSender.dismissOverlay(componentId);
   }
 }
 

lib/src/commands/Commands.test.js

@@ -238,24 +238,50 @@ describe('Commands', () => {
     });
   });
 
-  xdescribe('showOverlay', () => {
+  describe('showOverlay', () => {
+    it('sends command to native after parsing into a correct layout tree', () => {
+      uut.showOverlay({
+        component: {
+          name: 'com.example.MyScreen'
+        }
+      });
+      expect(mockCommandsSender.showOverlay).toHaveBeenCalledTimes(1);
+      expect(mockCommandsSender.showOverlay).toHaveBeenCalledWith({
+        type: 'Component',
+        id: 'Component+UNIQUE_ID',
+        data: {
+          name: 'com.example.MyScreen',
+          options: {}
+        },
+        children: []
+      });
+    });
+
     it('deep clones input to avoid mutation errors', () => {
-      const obj = { title: 'test' };
-      uut.showOverlay('alert', obj);
-      expect(mockCommandsSender.showOverlay.mock.calls[0][1]).not.toBe(obj);
+      const obj = {};
+      uut.showOverlay({ component: { name: 'name', inner: obj } });
+      expect(mockCommandsSender.showOverlay.mock.calls[0][0].data.inner).not.toBe(obj);
     });
 
-    it('resolves with the parsed layout', async () => {
-      mockCommandsSender.showOverlay.mockReturnValue(Promise.resolve('result'));
-      const result = await uut.showOverlay('custom', 'com.example.MyScreen');
-      expect(result).toEqual('result');
+    it('resolves with the component id', async () => {
+      mockCommandsSender.showOverlay.mockReturnValue(Promise.resolve('Component1'));
+      const result = await uut.showOverlay({ component: { name: 'com.example.MyScreen' } });
+      expect(result).toEqual('Component1');
     });
   });
 
   describe('dismissOverlay', () => {
-    it('check promis returns true', () => {
-      uut.dismissOverlay();
+    it('check promise returns true', async () => {
+      mockCommandsSender.dismissOverlay.mockReturnValue(Promise.resolve(true));
+      const result = await uut.dismissOverlay('Component1');
+      expect(mockCommandsSender.dismissOverlay).toHaveBeenCalledTimes(1);
+      expect(result).toEqual(true);
+    });
+
+    it('send command to native with componentId', () => {
+      uut.dismissOverlay('Component1');
       expect(mockCommandsSender.dismissOverlay).toHaveBeenCalledTimes(1);
+      expect(mockCommandsSender.dismissOverlay).toHaveBeenCalledWith('Component1');
     });
   });
 });

playground/src/screens/CustomDialog.js

@@ -4,28 +4,34 @@ const { PureComponent } = require('react');
 const { View, Text, Button } = require('react-native');
 const Navigation = require('react-native-navigation');
 
+const testIDs = require('../testIDs');
+
 class CustomDialog extends PureComponent {
 
   render() {
     return (
       <View style={styles.root}>
-        <Text style={styles.h1}>Test view</Text>
-        <Button title="OK" onPress={this.onCLickOk} />
+        <Text style={styles.h1} testID={testIDs.DIALOG_HEADER}>Test view</Text>
+        <Button title="OK" testID={testIDs.OK_BUTTON} onPress={() => this.onCLickOk()} />
       </View>
     );
   }
 
   onCLickOk() {
-    Navigation.dismissOverlay();
+    Navigation.dismissOverlay(this.props.componentId);
   }
 }
 
 const styles = {
   root: {
-    flex: 1,
     backgroundColor: 'green',
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    height: 100,
+    bottom: 0,
+    position: 'absolute',
+    left: 0,
+    right: 0
   },
   h1: {
     fontSize: 24,

playground/src/screens/OptionsScreen.js

@@ -16,6 +16,7 @@ class OptionsScreen extends Component {
       topBar: {
         title: 'Static Title',
         textColor: 'black',
+        drawUnder: false,
         largeTitle: false,
         hidden: false,
         textFontSize: 16,
@@ -48,6 +49,7 @@ class OptionsScreen extends Component {
     this.onClickTopBarTransparent = this.onClickTopBarTransparent.bind(this);
     this.onClickTopBarOpaque = this.onClickTopBarOpaque.bind(this);
     this.onClickCustomTranstition = this.onClickCustomTranstition.bind(this);
+    this.onClickShowOverlay = this.onClickShowOverlay.bind(this);
     this.onClickPushDefaultOptionsScreen = this.onClickPushDefaultOptionsScreen.bind(this);
   }
 
@@ -64,6 +66,8 @@ class OptionsScreen extends Component {
         <Button title="Custom Transition" onPress={this.onClickCustomTranstition} />
         <Button title="Show custom alert" testID={testIDs.SHOW_CUSTOM_ALERT_BUTTON} onPress={this.onClickAlert} />
         <Button title="Show snackbar" testID={testIDs.SHOW_SNACKBAR_BUTTON} onPress={this.onClickSnackbar} />
+        <Button title="Show overlay" testID={testIDs.SHOW_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(true)} />
+        <Button title="Show touch through overlay" testID={testIDs.SHOW_TOUCH_THROUGH_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(false)} />
         <Button title="Push Default Options Screen" testID={testIDs.PUSH_DEFAULT_OPTIONS_BUTTON} onPress={this.onClickPushDefaultOptionsScreen} />
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>
@@ -190,6 +194,15 @@ class OptionsScreen extends Component {
     });
   }
 
+  onClickShowOverlay(interceptTouches) {
+    Navigation.showOverlay({
+      component: {
+        name: 'navigation.playground.CustomDialog',
+        options: { interceptTouches }
+      }
+    });
+  }
+
   onClickPushDefaultOptionsScreen() {
     Navigation.setDefaultOptions({
       topBar: {

playground/src/testIDs.js

@@ -46,6 +46,9 @@ module.exports = {
   SHOW_BOTTOM_TABS_BUTTON: `SHOW_BOTTOM_TABS_BUTTON`,
   FIRST_TAB_BAR_BUTTON: `FIRST_TAB_BAR_BUTTON`,
   SECOND_TAB_BAR_BUTTON: `SECOND_TAB_BAR_BUTTON`,
+  SHOW_OVERLAY_BUTTON: `SHOW_OVERLAY_BUTTON`,
+  SHOW_TOUCH_THROUGH_OVERLAY_BUTTON: `SHOW_TOUCH_THROUGH_OVERLAY_BUTTON`,
+  OK_BUTTON: `OK_BUTTON`,
 
   // Elements
   SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,
@@ -57,5 +60,6 @@ module.exports = {
   PUSHED_SCREEN_HEADER: `PUSHED_SCREEN_HEADER`,
   OPTIONS_SCREEN_HEADER: `OPTIONS_SCREEN_HEADER`,
   MODAL_SCREEN: `MODAL_SCREEN`,
-  CENTERED_TEXT_HEADER: `CENTERED_TEXT_HEADER`
+  CENTERED_TEXT_HEADER: `CENTERED_TEXT_HEADER`,
+  DIALOG_HEADER: `DIALOG_HEADER`
 };