Browse Source

Allow TopBar -> Background -> Clip To Bounds option (#3913)

** For iOS only
Seth H Rogers 6 years ago
parent
commit
a6413c132a

+ 1
- 0
docs/README.md View File

100
 | blur               |    ✅     |      [Contribute](/docs/WorkingLocally.md)       |
100
 | blur               |    ✅     |      [Contribute](/docs/WorkingLocally.md)       |
101
 | custom component          |✅     |✅|
101
 | custom component          |✅     |✅|
102
 | background component          |✅     |✅|
102
 | background component          |✅     |✅|
103
+| background clipToBounds      |    ✅     |     /iOS Specific       |
103
 | subtitleColor            |   ✅      |✅|
104
 | subtitleColor            |   ✅      |✅|
104
 | subtitleFontFamily      |✅|✅|
105
 | subtitleFontFamily      |✅|✅|
105
 | largeTitle (iOS 11)      |    ✅     |     /iOS Specific       |
106
 | largeTitle (iOS 11)      |    ✅     |     /iOS Specific       |

+ 14
- 0
docs/docs/options-migration.md View File

62
 }
62
 }
63
 ```
63
 ```
64
 
64
 
65
+## navBarClipToBounds
66
+Restrict the navbar background color to the navbar, and do not flow behind the status bar.
67
+
68
+```js
69
+topBar: {
70
+  background: {
71
+    component: {
72
+      name: 'example.CustomTopBarBackground',
73
+      clipToBounds: true
74
+    }
75
+  },
76
+}
77
+```
78
+
65
 ## navBarComponentAlignment
79
 ## navBarComponentAlignment
66
 Align the React view used as the title
80
 Align the React view used as the title
67
 
81
 

+ 1
- 0
lib/ios/RNNBackgroundOptions.h View File

5
 
5
 
6
 @property (nonatomic, strong) NSNumber* color;
6
 @property (nonatomic, strong) NSNumber* color;
7
 @property (nonatomic, strong) RNNComponentOptions* component;
7
 @property (nonatomic, strong) RNNComponentOptions* component;
8
+@property (nonatomic, strong) NSNumber* clipToBounds; 
8
 
9
 
9
 @end
10
 @end

+ 5
- 1
lib/ios/RNNRootViewController.m View File

192
 			
192
 			
193
 			_customTopBarBackground = [[RNNCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:@"fill"];
193
 			_customTopBarBackground = [[RNNCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:@"fill"];
194
 			[self.navigationController.navigationBar insertSubview:_customTopBarBackground atIndex:1];
194
 			[self.navigationController.navigationBar insertSubview:_customTopBarBackground atIndex:1];
195
-			self.navigationController.navigationBar.clipsToBounds = YES;
196
 		} else if (self.navigationController.navigationBar.subviews.count && [[self.navigationController.navigationBar.subviews objectAtIndex:1] isKindOfClass:[RNNCustomTitleView class]]) {
195
 		} else if (self.navigationController.navigationBar.subviews.count && [[self.navigationController.navigationBar.subviews objectAtIndex:1] isKindOfClass:[RNNCustomTitleView class]]) {
197
 			[[self.navigationController.navigationBar.subviews objectAtIndex:1] removeFromSuperview];
196
 			[[self.navigationController.navigationBar.subviews objectAtIndex:1] removeFromSuperview];
197
+		}
198
+		
199
+		if (self.options.topBar.background.clipToBounds) {
200
+			self.navigationController.navigationBar.clipsToBounds = YES;
201
+		} else {
198
 			self.navigationController.navigationBar.clipsToBounds = NO;
202
 			self.navigationController.navigationBar.clipsToBounds = NO;
199
 		}
203
 		}
200
 	} if (_customTopBarBackground && _customTopBarBackground.superview == nil) {
204
 	} if (_customTopBarBackground && _customTopBarBackground.superview == nil) {

+ 15
- 0
lib/ios/ReactNativeNavigationTests/RNNRootViewControllerTest.m View File

712
 	XCTAssertTrue([attributes[@"NSFont"] isEqual:expectedFont]);
712
 	XCTAssertTrue([attributes[@"NSFont"] isEqual:expectedFont]);
713
 }
713
 }
714
 
714
 
715
+- (void)testTopBarBackgroundClipToBounds_true {
716
+	self.options.topBar.background.clipToBounds = @(1);
717
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
718
+	[self.uut viewWillAppear:false];
719
+
720
+	XCTAssertTrue(self.uut.navigationController.navigationBar.clipsToBounds);
721
+}
722
+
723
+- (void)testTopBarBackgroundClipToBounds_false {
724
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
725
+	[self.uut viewWillAppear:false];
726
+
727
+	XCTAssertFalse(self.uut.navigationController.navigationBar.clipsToBounds);
728
+}
729
+
715
 @end
730
 @end

+ 5
- 0
lib/src/interfaces/Options.ts View File

184
    * Background color of the top bar
184
    * Background color of the top bar
185
    */
185
    */
186
   color?: Color;
186
   color?: Color;
187
+  /**
188
+   * Clip the top bar background to bounds if set to true.
189
+   * #### (iOS specific)
190
+   */
191
+  clipToBounds?: boolean;
187
   /**
192
   /**
188
    * Set a custom component for the Top Bar background
193
    * Set a custom component for the Top Bar background
189
    */
194
    */