[BREAKING] Top bar options changes (#4040)

* Removed topBar.transparent and added transparent color support for topBar.background.color

* fix unit tests

docs/docs/options-migration.md

@@ -145,7 +145,9 @@ Transparent TopBar. Set `drawBehind: true` to draw the screen behind the transpa
 
 ```js
 topBar: {
-  transparent: true
+  background: {
+    color: 'transparent'
+  }
 }  
 ```
 
@@ -417,7 +419,9 @@ Translucent TopBar, Setting `drawBehind: true` is required for this property to
 
 ```js
 topBar: {
-  translucent: true
+  background: {
+    translucent: true
+  }
 }
 ```
 
@@ -435,7 +439,9 @@ Blue the area behind the TopBar, Setting `drawBehind: true` is required for this
 
 ```js
 topBar: {
-  blur: true
+  background: {
+    blur: true
+  }
 }  
 ```
 

docs/docs/styling.md

@@ -169,10 +169,11 @@ Navigation.mergeOptions(this.props.componentId, {
   rootBackgroundImage: require('rootBackground.png'),
   topBar: {
     barStyle: 'default' | 'black',
-    translucent: true,
-    transparent: false,
+    background: {
+      translucent: true,
+      blur: false
+    }
     noBorder: false,
-    blur: false,
     backButton: {
       title: 'Back',
       showTitle: false

lib/ios/RNNBackgroundOptions.h

@@ -4,6 +4,8 @@
 @interface RNNBackgroundOptions : RNNOptions
 
 @property (nonatomic, strong) NSNumber* color;
+@property (nonatomic, strong) NSNumber* translucent;
+@property (nonatomic, strong) NSNumber* blur;
 @property (nonatomic, strong) RNNComponentOptions* component;
 @property (nonatomic, strong) NSNumber* clipToBounds; 
 

lib/ios/RNNBackgroundOptions.m

@@ -1,12 +1,94 @@
 #import "RNNBackgroundOptions.h"
 
+extern const NSInteger BLUR_TOPBAR_TAG;
+const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
+
+@interface RNNBackgroundOptions()
+
+@property (nonatomic, strong) NSMutableDictionary* originalTopBarImages;
+
+@end
+
 @implementation RNNBackgroundOptions
 
 - (void)applyOnNavigationController:(UINavigationController *)navigationController {
+	if (self.translucent) {
+		navigationController.navigationBar.translucent = [self.translucent boolValue];
+	} else {
+		navigationController.navigationBar.translucent = NO;
+	}
+	
+	if ([self.blur boolValue]) {
+		if (![navigationController.navigationBar viewWithTag:BLUR_TOPBAR_TAG]) {
+
+			[navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
+			navigationController.navigationBar.shadowImage = [UIImage new];
+			UIVisualEffectView *blur = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
+			CGRect statusBarFrame = [[UIApplication sharedApplication] statusBarFrame];
+			blur.frame = CGRectMake(0, -1 * statusBarFrame.size.height, navigationController.navigationBar.frame.size.width, navigationController.navigationBar.frame.size.height + statusBarFrame.size.height);
+			blur.userInteractionEnabled = NO;
+			blur.tag = BLUR_TOPBAR_TAG;
+			[navigationController.navigationBar insertSubview:blur atIndex:0];
+			[navigationController.navigationBar sendSubviewToBack:blur];
+		}
+	} else {
+		UIView *blur = [navigationController.navigationBar viewWithTag:BLUR_TOPBAR_TAG];
+		if (blur) {
+			[navigationController.navigationBar setBackgroundImage: nil forBarMetrics:UIBarMetricsDefault];
+			navigationController.navigationBar.shadowImage = nil;
+			[blur removeFromSuperview];
+		}
+	}
+	
 	if (self.color && ![self.color isKindOfClass:[NSNull class]]) {
 		UIColor* backgroundColor = [RCTConvert UIColor:self.color];
-		navigationController.navigationBar.barTintColor = backgroundColor;
+
+		CGFloat bgColorAlpha = CGColorGetAlpha(backgroundColor.CGColor);
+
+		if (bgColorAlpha == 0.0) {
+			if (![navigationController.navigationBar viewWithTag:TOP_BAR_TRANSPARENT_TAG]){
+				[self storeOriginalTopBarImages:navigationController];
+				UIView *transparentView = [[UIView alloc] initWithFrame:CGRectZero];
+				transparentView.backgroundColor = [UIColor clearColor];
+				transparentView.tag = TOP_BAR_TRANSPARENT_TAG;
+				[navigationController.navigationBar insertSubview:transparentView atIndex:0];
+			}
+			navigationController.navigationBar.translucent = YES;
+			[navigationController.navigationBar setBackgroundColor:[UIColor clearColor]];
+			navigationController.navigationBar.shadowImage = [UIImage new];
+			[navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
+		} else {
+			navigationController.navigationBar.barTintColor = backgroundColor;
+			UIView *transparentView = [navigationController.navigationBar viewWithTag:TOP_BAR_TRANSPARENT_TAG];
+			if (transparentView){
+				[transparentView removeFromSuperview];
+				[navigationController.navigationBar setBackgroundImage:self.originalTopBarImages[@"backgroundImage"] forBarMetrics:UIBarMetricsDefault];
+				navigationController.navigationBar.shadowImage = self.originalTopBarImages[@"shadowImage"];
+				self.originalTopBarImages = nil;
+			}
+		}
+	} else {
+		UIView *transparentView = [navigationController.navigationBar viewWithTag:TOP_BAR_TRANSPARENT_TAG];
+		if (transparentView){
+			[transparentView removeFromSuperview];
+			[navigationController.navigationBar setBackgroundImage:self.originalTopBarImages[@"backgroundImage"] forBarMetrics:UIBarMetricsDefault];
+			navigationController.navigationBar.shadowImage = self.originalTopBarImages[@"shadowImage"];
+			self.originalTopBarImages = nil;
+		}
+	}
+}
+
+- (void)storeOriginalTopBarImages:(UINavigationController *)navigationController {
+	NSMutableDictionary *originalTopBarImages = [@{} mutableCopy];
+	UIImage *bgImage = [navigationController.navigationBar backgroundImageForBarMetrics:UIBarMetricsDefault];
+	if (bgImage != nil) {
+		originalTopBarImages[@"backgroundImage"] = bgImage;
+	}
+	UIImage *shadowImage = navigationController.navigationBar.shadowImage;
+	if (shadowImage != nil) {
+		originalTopBarImages[@"shadowImage"] = shadowImage;
 	}
+	self.originalTopBarImages = originalTopBarImages;
 }
 
 @end

lib/ios/RNNTopBarOptions.h

@@ -18,11 +18,8 @@
 @property (nonatomic, strong) NSNumber* leftButtonDisabledColor;
 @property (nonatomic, strong) NSNumber* rightButtonDisabledColor;
 @property (nonatomic, strong) NSString* barStyle;
-@property (nonatomic, strong) NSNumber* translucent;
-@property (nonatomic, strong) NSNumber* transparent;
 @property (nonatomic, strong) NSNumber* drawBehind;
 @property (nonatomic, strong) NSNumber* noBorder;
-@property (nonatomic, strong) NSNumber* blur;
 @property (nonatomic, strong) NSNumber* animate;
 @property (nonatomic, strong) NSString* testID;
 @property (nonatomic, strong) RNNLargeTitleOptions* largeTitle;

lib/ios/RNNTopBarOptions.m

@@ -2,13 +2,8 @@
 #import "RNNNavigationButtons.h"
 #import "RNNCustomTitleView.h"
 
-extern const NSInteger BLUR_TOPBAR_TAG;
-const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
-
-
 @interface RNNTopBarOptions ()
 
-@property (nonatomic, strong) NSMutableDictionary* originalTopBarImages;
 @property (nonatomic, strong) RNNNavigationButtons* navigationButtons;
 
 @end
@@ -75,7 +70,6 @@ const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
 }
 
 - (void)applyOnNavigationController:(UINavigationController *)navigationController {
-	[self.background applyOnNavigationController:navigationController];
 	if (self.testID) {
 		navigationController.navigationBar.accessibilityIdentifier = self.testID;
 	}
@@ -102,66 +96,13 @@ const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
 		}
 	}
 	
-	if ([self.blur boolValue]) {
-		if (![navigationController.navigationBar viewWithTag:BLUR_TOPBAR_TAG]) {
-			
-			[navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
-			navigationController.navigationBar.shadowImage = [UIImage new];
-			UIVisualEffectView *blur = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
-			CGRect statusBarFrame = [[UIApplication sharedApplication] statusBarFrame];
-			blur.frame = CGRectMake(0, -1 * statusBarFrame.size.height, navigationController.navigationBar.frame.size.width, navigationController.navigationBar.frame.size.height + statusBarFrame.size.height);
-			blur.userInteractionEnabled = NO;
-			blur.tag = BLUR_TOPBAR_TAG;
-			[navigationController.navigationBar insertSubview:blur atIndex:0];
-			[navigationController.navigationBar sendSubviewToBack:blur];
-		}
-	} else {
-		UIView *blur = [navigationController.navigationBar viewWithTag:BLUR_TOPBAR_TAG];
-		if (blur) {
-			[navigationController.navigationBar setBackgroundImage: nil forBarMetrics:UIBarMetricsDefault];
-			navigationController.navigationBar.shadowImage = nil;
-			[blur removeFromSuperview];
-		}
-	}
-	
-	void (^disableTopBarTransparent)(void) = ^ {
-		UIView *transparentView = [navigationController.navigationBar viewWithTag:TOP_BAR_TRANSPARENT_TAG];
-		if (transparentView){
-			[transparentView removeFromSuperview];
-			[navigationController.navigationBar setBackgroundImage:self.originalTopBarImages[@"backgroundImage"] forBarMetrics:UIBarMetricsDefault];
-			navigationController.navigationBar.shadowImage = self.originalTopBarImages[@"shadowImage"];
-			self.originalTopBarImages = nil;
-		}
-	};
-	
-	if (self.transparent) {
-		if ([self.transparent boolValue]) {
-			if (![navigationController.navigationBar viewWithTag:TOP_BAR_TRANSPARENT_TAG]){
-				[self storeOriginalTopBarImages:navigationController];
-				[navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
-				navigationController.navigationBar.shadowImage = [UIImage new];
-				UIView *transparentView = [[UIView alloc] initWithFrame:CGRectZero];
-				transparentView.tag = TOP_BAR_TRANSPARENT_TAG;
-				[navigationController.navigationBar insertSubview:transparentView atIndex:0];
-			}
-		} else {
-			disableTopBarTransparent();
-		}
-	} else {
-		disableTopBarTransparent();
-	}
-	
 	if (self.barStyle) {
 		navigationController.navigationBar.barStyle = [RCTConvert UIBarStyle:self.barStyle];
 	} else {
 		navigationController.navigationBar.barStyle = UIBarStyleDefault;
 	}
 	
-	if (self.translucent) {
-		navigationController.navigationBar.translucent = [self.translucent boolValue];
-	} else {
-		navigationController.navigationBar.translucent = NO;
-	}
+	[self.background applyOnNavigationController:navigationController];
 }
 
 - (void)setRightButtonColor:(NSNumber *)rightButtonColor {
@@ -212,17 +153,4 @@ const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
 	}
 }
 
--(void)storeOriginalTopBarImages:(UINavigationController *)navigationController {
-	NSMutableDictionary *originalTopBarImages = [@{} mutableCopy];
-	UIImage *bgImage = [navigationController.navigationBar backgroundImageForBarMetrics:UIBarMetricsDefault];
-	if (bgImage != nil) {
-		originalTopBarImages[@"backgroundImage"] = bgImage;
-	}
-	UIImage *shadowImage = navigationController.navigationBar.shadowImage;
-	if (shadowImage != nil) {
-		originalTopBarImages[@"shadowImage"] = shadowImage;
-	}
-	self.originalTopBarImages = originalTopBarImages;
-}
-
 @end

lib/ios/ReactNativeNavigationTests/RNNRootViewControllerTest.m

@@ -179,7 +179,7 @@
 
 -(void)testTopBarTranslucent {
 	NSNumber* topBarTranslucentInput = @(0);
-	self.options.topBar.translucent = topBarTranslucentInput;
+	self.options.topBar.background.translucent = topBarTranslucentInput;
 	__unused RNNNavigationController* nav = [self createNavigationController];
 	[self.uut viewWillAppear:false];
 	XCTAssertFalse(self.uut.navigationController.navigationBar.translucent);
@@ -200,8 +200,8 @@
 }
 
 -(void)testTopBarTransparent_BOOL_True {
-	NSNumber* topBarTransparentInput = @(1);
-	self.options.topBar.transparent = topBarTransparentInput;
+	NSNumber* transparentColor = @(0x00000000);
+	self.options.topBar.background.color = transparentColor;
 	__unused RNNNavigationController* nav = [self createNavigationController];
 	[self.uut viewWillAppear:false];
 	UIView* transparentView = [self.uut.navigationController.navigationBar viewWithTag:TOP_BAR_TRANSPARENT_TAG];
@@ -210,20 +210,14 @@
 }
 
 -(void)testTopBarTransparent_BOOL_false {
-	NSNumber* topBarTransparentInput = @(0);
+	NSNumber* inputColor = @(0xFFFF0000);
 	__unused RNNNavigationController* nav = [self createNavigationController];
-	self.options.topBar.transparent = topBarTransparentInput;
+	self.options.topBar.background.color = inputColor;
 	[self.uut viewWillAppear:false];
 	UIView* transparentView = [self.uut.navigationController.navigationBar viewWithTag:TOP_BAR_TRANSPARENT_TAG];
 	XCTAssertFalse(transparentView);
 }
 
-
--(void)testStoreOriginalTopBarImages {
-
-}
-
-
 -(void)testTopBarLargeTitle_default {
 	__unused RNNNavigationController* nav = [self createNavigationController];
 	[self.uut viewWillAppear:false];
@@ -564,7 +558,7 @@
 
 -(void)testTopBarBlur_false {
 	NSNumber* topBarBlurInput = @(0);
-	self.options.topBar.blur = topBarBlurInput;
+	self.options.topBar.background.blur = topBarBlurInput;
 	__unused RNNNavigationController* nav = [self createNavigationController];
 	[self.uut viewWillAppear:false];
 	XCTAssertNil([self.uut.navigationController.navigationBar viewWithTag:BLUR_TOPBAR_TAG]);
@@ -572,7 +566,7 @@
 
 -(void)testTopBarBlur_true {
 	NSNumber* topBarBlurInput = @(1);
-	self.options.topBar.blur = topBarBlurInput;
+	self.options.topBar.background.blur = topBarBlurInput;
 	__unused RNNNavigationController* nav = [self createNavigationController];
 	[self.uut viewWillAppear:false];
 	XCTAssertNotNil([self.uut.navigationController.navigationBar viewWithTag:BLUR_TOPBAR_TAG]);

lib/src/interfaces/Options.ts

@@ -194,6 +194,16 @@ export interface  OptionsTopBarBackground {
   component?: {
     name?: string;
   };
+  /**
+   * Allows the NavBar to be translucent (blurred)
+   * #### (iOS specific)
+   */
+  translucent?: boolean;
+  /**
+   * Enable background blur
+   * #### (iOS specific)
+   */
+  blur?: boolean;
 }
 
 export interface OptionsTopBarButton {
@@ -294,28 +304,12 @@ export interface OptionsTopBar {
    * @default 'default'
    */
   barStyle?: 'default' | 'black';
-  /**
-   * Allows the NavBar to be translucent (blurred)
-   * #### (iOS specific)
-   * @requires transparent: false
-   */
-  translucent?: boolean;
-  /**
-   * Allows the NavBar to be transparent
-   * #### (iOS specific)
-   */
-  transparent?: boolean;
   /**
    * Disable the border on bottom of the navbar
    * #### (iOS specific)
    * @default false
    */
   noBorder?: boolean;
-  /**
-   * Enable background blur
-   * #### (iOS specific)
-   */
-  blur?: boolean;
   /**
    * Show a UISearchBar in the Top Bar
    * #### (iOS 11+ specific)
@@ -397,7 +391,6 @@ export interface OptionsBottomTabs {
   /**
    * Allows the Bottom Tabs to be translucent (blurred)
    * #### (iOS specific)
-   * @requires transparent: false
    */
   translucent?: boolean;
   /**

playground/src/screens/CustomTransitionOrigin.js

@@ -18,7 +18,9 @@ class CustomTransitionOrigin extends Component {
         largeTitle: {
           visible: false
         },
-        translucent: true
+        background: {
+          translucent: true
+        }
       }
     };
   }

playground/src/screens/OptionsScreen.js

@@ -219,7 +219,9 @@ class OptionsScreen extends Component {
   onClickTopBarTransparent = () => {
     Navigation.mergeOptions(this.props.componentId, {
       topBar: {
-        transparent: true
+        background: {
+          color: 'transparent'
+        }
       }
     });
   }
@@ -227,7 +229,9 @@ class OptionsScreen extends Component {
   onClickTopBarOpaque = () => {
     Navigation.mergeOptions(this.props.componentId, {
       topBar: {
-        transparent: false
+        background: {
+          color: 'white'
+        }
       }
     });
   }

playground/src/screens/PushedScreen.js

@@ -20,11 +20,14 @@ class PushedScreen extends Component {
           text: 'single',
           testID: testIDs.TOP_BAR_BUTTON
         },
+        background: {
+          color: 'blue'
+        },
         rightButtonColor: 'red',
       },
-      layout: {
-        backgroundColor: '#f5fcff'
-      },
+      // layout: {
+      //   backgroundColor: '#f5fcff'
+      // },
       bottomTabs: {
         visible: false
       }

playground/src/screens/SearchScreen.js

@@ -27,7 +27,9 @@ class SearchControllerScreen extends Component {
           visible: true
         },
         searchBar: true,
-        translucent: true,
+        background: {
+          translucent: true
+        },
         searchBarPlaceholder: 'Start Typing'
       }
     };
@@ -75,7 +77,9 @@ class SearchControllerScreen extends Component {
             largeTitle: {
               visible: true
             },
-            translucent: true,
+            background: {
+              translucent: true
+            }
           }
         }
       },