V2 custom controller (#2784)

* custom viewController support

* native component support and e2e

* custom viewController support

* native component support and e2e

* unit test fix

e2e/ScreenStack.test.js

@@ -93,4 +93,10 @@ describe('screen stack', () => {
     await elementById(testIDs.POP_BUTTON).tap();
     await expect(elementByLabel('Screen 1')).toBeVisible();
   });
+
+  it(':ios: push native component with options', async () => {
+    await elementById(testIDs.PUSH_NATIVE_COMPONENT_BUTTON).tap();
+    await expect(elementById('TestLabel')).toBeVisible();
+    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
+  });
 });

lib/ios/RNNControllerFactory.m

@@ -43,8 +43,8 @@
 	
 	UIViewController<RNNRootViewProtocol> *result;
 	
-	if ( node.isComponent) {
-		result = [self createComponent:node];
+	if (node.isComponent) {
+		result = [self createComponent:node nativeComponent:NO];
 	}
 	
 	else if (node.isStack)	{
@@ -70,10 +70,15 @@
 	else if (node.isSideMenuLeft) {
 		result = [self createSideMenuChild:node type:RNNSideMenuChildTypeLeft];
 	}
+	
 	else if (node.isSideMenuRight) {
 		result = [self createSideMenuChild:node type:RNNSideMenuChildTypeRight];
 	}
 	
+	else if ( node.isNativeComponent) {
+		result = [self createComponent:node nativeComponent:YES];
+	}
+	
 	if (!result) {
 		@throw [NSException exceptionWithName:@"UnknownControllerType" reason:[@"Unknown controller type " stringByAppendingString:node.type] userInfo:nil];
 	}
@@ -83,15 +88,16 @@
 	return result;
 }
 
-- (UIViewController<RNNRootViewProtocol> *)createComponent:(RNNLayoutNode*)node {
+- (UIViewController<RNNRootViewProtocol> *)createComponent:(RNNLayoutNode*)node nativeComponent:(BOOL)nativeComponent {
 	NSString* name = node.data[@"name"];
 	RNNNavigationOptions* options = [[RNNNavigationOptions alloc] initWithDict:node.data[@"options"]];
 	options.defaultOptions = _defaultOptions;
 	NSString* componentId = node.nodeId;
-	RNNRootViewController* component = [[RNNRootViewController alloc] initWithName:name withOptions:options withComponentId:componentId rootViewCreator:_creator eventEmitter:_eventEmitter];
-	CGSize availableSize = UIApplication.sharedApplication.delegate.window.bounds.size;
-	[_bridge.uiManager setAvailableSize:availableSize forRootView:component.view];
-	
+	RNNRootViewController* component = [[RNNRootViewController alloc] initWithName:name withOptions:options withComponentId:componentId rootViewCreator:_creator eventEmitter:_eventEmitter isNativeComponent:nativeComponent];
+	if (!component.isCustomViewController) {
+		CGSize availableSize = UIApplication.sharedApplication.delegate.window.bounds.size;
+		[_bridge.uiManager setAvailableSize:availableSize forRootView:component.view];
+	}
 	return component;
 }
 

lib/ios/RNNCustomViewController.h

@@ -0,0 +1,5 @@
+#import <UIKit/UIKit.h>
+
+@interface RNNCustomViewController : UIViewController
+
+@end

lib/ios/RNNCustomViewController.m

@@ -0,0 +1,18 @@
+#import "RNNCustomViewController.h"
+
+@implementation RNNCustomViewController
+
+- (void)viewDidLoad {
+    [super viewDidLoad];
+	[self addTestLabel];
+}
+
+- (void)addTestLabel {
+	UILabel* label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
+	label.center = self.view.center;
+	label.text = @"Test label";
+	label.accessibilityIdentifier = @"TestLabel";
+	[self.view addSubview:label];
+}
+
+@end

lib/ios/RNNLayoutNode.h

@@ -12,6 +12,7 @@
 +(instancetype)create:(NSDictionary *)json;
 
 -(BOOL)isComponent;
+-(BOOL)isNativeComponent;
 -(BOOL)isStack;
 -(BOOL)isTabs;
 -(BOOL)isTopTabs;

lib/ios/RNNLayoutNode.m

@@ -17,6 +17,10 @@
 {
 	return [self.type isEqualToString:@"Component"];
 }
+-(BOOL)isNativeComponent
+{
+	return [self.type isEqualToString:@"NativeComponent"];
+}
 -(BOOL)isStack
 {
 	return [self.type isEqualToString:@"Stack"];

lib/ios/RNNNavigationStackManager.m

@@ -18,7 +18,11 @@ dispatch_queue_t RCTGetUIManagerQueue(void);
 -(void)push:(UIViewController<RNNRootViewProtocol> *)newTop onTop:(NSString *)componentId completion:(RNNTransitionCompletionBlock)completion {
 	UIViewController *vc = [_store findComponentForId:componentId];
 	[self preparePush:newTop onTopVC:vc completion:completion];
-	[self waitForContentToAppearAndThen:@selector(pushAfterLoad:)];
+	if ([newTop isCustomViewController]) {
+		[self pushAfterLoad:nil];
+	} else {
+		[self waitForContentToAppearAndThen:@selector(pushAfterLoad:)];
+	}
 }
 
 -(void)preparePush:(UIViewController<RNNRootViewProtocol> *)newTop onTopVC:(UIViewController*)vc completion:(RNNTransitionCompletionBlock)completion {

lib/ios/RNNRootViewController.h

@@ -22,7 +22,8 @@
 				withOptions:(RNNNavigationOptions*)options
 			withComponentId:(NSString*)componentId
 			rootViewCreator:(id<RNNRootViewCreator>)creator
-			   eventEmitter:(RNNEventEmitter*)eventEmitter;
+			   eventEmitter:(RNNEventEmitter*)eventEmitter
+		  isNativeComponent:(BOOL)isNativeComponent;
 
 
 -(void)applyTabBarItem;

lib/ios/RNNRootViewController.m

@@ -7,6 +7,7 @@
 @interface RNNRootViewController()
 @property (nonatomic, strong) NSString* componentName;
 @property (nonatomic) BOOL _statusBarHidden;
+@property (nonatomic) BOOL isNativeComponent;
 @end
 
 @implementation RNNRootViewController
@@ -15,7 +16,8 @@
 				withOptions:(RNNNavigationOptions*)options
 			withComponentId:(NSString*)componentId
 			rootViewCreator:(id<RNNRootViewCreator>)creator
-			   eventEmitter:(RNNEventEmitter*)eventEmitter {
+			   eventEmitter:(RNNEventEmitter*)eventEmitter
+		  isNativeComponent:(BOOL)isNativeComponent {
 	self = [super init];
 	self.componentId = componentId;
 	self.componentName = name;
@@ -23,7 +25,13 @@
 	self.eventEmitter = eventEmitter;
 	self.animator = [[RNNAnimator alloc] initWithTransitionOptions:self.options.customTransition];
 	self.creator = creator;
-	self.view = [creator createRootView:self.componentName rootViewId:self.componentId];
+	self.isNativeComponent = isNativeComponent;
+	
+	if (self.isNativeComponent) {
+		[self addExternalVC:name];
+	} else {
+		self.view = [creator createRootView:self.componentName rootViewId:self.componentId];
+	}
 	
 	[[NSNotificationCenter defaultCenter] addObserver:self
 											 selector:@selector(onJsReload)
@@ -90,6 +98,10 @@
 	return self.options.animated ? [self.options.animated boolValue] : YES;
 }
 
+- (BOOL)isCustomViewController {
+	return self.isNativeComponent;
+}
+
 - (BOOL)prefersStatusBarHidden {
 	if ([self.options.statusBarHidden boolValue]) {
 		return YES;
@@ -143,6 +155,28 @@
 	[self.options.topTab applyOn:self];
 }
 
+-(void)addExternalVC:(NSString*)className {
+	if (className != nil) {
+		Class class = NSClassFromString(className);
+		if (class != NULL) {
+			id obj = [[class alloc] init];
+			if (obj != nil && [obj isKindOfClass:[UIViewController class]]) {
+				UIViewController *viewController = (UIViewController*)obj;
+				[self addChildViewController:viewController];
+				self.view = [[UIView alloc] init];
+				self.view.backgroundColor = [UIColor whiteColor];
+				[self.view addSubview:viewController.view];
+			}
+			else {
+				NSLog(@"addExternalVC: could not create instance. Make sure that your class is a UIViewController whihc confirms to RCCExternalViewControllerProtocol");
+			}
+		}
+		else {
+			NSLog(@"addExternalVC: could not create class from string. Check that the proper class name wass passed in ExternalNativeScreenClass");
+		}
+	}
+}
+
 /**
  *	fix for #877, #878
  */

lib/ios/RNNRootViewProtocol.h

@@ -4,9 +4,9 @@
 
 @optional
 - (void)mergeOptions:(NSDictionary*)options;
+- (BOOL)isCustomViewController;
 
 @required
-
 - (BOOL)isCustomTransitioned;
 - (BOOL)isAnimated;
 

lib/ios/ReactNativeNavigationTests/RNNCommandsHandlerTest.m

@@ -68,7 +68,8 @@
 																withOptions:initialOptions
 															withComponentId:@"componentId"
 															rootViewCreator:[[RNNTestRootViewCreator alloc] init]
-															   eventEmitter:nil];
+															   eventEmitter:nil
+														  isNativeComponent:NO];
 	RNNNavigationController* nav = [[RNNNavigationController alloc] initWithRootViewController:vc];
 	[vc viewWillAppear:false];
 	XCTAssertTrue([vc.navigationItem.title isEqual:@"the title"]);

lib/ios/ReactNativeNavigationTests/RNNRootViewControllerTest.m

@@ -42,7 +42,7 @@
 	self.componentId = @"cntId";
 	self.emitter = nil;
 	self.options = [RNNNavigationOptions new];
-	self.uut = [[RNNRootViewController alloc] initWithName:self.pageName withOptions:self.options withComponentId:self.componentId rootViewCreator:self.creator eventEmitter:self.emitter];
+	self.uut = [[RNNRootViewController alloc] initWithName:self.pageName withOptions:self.options withComponentId:self.componentId rootViewCreator:self.creator eventEmitter:self.emitter isNativeComponent:NO];
 }
 
 -(void)testTopBarBackgroundColor_validColor{

lib/src/commands/LayoutTreeParser.test.ts

@@ -22,6 +22,14 @@ describe('LayoutTreeParser', () => {
       });
     });
 
+    it('native component', () => {
+      expect(uut.parse(LayoutExamples.nativeComponent)).toEqual({
+        type: LayoutType.NativeComponent,
+        data: { name: 'MyReactComponent', options: LayoutExamples.options, passProps: LayoutExamples.passProps },
+        children: []
+      });
+    });
+
     it('pass props', () => {
       const result = uut.parse({
         component: {
@@ -167,6 +175,14 @@ const singleComponent = {
   }
 };
 
+const nativeComponent = {
+  nativeComponent: {
+    name: 'MyReactComponent',
+    options,
+    passProps
+  }
+};
+
 const stackWithTopBar = {
   stack: {
     children: [
@@ -269,5 +285,6 @@ const LayoutExamples = {
   bottomTabs,
   sideMenu,
   topTabs,
-  complexLayout
+  complexLayout,
+  nativeComponent
 };

lib/src/commands/LayoutTreeParser.ts

@@ -18,6 +18,8 @@ export class LayoutTreeParser {
       return this._stack(api.stack);
     } else if (api.component) {
       return this._component(api.component);
+    } else if (api.nativeComponent) {
+      return this._nativeComponent(api.nativeComponent);
     }
     throw new Error(`unknown LayoutType "${_.keys(api)}"`);
   }
@@ -96,4 +98,13 @@ export class LayoutTreeParser {
       children: []
     };
   }
+
+  _nativeComponent(api): LayoutNode {
+    return {
+      id: api.id,
+      type: LayoutType.NativeComponent,
+      data: { name: api.name, options: api.options, passProps: api.passProps },
+      children: []
+    };
+  }
 }

lib/src/commands/LayoutType.ts

@@ -6,7 +6,8 @@ export enum LayoutType {
   SideMenuCenter = 'SideMenuCenter',
   SideMenuLeft = 'SideMenuLeft',
   SideMenuRight = 'SideMenuRight',
-  TopTabs = 'TopTabs'
+  TopTabs = 'TopTabs',
+  NativeComponent = 'NativeComponent'
 }
 
 export function isLayoutType(name: string): boolean {

playground/ios/playground.xcodeproj/project.pbxproj

@@ -11,6 +11,7 @@
 		13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
+		50451D35204451A900695F00 /* RNNCustomViewController.m in Sources */ = {isa = PBXBuildFile; fileRef = 50451D34204451A800695F00 /* RNNCustomViewController.m */; };
 		7B8F30491E84151300110AEC /* libcxxreact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 7B8F2FDE1E840F3600110AEC /* libcxxreact.a */; };
 		7B8F304A1E84151300110AEC /* libjschelpers.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 7B8F2FE21E840F3600110AEC /* libjschelpers.a */; };
 		7B8F304B1E84151300110AEC /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 7B8F2FFA1E8411A800110AEC /* libRCTActionSheet.a */; };
@@ -270,6 +271,8 @@
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = main.m; sourceTree = "<group>"; };
+		50451D33204451A800695F00 /* RNNCustomViewController.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = RNNCustomViewController.h; path = ../../../lib/ios/RNNCustomViewController.h; sourceTree = "<group>"; };
+		50451D34204451A800695F00 /* RNNCustomViewController.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = RNNCustomViewController.m; path = ../../../lib/ios/RNNCustomViewController.m; sourceTree = "<group>"; };
 		7B8F2FC41E840F1A00110AEC /* ReactNativeNavigation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = ReactNativeNavigation.xcodeproj; path = ../../lib/ios/ReactNativeNavigation.xcodeproj; sourceTree = "<group>"; };
 		7B8F2FCA1E840F3600110AEC /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../../node_modules/react-native/React/React.xcodeproj"; sourceTree = "<group>"; };
 		7B8F2FE51E840F6700110AEC /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = "<group>"; };
@@ -315,6 +318,8 @@
 			children = (
 				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
 				13B07FB01A68108700A75B9A /* AppDelegate.m */,
+				50451D33204451A800695F00 /* RNNCustomViewController.h */,
+				50451D34204451A800695F00 /* RNNCustomViewController.m */,
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
@@ -850,6 +855,7 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				50451D35204451A900695F00 /* RNNCustomViewController.m in Sources */,
 				13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
 				13B07FC11A68108700A75B9A /* main.m in Sources */,
 			);

playground/src/screens/WelcomeScreen.js

@@ -23,6 +23,7 @@ class WelcomeScreen extends Component {
     this.onClickShowModal = this.onClickShowModal.bind(this);
     this.onClickLifecycleScreen = this.onClickLifecycleScreen.bind(this);
     this.onClickPushOptionsScreen = this.onClickPushOptionsScreen.bind(this);
+    this.onClickPushNativeComponent = this.onClickPushNativeComponent.bind(this);
     this.onClickPushOrientationMenuScreen = this.onClickPushOrientationMenuScreen.bind(this);
     this.onClickBackHandler = this.onClickBackHandler.bind(this);
     this.onClickPushTopTabsScreen = this.onClickPushTopTabsScreen.bind(this);
@@ -40,6 +41,7 @@ class WelcomeScreen extends Component {
         <Button title='Static Lifecycle Events' testID={testIDs.PUSH_STATIC_LIFECYCLE_BUTTON} onPress={this.onClickShowStaticLifecycleOverlay} />
         <Button title='Push' testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
         <Button title='Push Options Screen' testID={testIDs.PUSH_OPTIONS_BUTTON} onPress={this.onClickPushOptionsScreen} />
+        <Button title='Push Native Component' testID={testIDs.PUSH_NATIVE_COMPONENT_BUTTON} onPress={this.onClickPushNativeComponent} />
         {Platform.OS === 'android' && <Button title='Push Top Tabs screen' testID={testIDs.PUSH_TOP_TABS_BUTTON} onPress={this.onClickPushTopTabsScreen} />}
         {Platform.OS === 'android' && <Button title='Back Handler' testID={testIDs.BACK_HANDLER_BUTTON} onPress={this.onClickBackHandler} />}
         <Button title='Show Modal' testID={testIDs.SHOW_MODAL_BUTTON} onPress={this.onClickShowModal} />
@@ -231,6 +233,21 @@ class WelcomeScreen extends Component {
     });
   }
 
+  async onClickPushNativeComponent() {
+    await Navigation.push(this.props.componentId, {
+      nativeComponent: {
+        name: 'RNNCustomViewController',
+        options: {
+          topBar: {
+            title: 'pushed',
+            visible: true,
+            testID: testIDs.TOP_BAR_ELEMENT
+          }
+        }
+      }
+    });
+  }
+
   onClickLifecycleScreen() {
     Navigation.push(this.props.componentId, {
       component: {

playground/src/testIDs.js

@@ -53,6 +53,7 @@ module.exports = {
   OK_BUTTON: `OK_BUTTON`,
   MODAL_WITH_STACK_BUTTON: `MODAL_WITH_STACK_BUTTON`,
   CUSTOM_TRANSITION_BUTTON: `CUSTOM_TRANSITION_BUTTON`,
+  PUSH_NATIVE_COMPONENT_BUTTON: `PUSH_NATIVE_COMPONENT_BUTTON`,
 
   // Elements
   SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,