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

** For iOS only

docs/README.md

@@ -100,6 +100,7 @@ v2 is written in Test Driven Development. We have a test for every feature inclu
 | blur               |    ✅     |      [Contribute](/docs/WorkingLocally.md)       |
 | custom component          |✅     |✅|
 | background component          |✅     |✅|
+| background clipToBounds      |    ✅     |     /iOS Specific       |
 | subtitleColor            |   ✅      |✅|
 | subtitleFontFamily      |✅|✅|
 | largeTitle (iOS 11)      |    ✅     |     /iOS Specific       |

docs/docs/options-migration.md

@@ -62,6 +62,20 @@ topBar: {
 }
 ```
 
+## navBarClipToBounds
+Restrict the navbar background color to the navbar, and do not flow behind the status bar.
+
+```js
+topBar: {
+  background: {
+    component: {
+      name: 'example.CustomTopBarBackground',
+      clipToBounds: true
+    }
+  },
+}
+```
+
 ## navBarComponentAlignment
 Align the React view used as the title
 

lib/ios/RNNBackgroundOptions.h

@@ -5,5 +5,6 @@
 
 @property (nonatomic, strong) NSNumber* color;
 @property (nonatomic, strong) RNNComponentOptions* component;
+@property (nonatomic, strong) NSNumber* clipToBounds; 
 
 @end

lib/ios/RNNRootViewController.m

@@ -192,9 +192,13 @@
 			
 			_customTopBarBackground = [[RNNCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:@"fill"];
 			[self.navigationController.navigationBar insertSubview:_customTopBarBackground atIndex:1];
-			self.navigationController.navigationBar.clipsToBounds = YES;
 		} else if (self.navigationController.navigationBar.subviews.count && [[self.navigationController.navigationBar.subviews objectAtIndex:1] isKindOfClass:[RNNCustomTitleView class]]) {
 			[[self.navigationController.navigationBar.subviews objectAtIndex:1] removeFromSuperview];
+		}
+		
+		if (self.options.topBar.background.clipToBounds) {
+			self.navigationController.navigationBar.clipsToBounds = YES;
+		} else {
 			self.navigationController.navigationBar.clipsToBounds = NO;
 		}
 	} if (_customTopBarBackground && _customTopBarBackground.superview == nil) {

lib/ios/ReactNativeNavigationTests/RNNRootViewControllerTest.m

@@ -712,4 +712,19 @@
 	XCTAssertTrue([attributes[@"NSFont"] isEqual:expectedFont]);
 }
 
+- (void)testTopBarBackgroundClipToBounds_true {
+	self.options.topBar.background.clipToBounds = @(1);
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+
+	XCTAssertTrue(self.uut.navigationController.navigationBar.clipsToBounds);
+}
+
+- (void)testTopBarBackgroundClipToBounds_false {
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+
+	XCTAssertFalse(self.uut.navigationController.navigationBar.clipsToBounds);
+}
+
 @end

lib/src/interfaces/Options.ts

@@ -184,6 +184,11 @@ export interface  OptionsTopBarBackground {
    * Background color of the top bar
    */
   color?: Color;
+  /**
+   * Clip the top bar background to bounds if set to true.
+   * #### (iOS specific)
+   */
+  clipToBounds?: boolean;
   /**
    * Set a custom component for the Top Bar background
    */