Re: Now allowing the custom nav bar to take up the whole space on iOS (#2620)

* Add support for react-native 0.52.0

* Refactore a bit

1. Rename `DevCommandsHandlerProxy` to `DevHelperProxy` so it reflects the changes in RN. See d19afc73f5 .
2. Add few comments to show which code is used on `RN >= 0.52` and which on `RN <= 0.51`.

* Now allowing the custom nav bar to take up the whole space on iOS

The custom nav bar on iOS was really just a custom view applied to the title of the navigation bar.
There were problems with this approach, because the navigation bar messes up the frame of the title very frequently, especially when the orientation is changing. That behaviour is accepted when the title is a label, but not when we have a custom component.

With this pull request the custom nav bar component can take up the full width of the navigation bar, no matter what orientation we're at.

* Added mix of native btns and custom component on the Custom TopBar screen of the example project

example/src/screens/types/CustomTopBar.js

@@ -18,8 +18,8 @@ export default class CustomTopBar extends Component {
   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 style={styles.button} onPress={ () => Alert.alert(this.props.title, 'Hello custom btn :)') }>
+          <Text style={styles.text}>Custom</Text>
         </TouchableOpacity>
       </View>
     );
@@ -30,15 +30,16 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    // backgroundColor: 'yellow'
   },
   button: {
     alignSelf: 'center',
-    backgroundColor: 'green'
+    // backgroundColor: 'green'
   },
   text: {
     alignSelf: 'center',
-    color: Platform.OS === 'ios' ? 'black' : 'white'
+    color: 'white'
   }
 });
 

example/src/screens/types/CustomTopBarScreen.js

@@ -10,11 +10,41 @@ import CustomTopBar from './CustomTopBar';
 Navigation.registerComponent('example.CustomTopBar', () => CustomTopBar);
 
 export default class CustomTopBarScreen extends Component {
+
+  static navigatorButtons = {
+    leftButtons: [
+      {
+        title: 'Back',
+        id: 'helloBtn',
+      }
+    ],
+    rightButtons: [
+      {
+        title: 'Right',
+        id: 'helloBtn2',
+      }
+    ],
+  };
+
   componentDidMount() {
     this.props.navigator.setStyle({
       navBarCustomView: 'example.CustomTopBar',
       navBarComponentAlignment: 'center',
-      navBarCustomViewInitialProps: {title: 'Hi Custom'}
+      navBarCustomViewInitialProps: {
+        title: 'Hi Custom',
+        navigator: this.props.navigator,
+      },
+    });
+    this.props.navigator.setOnNavigatorEvent((e) => {
+      if (e.type == 'NavBarButtonPress') { // this is the event type for button presses
+        if (e.id == 'helloBtn') { // this is the same id field from the static navigatorButtons definition
+          this.props.navigator.pop();
+          // alert('Hello left btn');
+        }
+        if (e.id == 'helloBtn2') { // this is the same id field from the static navigatorButtons definition
+          alert('Hello right btn');
+        }
+      }
     });
   }
 

ios/RCCCustomTitleView.h

@@ -11,5 +11,6 @@
 @interface RCCCustomTitleView : UIView
 
 -(instancetype)initWithFrame:(CGRect)frame subView:(UIView*)subView alignment:(NSString*)alignment;
+- (void) viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator;
 
 @end

ios/RCCCustomTitleView.m

@@ -11,12 +11,14 @@
 @interface RCCCustomTitleView ()
 @property (nonatomic, strong) UIView *subView;
 @property (nonatomic, strong) NSString *subViewAlign;
+@property float initialWidth;
 @end
 
 @implementation RCCCustomTitleView
 
 
 -(instancetype)initWithFrame:(CGRect)frame subView:(UIView*)subView alignment:(NSString*)alignment {
+    _initialWidth = frame.size.width;
     self = [super initWithFrame:frame];
     
     if (self) {
@@ -52,4 +54,56 @@
     }
 }
 
+- (void)setFrame:(CGRect) frame {
+    float referenceWidth = [self statusBarWidth];
+    if (referenceWidth == 0) {
+        referenceWidth = _initialWidth;
+    }
+    float newNavBarWidth = frame.size.width;
+    BOOL frameNeedsToBeCorrected = newNavBarWidth < referenceWidth || CGRectEqualToRect(self.frame, CGRectZero);
+
+    if (frameNeedsToBeCorrected) {
+        // first we need to find out the total point diff of the status bar and the nav bar
+        float navBarHorizontalMargin = referenceWidth - newNavBarWidth;
+        
+        CGRect correctedFrame = frame;
+
+        // then we need to place the nav bar half times the horizontal margin to the left
+        correctedFrame.origin.x = -(navBarHorizontalMargin / 2);
+        
+        // and finally set the width so that it's equal to the status bar width
+        correctedFrame.size.width = referenceWidth;
+        
+        [super setFrame:correctedFrame];
+    } else if (frame.size.height != self.frame.size.height) { // otherwise
+        // if only the height has changed
+        CGRect newHeightFrame = self.frame;
+        // make sure we update just the height
+        newHeightFrame.size.height = frame.size.height;
+        [super setFrame:newHeightFrame];
+    }
+    
+    // keep a ref to the last frame, so that we avoid setting the frame twice for no reason
+//    _lastFrame = frame;
+}
+
+
+- (void) viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
+    // whenever the orientation changes this runs
+    // and sets the nav bar item width to the new size width
+    CGRect newFrame = self.frame;
+
+    if (newFrame.size.width < size.width) {
+        newFrame.size.width = size.width;
+        newFrame.origin.x = 0;
+    }
+    [super setFrame:newFrame];
+}
+
+-(float) statusBarWidth {
+    CGSize statusBarSize = [[UIApplication sharedApplication] statusBarFrame].size;
+    return MAX(statusBarSize.width, statusBarSize.height);
+}
+
+
 @end

ios/RCCViewController.m

@@ -643,14 +643,16 @@ const NSInteger TRANSPARENT_NAVBAR_TAG = 78264803;
       NSDictionary *initialProps = self.navigatorStyle[@"navBarCustomViewInitialProps"];
       RCTRootView *reactView = [[RCTRootView alloc] initWithBridge:bridge moduleName:navBarCustomView initialProperties:initialProps];
       
-      RCCCustomTitleView *titleView = [[RCCCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:self.navigatorStyle[@"navBarComponentAlignment"]];
+      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.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
       self.navigationItem.titleView.clipsToBounds = YES;
     }
   }
@@ -676,6 +678,14 @@ const NSInteger TRANSPARENT_NAVBAR_TAG = 78264803;
   #endif
 }
 
+- (void) viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
+  [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
+  RCCCustomTitleView* customNavBar = (RCCCustomTitleView*) self.navigationItem.titleView;
+  if (customNavBar && [customNavBar isKindOfClass:[RCCCustomTitleView class]]) {
+    [customNavBar viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
+  }
+}
+
 
 -(void)storeOriginalNavBarImages {