Browse Source

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

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

- Also the custom nav bar reacts well to orientation changes
- Fixes: https://github.com/wix/react-native-navigation/issues/1893

* It now works well on iOS 11 as well

* v1.1.314 [ci skip]

* Added optional fixedWidth property to the Android side menu

    - Fixes: https://github.com/wix/react-native-navigation/issues/510
Ioannis Kokkinidis 6 years ago
parent
commit
74a02ccfc5
3 changed files with 68 additions and 3 deletions
  1. 1
    1
      ios/RCCCustomTitleView.h
  2. 54
    0
      ios/RCCCustomTitleView.m
  3. 13
    2
      ios/RCCViewController.m

+ 1
- 1
ios/RCCCustomTitleView.h View File

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

+ 54
- 0
ios/RCCCustomTitleView.m View File

@@ -11,12 +11,14 @@
11 11
 @interface RCCCustomTitleView ()
12 12
 @property (nonatomic, strong) UIView *subView;
13 13
 @property (nonatomic, strong) NSString *subViewAlign;
14
+@property float initialWidth;
14 15
 @end
15 16
 
16 17
 @implementation RCCCustomTitleView
17 18
 
18 19
 
19 20
 -(instancetype)initWithFrame:(CGRect)frame subView:(UIView*)subView alignment:(NSString*)alignment {
21
+    _initialWidth = frame.size.width;
20 22
     self = [super initWithFrame:frame];
21 23
     
22 24
     if (self) {
@@ -52,4 +54,56 @@
52 54
     }
53 55
 }
54 56
 
57
+- (void)setFrame:(CGRect) frame {
58
+
59
+    float referenceWidth = [self statusBarWidth];
60
+    if (referenceWidth == 0) {
61
+        referenceWidth = _initialWidth;
62
+    }
63
+    float newNavBarWidth = frame.size.width;
64
+    BOOL frameNeedsToBeCorrected = newNavBarWidth < referenceWidth || CGRectEqualToRect(self.frame, CGRectZero);
65
+
66
+    if (frameNeedsToBeCorrected) {
67
+        // first we need to find out the total point diff of the status bar and the nav bar
68
+        float navBarHorizontalMargin = referenceWidth - newNavBarWidth;
69
+        
70
+        CGRect correctedFrame = frame;
71
+
72
+        // then we need to place the nav bar half times the horizontal margin to the left
73
+        correctedFrame.origin.x = -(navBarHorizontalMargin / 2);
74
+        
75
+        // and finally set the width so that it's equal to the status bar width
76
+        correctedFrame.size.width = referenceWidth;
77
+        
78
+        [super setFrame:correctedFrame];
79
+    } else if (frame.size.height != self.frame.size.height) { // otherwise
80
+        // if only the height has changed
81
+        CGRect newHeightFrame = self.frame;
82
+        // make sure we update just the height
83
+        newHeightFrame.size.height = frame.size.height;
84
+        [super setFrame:newHeightFrame];
85
+    }
86
+    
87
+    // keep a ref to the last frame, so that we avoid setting the frame twice for no reason
88
+//    _lastFrame = frame;
89
+}
90
+
91
+
92
+- (void) viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
93
+    // whenever the orientation changes this runs
94
+    // and sets the nav bar item width to the new size width
95
+    CGRect newFrame = self.frame;
96
+
97
+    if (newFrame.size.width < size.width) {
98
+        newFrame.size.width = size.width;
99
+        newFrame.origin.x = 0;
100
+    }
101
+    [super setFrame:newFrame];
102
+}
103
+
104
+-(float) statusBarWidth {
105
+    CGSize statusBarSize = [[UIApplication sharedApplication] statusBarFrame].size;
106
+    return MAX(statusBarSize.width, statusBarSize.height);
107
+}
108
+
55 109
 @end

+ 13
- 2
ios/RCCViewController.m View File

@@ -649,19 +649,30 @@ const NSInteger TRANSPARENT_NAVBAR_TAG = 78264803;
649 649
       NSDictionary *initialProps = self.navigatorStyle[@"navBarCustomViewInitialProps"];
650 650
       RCTRootView *reactView = [[RCTRootView alloc] initWithBridge:bridge moduleName:navBarCustomView initialProperties:initialProps];
651 651
       
652
-      RCCCustomTitleView *titleView = [[RCCCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:self.navigatorStyle[@"navBarComponentAlignment"]];
652
+      RCCCustomTitleView *titleView = [[RCCCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds
653
+                                                                        subView:reactView
654
+                                                                      alignment:self.navigatorStyle[@"navBarComponentAlignment"]];
653 655
       titleView.backgroundColor = [UIColor clearColor];
654 656
       reactView.backgroundColor = [UIColor clearColor];
655 657
       
658
+    
656 659
       self.navigationItem.titleView = titleView;
657 660
       
658 661
       self.navigationItem.titleView.backgroundColor = [UIColor clearColor];
659
-      self.navigationItem.titleView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
662
+      self.navigationItem.titleView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
660 663
       self.navigationItem.titleView.clipsToBounds = YES;
661 664
     }
662 665
   }
663 666
 }
664 667
 
668
+- (void) viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
669
+  [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
670
+  RCCCustomTitleView* customNavBar = (RCCCustomTitleView*) self.navigationItem.titleView;
671
+  if (customNavBar && [customNavBar isKindOfClass:[RCCCustomTitleView class]]) {
672
+    [customNavBar viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
673
+  }
674
+}
675
+
665 676
 
666 677
 -(void)storeOriginalNavBarImages {
667 678