iOS - Custom navigation bar view (#967)

Custom title view in navigation bar support in `navBarComponentAlignment:'fill' | 'center`

example/src/screens/CustomNavBar.js

@@ -0,0 +1,50 @@
+import React, {Component} from 'react';
+import {
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  Text,
+  Image
+} from 'react-native';
+
+
+export default class CustomNavBar extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity stye={styles.button} onPress={ () => alert('Thanks for that :)') }>
+          <Text style={{color: 'red', textAlign: 'center'}}>Hi Custom</Text>
+          <Text style={{textAlign: 'center'}}>Press Me</Text>
+        </TouchableOpacity>
+
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent'
+  },
+  button: {
+    textAlign: 'center',
+    fontSize: 22,
+    marginBottom: 10,
+    marginTop: 10,
+    color: 'blue',
+
+  }
+});
+
+
+

example/src/screens/CustomNavBarScreen.js

@@ -0,0 +1,43 @@
+import React, {Component} from 'react';
+import {
+  Text,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+  Button
+} from 'react-native';
+
+export default class CustomNavBarScreen extends Component {
+  static navigatorStyle = {
+    drawUnderTabBar: true,
+    navBarCustomView: 'example.CustomNavBar'
+  };
+
+
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+      </View>
+    );
+  }
+
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: 'white'
+  },
+  button: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginBottom: 10,
+    marginTop:10,
+    color: 'blue'
+  }
+});

example/src/screens/FirstTabScreen.js

@@ -34,7 +34,7 @@ export default class FirstTabScreen extends Component {
     statusBarTextColorScheme: 'light',
     tabBarBackgroundColor: '#4dbce9',
     tabBarButtonColor: '#ffffff',
-    tabBarSelectedButtonColor: '#ffff00'
+    tabBarSelectedButtonColor: '#ffff00',
   };
 
   constructor(props) {
@@ -69,6 +69,10 @@ export default class FirstTabScreen extends Component {
           <Text style={styles.button}>Push Styled Screen</Text>
         </TouchableOpacity>
 
+        <TouchableOpacity onPress={ this.onPushCustomNavBarScreen.bind(this) }>
+          <Text style={styles.button}>Push Custom Navigation Bar Screen</Text>
+        </TouchableOpacity>
+
         <TouchableOpacity onPress={ this.onModalPress.bind(this) }>
           <Text style={styles.button}>Show Modal Screen</Text>
         </TouchableOpacity>
@@ -142,6 +146,13 @@ export default class FirstTabScreen extends Component {
       }
     });
   }
+
+  onPushCustomNavBarScreen() {
+    this.props.navigator.push({
+      title: "Custom Nav Bar",
+      screen: "example.CustomNavBarScreen"
+    });
+  }
 }
 
 const styles = StyleSheet.create({

example/src/screens/index.ios.js

@@ -8,6 +8,9 @@ import SideMenu from './SideMenu';
 import ModalScreen from './ModalScreen';
 import NotificationScreen from './NotificationScreen';
 import LightBoxScreen from './LightBoxScreen';
+import CustomNavBarScreen from './CustomNavBarScreen';
+import CustomNavBar from './CustomNavBar';
+
 
 // register all screens of the app (including internal ones)
 export function registerScreens() {
@@ -19,4 +22,7 @@ export function registerScreens() {
   Navigation.registerComponent('example.NotificationScreen', () => NotificationScreen);
   Navigation.registerComponent('example.SideMenu', () => SideMenu);
   Navigation.registerComponent('example.LightBoxScreen', () => LightBoxScreen);
+
+  Navigation.registerComponent('example.CustomNavBarScreen', () => CustomNavBarScreen);
+  Navigation.registerComponent('example.CustomNavBar', () => CustomNavBar);
 }

ios/RCCCustomTitleView.h

@@ -0,0 +1,15 @@
+//
+//  RCCTitleView.h
+//  ReactNativeNavigation
+//
+//  Created by Ran Greenberg on 26/04/2017.
+//  Copyright © 2017 artal. All rights reserved.
+//
+
+#import <UIKit/UIKit.h>
+
+@interface RCCCustomTitleView : UIView
+
+-(instancetype)initWithFrame:(CGRect)frame subView:(UIView*)subView alignment:(NSString*)alignment;
+
+@end

ios/RCCCustomTitleView.m

@@ -0,0 +1,55 @@
+//
+//  RCCTitleView.m
+//  ReactNativeNavigation
+//
+//  Created by Ran Greenberg on 26/04/2017.
+//  Copyright © 2017 artal. All rights reserved.
+//
+
+#import "RCCCustomTitleView.h"
+
+@interface RCCCustomTitleView ()
+@property (nonatomic, strong) UIView *subView;
+@property (nonatomic, strong) NSString *subViewAlign;
+@end
+
+@implementation RCCCustomTitleView
+
+
+-(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

ios/RCCNavigationController.m

@@ -96,7 +96,9 @@ NSString const *CALLBACK_ASSOCIATED_ID = @"RCCNavigationController.CALLBACK_ASSO
       [mergedStyle removeObjectForKey:@"autoAdjustScrollViewInsets"];
       [mergedStyle removeObjectForKey:@"statusBarTextColorSchemeSingleScreen"];
       [mergedStyle removeObjectForKey:@"disabledBackGesture"];
-      
+      [mergedStyle removeObjectForKey:@"navBarCustomView"];
+      [mergedStyle removeObjectForKey:@"navBarComponentAlignment"];
+       
       [mergedStyle addEntriesFromDictionary:navigatorStyle];
       navigatorStyle = mergedStyle;
     }

ios/RCCViewController.m

@@ -10,6 +10,8 @@
 #import "RCCExternalViewControllerProtocol.h"
 #import "RCTHelpers.h"
 #import "RCCTitleViewHelper.h"
+#import "RCCCustomTitleView.h"
+
 
 NSString* const RCCViewControllerCancelReactTouchesNotification = @"RCCViewControllerCancelReactTouchesNotification";
 
@@ -236,7 +238,7 @@ const NSInteger TRANSPARENT_NAVBAR_TAG = 78264803;
   
   NSString *screenBackgroundColor = self.navigatorStyle[@"screenBackgroundColor"];
   if (screenBackgroundColor) {
-        
+    
     UIColor *color = screenBackgroundColor != (id)[NSNull null] ? [RCTConvert UIColor:screenBackgroundColor] : nil;
     viewController.view.backgroundColor = color;
   }
@@ -273,10 +275,10 @@ const NSInteger TRANSPARENT_NAVBAR_TAG = 78264803;
   NSMutableDictionary *rightNavButtonTextAttributes = [RCTHelpers textAttributesFromDictionary:self.navigatorStyle withPrefix:@"navBarRightButton"];
   
   if (
-    navButtonTextAttributes.allKeys.count > 0 ||
-    leftNavButtonTextAttributes.allKeys.count > 0 ||
-    rightNavButtonTextAttributes.allKeys.count > 0
-  ) {
+      navButtonTextAttributes.allKeys.count > 0 ||
+      leftNavButtonTextAttributes.allKeys.count > 0 ||
+      rightNavButtonTextAttributes.allKeys.count > 0
+      ) {
     
     for (UIBarButtonItem *item in viewController.navigationItem.leftBarButtonItems) {
       [item setTitleTextAttributes:navButtonTextAttributes forState:UIControlStateNormal];
@@ -482,8 +484,28 @@ const NSInteger TRANSPARENT_NAVBAR_TAG = 78264803;
   } else {
     self.navBarHairlineImageView.hidden = NO;
   }
+  
+  NSString *navBarCustomView = self.navigatorStyle[@"navBarCustomView"];
+  if (navBarCustomView && !self.navigationItem.titleView) {
+    if ([self.view isKindOfClass:[RCTRootView class]]) {
+      
+      RCTBridge *bridge = ((RCTRootView*)self.view).bridge;
+      RCTRootView *reactView = [[RCTRootView alloc] initWithBridge:bridge moduleName:navBarCustomView initialProperties:nil];
+      
+      RCCCustomTitleView *titleView = [[RCCCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:self.navigatorStyle[@"navBarComponentAlignment"]];
+      titleView.backgroundColor = [UIColor clearColor];
+      reactView.backgroundColor = [UIColor clearColor];
+    
+      self.navigationItem.titleView = titleView;
+      
+      self.navigationItem.titleView.backgroundColor = [UIColor clearColor];
+      self.navigationItem.titleView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
+      self.navigationItem.titleView.clipsToBounds = YES;
+    }
+  }  
 }
 
+
 -(void)storeOriginalNavBarImages {
   
   NSMutableDictionary *originalNavBarImages = [@{} mutableCopy];

ios/ReactNativeNavigation.xcodeproj/project.pbxproj

@@ -9,6 +9,7 @@
 /* Begin PBXBuildFile section */
 		260804DB1CE0D9D20094DBA1 /* RCCToolBar.m in Sources */ = {isa = PBXBuildFile; fileRef = 260804DA1CE0D9D20094DBA1 /* RCCToolBar.m */; };
 		261108801E6C495400BF5D98 /* UIViewController+Rotation.m in Sources */ = {isa = PBXBuildFile; fileRef = 2611087F1E6C495400BF5D98 /* UIViewController+Rotation.m */; };
+		26714EAC1EB0E9D3009F4D52 /* RCCCustomTitleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 26714EAB1EB0E9D3009F4D52 /* RCCCustomTitleView.m */; };
 		26AFF3F51D7EEE2400CBA211 /* RCCTitleViewHelper.m in Sources */ = {isa = PBXBuildFile; fileRef = 26AFF3F41D7EEE2400CBA211 /* RCCTitleViewHelper.m */; };
 		CC84A19E1C1A0C4E00B3A6A2 /* RCCManager.m in Sources */ = {isa = PBXBuildFile; fileRef = CC84A1941C1A0C4E00B3A6A2 /* RCCManager.m */; };
 		CC84A19F1C1A0C4E00B3A6A2 /* RCCManagerModule.m in Sources */ = {isa = PBXBuildFile; fileRef = CC84A1961C1A0C4E00B3A6A2 /* RCCManagerModule.m */; };
@@ -53,8 +54,10 @@
 		260804DA1CE0D9D20094DBA1 /* RCCToolBar.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCCToolBar.m; sourceTree = "<group>"; };
 		2611087E1E6C495400BF5D98 /* UIViewController+Rotation.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = "UIViewController+Rotation.h"; path = "../UIViewController+Rotation.h"; sourceTree = "<group>"; };
 		2611087F1E6C495400BF5D98 /* UIViewController+Rotation.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = "UIViewController+Rotation.m"; path = "../UIViewController+Rotation.m"; sourceTree = "<group>"; };
-		26AFF3F31D7EEE2400CBA211 /* RCCTitleViewHelper.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCCTitleViewHelper.h; sourceTree = "<group>"; };
-		26AFF3F41D7EEE2400CBA211 /* RCCTitleViewHelper.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCCTitleViewHelper.m; sourceTree = "<group>"; };
+		26714EAA1EB0E9D3009F4D52 /* RCCCustomTitleView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCCCustomTitleView.h; sourceTree = "<group>"; };
+		26714EAB1EB0E9D3009F4D52 /* RCCCustomTitleView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCCCustomTitleView.m; sourceTree = "<group>"; };
+		26AFF3F31D7EEE2400CBA211 /* RCCTitleViewHelper.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = RCCTitleViewHelper.h; path = Helpers/RCCTitleViewHelper.h; sourceTree = "<group>"; };
+		26AFF3F41D7EEE2400CBA211 /* RCCTitleViewHelper.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = RCCTitleViewHelper.m; path = Helpers/RCCTitleViewHelper.m; sourceTree = "<group>"; };
 		CC84A1931C1A0C4E00B3A6A2 /* RCCManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCCManager.h; sourceTree = "<group>"; };
 		CC84A1941C1A0C4E00B3A6A2 /* RCCManager.m */ = {isa = PBXFileReference; fileEncoding = 4; indentWidth = 2; lastKnownFileType = sourcecode.c.objc; path = RCCManager.m; sourceTree = "<group>"; tabWidth = 2; };
 		CC84A1951C1A0C4E00B3A6A2 /* RCCManagerModule.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCCManagerModule.h; sourceTree = "<group>"; };
@@ -82,7 +85,7 @@
 		D85082C61CBCF42400FDB961 /* UIViewController+MMDrawerController.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "UIViewController+MMDrawerController.h"; sourceTree = "<group>"; };
 		D85082C71CBCF42400FDB961 /* UIViewController+MMDrawerController.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = "UIViewController+MMDrawerController.m"; sourceTree = "<group>"; };
 		D85082C81CBCF42400FDB961 /* RCCDrawerController.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RCCDrawerController.h; sourceTree = "<group>"; };
-		D85082CA1CBCF54200FDB961 /* RCCDrawerHelper.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCCDrawerHelper.h; sourceTree = "<group>"; };
+		D85082CA1CBCF54200FDB961 /* RCCDrawerHelper.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = RCCDrawerHelper.h; path = ../RCCDrawerController/RCCDrawerHelper.h; sourceTree = "<group>"; };
 		D85082CB1CBCF54200FDB961 /* RCCDrawerHelper.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCCDrawerHelper.m; sourceTree = "<group>"; };
 		D85082CC1CBCF54200FDB961 /* RCCDrawerProtocol.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCCDrawerProtocol.h; sourceTree = "<group>"; };
 		D85082CD1CBCF54200FDB961 /* RCCTheSideBarManagerViewController.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCCTheSideBarManagerViewController.h; sourceTree = "<group>"; };
@@ -132,9 +135,8 @@
 		D85082BB1CBCF42400FDB961 /* RCCDrawerController */ = {
 			isa = PBXGroup;
 			children = (
-				D85082CF1CBCF54200FDB961 /* TheSidebarController */,
 				D85082BC1CBCF42400FDB961 /* MMDrawerController */,
-				D85082CA1CBCF54200FDB961 /* RCCDrawerHelper.h */,
+				D85082CF1CBCF54200FDB961 /* TheSidebarController */,
 				D85082CB1CBCF54200FDB961 /* RCCDrawerHelper.m */,
 				D85082CC1CBCF54200FDB961 /* RCCDrawerProtocol.h */,
 				D85082CD1CBCF54200FDB961 /* RCCTheSideBarManagerViewController.h */,
@@ -202,6 +204,10 @@
 				D85082BB1CBCF42400FDB961 /* RCCDrawerController */,
 				CC84A1931C1A0C4E00B3A6A2 /* RCCManager.h */,
 				CC84A1941C1A0C4E00B3A6A2 /* RCCManager.m */,
+				26714EAA1EB0E9D3009F4D52 /* RCCCustomTitleView.h */,
+				26714EAB1EB0E9D3009F4D52 /* RCCCustomTitleView.m */,
+				26AFF3F31D7EEE2400CBA211 /* RCCTitleViewHelper.h */,
+				26AFF3F41D7EEE2400CBA211 /* RCCTitleViewHelper.m */,
 				CC84A1951C1A0C4E00B3A6A2 /* RCCManagerModule.h */,
 				CC84A1961C1A0C4E00B3A6A2 /* RCCManagerModule.m */,
 				CC84A1971C1A0C4E00B3A6A2 /* RCCNavigationController.h */,
@@ -234,8 +240,7 @@
 				2611087F1E6C495400BF5D98 /* UIViewController+Rotation.m */,
 				D8D779961D04B7180050CFEA /* RCTHelpers.h */,
 				D8D779971D04B7180050CFEA /* RCTHelpers.m */,
-				26AFF3F31D7EEE2400CBA211 /* RCCTitleViewHelper.h */,
-				26AFF3F41D7EEE2400CBA211 /* RCCTitleViewHelper.m */,
+				D85082CA1CBCF54200FDB961 /* RCCDrawerHelper.h */,
 			);
 			path = Helpers;
 			sourceTree = "<group>";
@@ -306,6 +311,7 @@
 				D85082E31CBCF54200FDB961 /* SidebarAirbnbAnimation.m in Sources */,
 				D84813191C8C5EB700051BAF /* RCCLightBox.m in Sources */,
 				CC84A19E1C1A0C4E00B3A6A2 /* RCCManager.m in Sources */,
+				26714EAC1EB0E9D3009F4D52 /* RCCCustomTitleView.m in Sources */,
 				D85082E21CBCF54200FDB961 /* RCCTheSideBarManagerViewController.m in Sources */,
 				D85082FC1CBCF8A800FDB961 /* MMDrawerBarButtonItem.m in Sources */,
 				D85083001CBCF8A800FDB961 /* UIViewController+MMDrawerController.m in Sources */,