V2 custom top bar (#2632)

* custom titleView support

* custom navBar and titleView support

lib/ios/RNNCustomTitleView.h

@@ -0,0 +1,7 @@
+#import <UIKit/UIKit.h>
+
+@interface RNNCustomTitleView : UIView
+
+-(instancetype)initWithFrame:(CGRect)frame subView:(UIView*)subView alignment:(NSString*)alignment;
+
+@end

lib/ios/RNNCustomTitleView.m

@@ -0,0 +1,47 @@
+#import "RNNCustomTitleView.h"
+
+@interface RNNCustomTitleView ()
+@property (nonatomic, strong) UIView *subView;
+@property (nonatomic, strong) NSString *subViewAlign;
+@end
+
+@implementation RNNCustomTitleView
+
+
+-(instancetype)initWithFrame:(CGRect)frame subView:(UIView*)subView alignment:(NSString*)alignment {
+    self = [super initWithFrame:frame];
+    
+    if (self) {
+        self.backgroundColor = [UIColor clearColor];
+        self.subView = subView;
+        self.subViewAlign = alignment;
+        
+        subView.frame = self.bounds;
+        [self addSubview:subView];
+    }
+    
+    return self;
+}
+
+
+-(void)layoutSubviews {
+    [super layoutSubviews];
+    
+    if ([self.subViewAlign isEqualToString:@"fill"]) {
+        self.subView.frame = self.bounds;
+    }
+    else {
+        
+        CGFloat superViewWidth = self.superview.frame.size.width;
+        CGFloat paddingLeftFromCenter = (superViewWidth/2) - self.frame.origin.x;
+        CGFloat paddingRightFromCenter = self.frame.size.width - paddingLeftFromCenter;;
+        CGRect reactViewFrame = self.subView.bounds;
+        CGFloat minPadding = MIN(paddingLeftFromCenter, paddingRightFromCenter);
+        
+        reactViewFrame.size.width = minPadding*2;
+        reactViewFrame.origin.x = paddingLeftFromCenter - minPadding;
+        self.subView.frame = reactViewFrame;
+    }
+}
+
+@end

lib/ios/RNNRootViewController.m

@@ -2,11 +2,12 @@
 #import "RNNRootViewController.h"
 #import <React/RCTConvert.h>
 #import "RNNAnimator.h"
+#import "RNNCustomTitleView.h"
 
 @interface RNNRootViewController()
 @property (nonatomic, strong) NSString* componentName;
 @property (nonatomic) BOOL _statusBarHidden;
-
+@property (nonatomic) id<RNNRootViewCreator> creator;
 @end
 
 @implementation RNNRootViewController
@@ -22,6 +23,7 @@
 	self.options = options;
 	self.eventEmitter = eventEmitter;
 	self.animator = [[RNNAnimator alloc] initWithTransitionOptions:self.options.customTransition];
+	self.creator = creator;
 	self.view = [creator createRootView:self.componentName rootViewId:self.componentId];
 	
 	[[NSNotificationCenter defaultCenter] addObserver:self
@@ -37,6 +39,8 @@
 -(void)viewWillAppear:(BOOL)animated{
 	[super viewWillAppear:animated];
 	[self.options applyOn:self];
+	[self setCustomNavigationTitleView];
+	[self setCustomNavigationBarView];
 }
 
 -(void)viewDidAppear:(BOOL)animated {
@@ -57,6 +61,24 @@
 	[super viewDidLoad];
 }
 
+- (void)setCustomNavigationTitleView {
+	if (self.options.topBar.customTitleViewName) {
+		UIView *reactView = [_creator createRootView:self.options.topBar.customTitleViewName rootViewId:self.options.topBar.customTitleViewName];
+		
+		RNNCustomTitleView *titleView = [[RNNCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:nil];
+		self.navigationItem.titleView = titleView;
+	}
+}
+
+- (void)setCustomNavigationBarView {
+	if (self.options.topBar.customViewName) {
+		UIView *reactView = [_creator createRootView:self.options.topBar.customViewName rootViewId:@"navBar"];
+		
+		RNNCustomTitleView *titleView = [[RNNCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:nil];
+		[self.navigationController.navigationBar addSubview:titleView];
+	}
+}
+
 -(BOOL)isCustomTransitioned {
 	return self.options.customTransition != nil;
 }

lib/ios/RNNTopBarOptions.h

@@ -21,4 +21,7 @@
 @property (nonatomic, strong) NSNumber* largeTitle;
 @property (nonatomic, strong) NSString* testID;
 
+@property (nonatomic, strong) NSString* customTitleViewName;
+@property (nonatomic, strong) NSString* customViewName;
+
 @end

lib/ios/RNNTopBarOptions.m

@@ -1,5 +1,6 @@
 #import "RNNTopBarOptions.h"
 #import "RNNNavigationButtons.h"
+#import "RNNCustomTitleView.h"
 
 extern const NSInteger BLUR_TOPBAR_TAG;
 

lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

@@ -61,6 +61,8 @@
 		2DCD9196200014A900EDC75D /* RNNBridgeManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 2DCD9194200014A900EDC75D /* RNNBridgeManager.m */; };
 		390AD477200F499D00A8250D /* RNNSwizzles.h in Headers */ = {isa = PBXBuildFile; fileRef = 390AD475200F499D00A8250D /* RNNSwizzles.h */; };
 		390AD478200F499D00A8250D /* RNNSwizzles.m in Sources */ = {isa = PBXBuildFile; fileRef = 390AD476200F499D00A8250D /* RNNSwizzles.m */; };
+		5016E8EF20209690009D4F7C /* RNNCustomTitleView.h in Headers */ = {isa = PBXBuildFile; fileRef = 5016E8ED2020968F009D4F7C /* RNNCustomTitleView.h */; };
+		5016E8F020209690009D4F7C /* RNNCustomTitleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 5016E8EE2020968F009D4F7C /* RNNCustomTitleView.m */; };
 		5032774E2015E86D00ECD75D /* RNNNavigationEvent.h in Headers */ = {isa = PBXBuildFile; fileRef = 5032774C2015E86D00ECD75D /* RNNNavigationEvent.h */; };
 		5032774F2015E86D00ECD75D /* RNNNavigationEvent.m in Sources */ = {isa = PBXBuildFile; fileRef = 5032774D2015E86D00ECD75D /* RNNNavigationEvent.m */; };
 		503277602016302900ECD75D /* RNNComponentLifecycleEvent.h in Headers */ = {isa = PBXBuildFile; fileRef = 5032775E2016302900ECD75D /* RNNComponentLifecycleEvent.h */; };
@@ -238,6 +240,8 @@
 		2DCD9194200014A900EDC75D /* RNNBridgeManager.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNBridgeManager.m; sourceTree = "<group>"; };
 		390AD475200F499D00A8250D /* RNNSwizzles.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNSwizzles.h; sourceTree = "<group>"; };
 		390AD476200F499D00A8250D /* RNNSwizzles.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNSwizzles.m; sourceTree = "<group>"; };
+		5016E8ED2020968F009D4F7C /* RNNCustomTitleView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNCustomTitleView.h; sourceTree = "<group>"; };
+		5016E8EE2020968F009D4F7C /* RNNCustomTitleView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNCustomTitleView.m; sourceTree = "<group>"; };
 		5032774C2015E86D00ECD75D /* RNNNavigationEvent.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNNavigationEvent.h; sourceTree = "<group>"; };
 		5032774D2015E86D00ECD75D /* RNNNavigationEvent.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNNavigationEvent.m; sourceTree = "<group>"; };
 		5032775E2016302900ECD75D /* RNNComponentLifecycleEvent.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNComponentLifecycleEvent.h; sourceTree = "<group>"; };
@@ -657,6 +661,8 @@
 		E8AEDB471F584175000F5A6A /* Components */ = {
 			isa = PBXGroup;
 			children = (
+				5016E8ED2020968F009D4F7C /* RNNCustomTitleView.h */,
+				5016E8EE2020968F009D4F7C /* RNNCustomTitleView.m */,
 				E8A5CD601F49114F00E89D0D /* RNNElement.h */,
 				E8A5CD611F49114F00E89D0D /* RNNElement.m */,
 				E8AEDB3A1F55A1C2000F5A6A /* RNNElementView.h */,
@@ -694,6 +700,7 @@
 				50F5DFC11F407A8C001A00BC /* RNNTabBarController.h in Headers */,
 				50CB3B691FDE911400AA153B /* RNNSideMenuOptions.h in Headers */,
 				263905BD1E4C6F440023D7D3 /* RCCDrawerProtocol.h in Headers */,
+				5016E8EF20209690009D4F7C /* RNNCustomTitleView.h in Headers */,
 				263905C21E4C6F440023D7D3 /* SidebarAnimation.h in Headers */,
 				E8E518361F83B94A000467AC /* RNNViewLocation.h in Headers */,
 				263905B51E4C6F440023D7D3 /* MMExampleDrawerVisualStateManager.h in Headers */,
@@ -856,6 +863,7 @@
 				E8A5CD531F464F0400E89D0D /* RNNAnimator.m in Sources */,
 				50CB3B6A1FDE911400AA153B /* RNNSideMenuOptions.m in Sources */,
 				261F0E6B1E6F028A00989DE2 /* RNNNavigationStackManager.m in Sources */,
+				5016E8F020209690009D4F7C /* RNNCustomTitleView.m in Sources */,
 				E8DA24411F97459B00CD552B /* RNNElementFinder.m in Sources */,
 				263905BF1E4C6F440023D7D3 /* RCCTheSideBarManagerViewController.m in Sources */,
 				7B1126A01E2D263F00F9B03B /* RNNEventEmitter.m in Sources */,

playground/src/screens/CustomTopBar.js

@@ -0,0 +1,47 @@
+const React = require('react');
+const { Component } = require('react');
+const {
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  Text,
+  Alert,
+  Platform
+} = require('react-native');
+
+class CustomTopBar extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity stye={styles.button} onPress={() => Alert.alert(this.props.title, 'Thanks for that :)')}>
+          <Text style={styles.text}>Press Me</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+module.exports = CustomTopBar;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white'
+  },
+  button: {
+    alignSelf: 'center',
+    backgroundColor: 'green'
+  },
+  text: {
+    alignSelf: 'center',
+    color: Platform.OS === 'ios' ? 'black' : 'white'
+  }
+});

playground/src/screens/index.js

@@ -16,6 +16,7 @@ const BandHandlerScreen = require('./BackHandlerScreen');
 const SideMenuScreen = require('./SideMenuScreen');
 const TopTabScreen = require('./TopTabScreen');
 const TopTabOptionsScreen = require('./TopTabOptionsScreen');
+const CustomTopBar = require('./CustomTopBar');
 
 function registerScreens() {
   Navigation.registerComponent(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
@@ -35,6 +36,7 @@ function registerScreens() {
   Navigation.registerComponent('navigation.playground.SideMenuScreen', () => SideMenuScreen);
   Navigation.registerComponent('navigation.playground.TopTabScreen', () => TopTabScreen);
   Navigation.registerComponent('navigation.playground.TopTabOptionsScreen', () => TopTabOptionsScreen);
+  Navigation.registerComponent('navigation.playground.CustomTopBar', () => CustomTopBar);
 }
 
 module.exports = {