Layout background color (#5946)

* Apply layout.backgroundColor on parent view controllers

* Add layout.componentBackgroundColor

* Remove drawBehind deprecation

lib/ios/DeprecationOptions.h

@@ -2,6 +2,4 @@
 
 @interface DeprecationOptions : RNNOptions
 
-@property (nonatomic, strong) Bool* deprecateDrawBehind;
-
 @end

lib/ios/DeprecationOptions.m

@@ -4,7 +4,6 @@
 
 - (instancetype)initWithDict:(NSDictionary *)dict {
     self = [super init];
-    self.deprecateDrawBehind = [BoolParser parse:dict key:@"deprecateDrawBehind"];
     return self;
 }
 

lib/ios/RNNBottomTabsPresenter.m

@@ -25,6 +25,7 @@
     [bottomTabs setTabBarHideShadow:[withDefault.bottomTabs.hideShadow getWithDefaultValue:NO]];
     [bottomTabs setTabBarStyle:[RCTConvert UIBarStyle:[withDefault.bottomTabs.barStyle getWithDefaultValue:@"default"]]];
     [bottomTabs setTabBarVisible:[withDefault.bottomTabs.visible getWithDefaultValue:YES] animated:[withDefault.bottomTabs.animate getWithDefaultValue:NO]];
+    [bottomTabs.view setBackgroundColor:[withDefault.layout.backgroundColor getWithDefaultValue:nil]];
 }
 
 - (void)mergeOptions:(RNNNavigationOptions *)options resolvedOptions:(RNNNavigationOptions *)currentOptions {
@@ -68,6 +69,10 @@
             [bottomTabs setTabBarVisible:options.bottomTabs.visible.get animated:NO];
         }
     }
+    
+    if (options.layout.backgroundColor.hasValue) {
+        [bottomTabs.view setBackgroundColor:options.layout.backgroundColor.get];
+    }
 }
 
 - (void)viewDidLayoutSubviews {

lib/ios/RNNComponentPresenter.m

@@ -59,11 +59,13 @@
 	[viewController setStatusBarStyle:[withDefault.statusBar.style getWithDefaultValue:@"default"] animated:[withDefault.statusBar.animate getWithDefaultValue:YES]];
 	[viewController setBackButtonVisible:[withDefault.topBar.backButton.visible getWithDefaultValue:YES]];
 	[viewController setInterceptTouchOutside:[withDefault.overlay.interceptTouchOutside getWithDefaultValue:YES]];
-
-	if (withDefault.layout.backgroundColor.hasValue) {
-		[viewController setBackgroundColor:withDefault.layout.backgroundColor.get];
-	}
-
+    
+    if (@available(iOS 13.0, *)) {
+        [viewController setBackgroundColor:[withDefault.layout.componentBackgroundColor getWithDefaultValue:UIColor.systemBackgroundColor]];
+    } else {
+        [viewController setBackgroundColor:[withDefault.layout.componentBackgroundColor getWithDefaultValue:viewController.view.backgroundColor]];
+    }
+    
 	if (withDefault.topBar.searchBar.hasValue) {
 		BOOL hideNavBarOnFocusSearchBar = YES;
 		if (withDefault.topBar.hideNavBarOnFocusSearchBar.hasValue) {
@@ -81,10 +83,8 @@
 	UIViewController* viewController = self.boundViewController;
 	RNNNavigationOptions *withDefault = [options withDefault:[self defaultOptions]];
     
-	if (![withDefault.deprecations.deprecateDrawBehind getWithDefaultValue:NO]) {
-		[viewController setDrawBehindTopBar:[withDefault.topBar.drawBehind getWithDefaultValue:NO]];
-		[viewController setDrawBehindTabBar:[withDefault.bottomTabs.drawBehind getWithDefaultValue:NO] || ![withDefault.bottomTabs.visible getWithDefaultValue:YES]];
-	}
+	[viewController setDrawBehindTopBar:[withDefault.topBar.drawBehind getWithDefaultValue:NO]];
+    [viewController setDrawBehindTabBar:[withDefault.bottomTabs.drawBehind getWithDefaultValue:NO] || ![withDefault.bottomTabs.visible getWithDefaultValue:YES]];
     
 	if ((withDefault.topBar.leftButtons || withDefault.topBar.rightButtons)) {
 		[_navigationButtons applyLeftButtons:withDefault.topBar.leftButtons rightButtons:withDefault.topBar.rightButtons defaultLeftButtonStyle:withDefault.topBar.leftButtonStyle defaultRightButtonStyle:withDefault.topBar.rightButtonStyle];
@@ -116,7 +116,7 @@
 		[viewController setSearchBarWithPlaceholder:[options.topBar.searchBarPlaceholder getWithDefaultValue:@""] hideNavBarOnFocusSearchBar:hideNavBarOnFocusSearchBar];
 	}
 
-	if (options.topBar.drawBehind.hasValue && ![withDefault.deprecations.deprecateDrawBehind getWithDefaultValue:NO]) {
+	if (options.topBar.drawBehind.hasValue) {
 		[viewController setDrawBehindTopBar:options.topBar.drawBehind.get];
   }
 
@@ -127,15 +127,15 @@
 	if (options.topBar.largeTitle.visible.hasValue) {
 		[viewController setTopBarPrefersLargeTitle:options.topBar.largeTitle.visible.get];
 	}
-
+    
+    if (options.layout.componentBackgroundColor.hasValue) {
+        [viewController setBackgroundColor:options.layout.componentBackgroundColor.get];
+    }
+    
 	if (options.bottomTab.badgeColor.hasValue) {
 		[viewController setTabBarItemBadgeColor:options.bottomTab.badgeColor.get];
 	}
 	
-	if (options.layout.backgroundColor.hasValue) {
-		[viewController setBackgroundColor:options.layout.backgroundColor.get];
-	}
-	
 	if (options.bottomTab.visible.hasValue) {
 		[viewController.tabBarController setCurrentTabIndex:[viewController.tabBarController.viewControllers indexOfObject:viewController]];
 	}

lib/ios/RNNLayoutOptions.h

@@ -3,6 +3,7 @@
 @interface RNNLayoutOptions : RNNOptions
 
 @property (nonatomic, strong) Color* backgroundColor;
+@property (nonatomic, strong) Color* componentBackgroundColor;
 @property (nonatomic, strong) Text* direction;
 @property (nonatomic, strong) id orientation;
 

lib/ios/RNNLayoutOptions.m

@@ -8,6 +8,7 @@
 	self = [super init];
 	
 	self.backgroundColor = [ColorParser parse:dict key:@"backgroundColor"];
+    self.componentBackgroundColor = [ColorParser parse:dict key:@"componentBackgroundColor"];
 	self.direction = [TextParser parse:dict key:@"direction"];
 	self.orientation = dict[@"orientation"];
 

lib/ios/RNNSideMenuPresenter.m

@@ -41,6 +41,8 @@
 		[sideMenu side:MMDrawerSideRight visible:withDefault.sideMenu.right.visible.get];
 		[withDefault.sideMenu.right.visible consume];
 	}
+    
+    [sideMenu.view setBackgroundColor:[withDefault.layout.backgroundColor getWithDefaultValue:nil]];
 }
 
 - (void)applyOptionsOnInit:(RNNNavigationOptions *)initialOptions {
@@ -108,6 +110,10 @@
 	if (options.sideMenu.animationType.hasValue) {
 		[sideMenu setAnimationType:options.sideMenu.animationType.get];
 	}
+    
+    if (options.layout.backgroundColor.hasValue) {
+        [sideMenu.view setBackgroundColor:options.layout.backgroundColor.get];
+    }
 }
 
 @end

lib/ios/RNNStackPresenter.m

@@ -65,6 +65,8 @@
     [stack setNavigationBarLargeTitleVisible:[withDefault.topBar.largeTitle.visible getWithDefaultValue:NO]];
     [stack setNavigationBarClipsToBounds:[withDefault.topBar.background.clipToBounds getWithDefaultValue:NO]];
     [stack setBackButtonColor:[withDefault.topBar.backButton.color getWithDefaultValue:nil]];
+	
+	[stack.view setBackgroundColor:[withDefault.layout.backgroundColor getWithDefaultValue:nil]];
 }
 
 - (void)applyOptionsOnViewDidLayoutSubviews:(RNNNavigationOptions *)options {
@@ -128,6 +130,10 @@
     if (options.topBar.background.component.name.hasValue) {
         [self setCustomNavigationComponentBackground:options perform:nil];
     }
+	
+	if (options.layout.backgroundColor.hasValue) {
+		[stack.view setBackgroundColor:options.layout.backgroundColor.get];
+	}
     
     RNNNavigationOptions * withDefault = (RNNNavigationOptions *) [[options mergeInOptions:resolvedOptions] withDefault:[self defaultOptions]];
     [_topBarPresenter mergeOptions:options.topBar withDefault:withDefault.topBar];

lib/src/commands/Deprecations.ts

@@ -1,26 +1,10 @@
-import isEqual from 'lodash/isEqual';
-import once from 'lodash/once';
-import { Platform } from 'react-native';
 
 export class Deprecations {
-  private deprecateDrawBehind = once((parentOptions: object) => {
-    this.warnDeprecatedOption('drawBehind', 'Please use SafeAreaView, or ScrollView and set drawBehind true in default options. For more information see https://github.com/wix/react-native-navigation/issues/5913', parentOptions);
-  });
+  public onProcessOptions(_key: string, _parentOptions: Record<string, any>) {
 
-  public onProcessOptions(key: string, parentOptions: Record<string, any>) {
-    if (isEqual(key, 'drawBehind') && Platform.OS === 'ios') {
-      this.deprecateDrawBehind(parentOptions);
-    }
   }
 
-  public onProcessDefaultOptions(key: string, parentOptions: Record<string, any>) {
-    if (isEqual(key, 'drawBehind') && Platform.OS === 'ios' && parentOptions[key] === false) {
-      this.deprecateDrawBehind(parentOptions);
-    }
-  }
+  public onProcessDefaultOptions(_key: string, _parentOptions: Record<string, any>) {
 
-  private warnDeprecatedOption(key: string, message: string, parentOptions: object) {
-    // tslint:disable-next-line:no-console
-    console.warn(`${key} is deprecated. ${message}`, parentOptions);
   }
 }

playground/ios/NavigationIOS12Tests/RNNRootViewControllerTest.m

@@ -132,7 +132,7 @@
 
 -(void)testbackgroundColor_validColor{
 	UIColor* inputColor = [RCTConvert UIColor:@(0xFFFF0000)];
-	self.options.layout.backgroundColor = [[Color alloc] initWithValue:inputColor];
+	self.options.layout.componentBackgroundColor = [[Color alloc] initWithValue:inputColor];
 	[self.uut viewWillAppear:false];
 	UIColor* expectedColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
 	XCTAssertTrue([self.uut.view.backgroundColor isEqual:expectedColor]);

playground/ios/NavigationTests/RNNRootViewControllerTest.m

@@ -130,14 +130,19 @@
 	XCTAssertTrue([self.uut.navigationController.navigationBar.standardAppearance.titleTextAttributes[@"NSColor"] isEqual:expectedColor]);
 }
 
-- (void)testbackgroundColor_validColor{
+- (void)testBackgroundColor_validColor {
 	UIColor* inputColor = [RCTConvert UIColor:@(0xFFFF0000)];
-	self.options.layout.backgroundColor = [[Color alloc] initWithValue:inputColor];
+	self.options.layout.componentBackgroundColor = [[Color alloc] initWithValue:inputColor];
 	[self.uut viewWillAppear:false];
 	UIColor* expectedColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
 	XCTAssertTrue([self.uut.view.backgroundColor isEqual:expectedColor]);
 }
 
+- (void)testDefaultBackgroundColor {
+	[self.uut viewWillAppear:false];
+	XCTAssertTrue([self.uut.view.backgroundColor isEqual:UIColor.systemBackgroundColor]);
+}
+
 - (void)testTopBarTextFontFamily_validFont{
 	NSString* inputFont = @"HelveticaNeue";
 	__unused RNNStackController* nav = [self createNavigationController];

playground/ios/NavigationTests/RNNSideMenuPresenterTest.m

@@ -7,7 +7,7 @@
 
 @property (nonatomic, strong) RNNSideMenuPresenter *uut;
 @property (nonatomic, strong) RNNNavigationOptions *options;
-@property (nonatomic, strong) id bindedViewController;
+@property (nonatomic, strong) id boundViewController;
 
 @end
 
@@ -16,25 +16,25 @@
 - (void)setUp {
     [super setUp];
 	self.uut = [[RNNSideMenuPresenter alloc] init];
-	self.bindedViewController = [OCMockObject partialMockForObject:[RNNSideMenuController new]];
-    [self.uut bindViewController:self.bindedViewController];
+	self.boundViewController = [OCMockObject partialMockForObject:[RNNSideMenuController new]];
+    [self.uut bindViewController:self.boundViewController];
 	self.options = [[RNNNavigationOptions alloc] initEmptyOptions];
 }
 
 - (void)testApplyOptionsShouldSetDefaultValues {
-	[[self.bindedViewController expect] side:MMDrawerSideLeft enabled:YES];
-	[[self.bindedViewController expect] side:MMDrawerSideRight enabled:YES];
-	[[self.bindedViewController expect] setShouldStretchLeftDrawer:YES];
-	[[self.bindedViewController expect] setShouldStretchRightDrawer:YES];
-	[[self.bindedViewController expect] setAnimationVelocityLeft:840.0f];
-	[[self.bindedViewController expect] setAnimationVelocityRight:840.0f];
-	[[self.bindedViewController reject] side:MMDrawerSideLeft width:0];
-	[[self.bindedViewController reject] side:MMDrawerSideRight width:0];
-  	[[self.bindedViewController expect] setAnimationType:nil];
+	[[self.boundViewController expect] side:MMDrawerSideLeft enabled:YES];
+	[[self.boundViewController expect] side:MMDrawerSideRight enabled:YES];
+	[[self.boundViewController expect] setShouldStretchLeftDrawer:YES];
+	[[self.boundViewController expect] setShouldStretchRightDrawer:YES];
+	[[self.boundViewController expect] setAnimationVelocityLeft:840.0f];
+	[[self.boundViewController expect] setAnimationVelocityRight:840.0f];
+	[[self.boundViewController reject] side:MMDrawerSideLeft width:0];
+	[[self.boundViewController reject] side:MMDrawerSideRight width:0];
+  	[[self.boundViewController expect] setAnimationType:nil];
     
 	[self.uut applyOptions:self.options];
 
-	[self.bindedViewController verify];
+	[self.boundViewController verify];
 }
 
 - (void)testApplyOptionsShouldSetInitialValues {
@@ -45,41 +45,49 @@
 	self.options.sideMenu.right.animationVelocity = [[Double alloc] initWithValue:@(100.0f)];
 	self.options.sideMenu.left.animationVelocity = [[Double alloc] initWithValue:@(100.0f)];
 	
-	[[self.bindedViewController expect] side:MMDrawerSideLeft enabled:NO];
-	[[self.bindedViewController expect] side:MMDrawerSideRight enabled:NO];
-	[[self.bindedViewController expect] setShouldStretchLeftDrawer:NO];
-	[[self.bindedViewController expect] setShouldStretchRightDrawer:NO];
-	[[self.bindedViewController expect] setAnimationVelocityLeft:100.0f];
-	[[self.bindedViewController expect] setAnimationVelocityRight:100.0f];
+	[[self.boundViewController expect] side:MMDrawerSideLeft enabled:NO];
+	[[self.boundViewController expect] side:MMDrawerSideRight enabled:NO];
+	[[self.boundViewController expect] setShouldStretchLeftDrawer:NO];
+	[[self.boundViewController expect] setShouldStretchRightDrawer:NO];
+	[[self.boundViewController expect] setAnimationVelocityLeft:100.0f];
+	[[self.boundViewController expect] setAnimationVelocityRight:100.0f];
 	
 	[self.uut applyOptions:self.options];
 	
-	[self.bindedViewController verify];
+	[self.boundViewController verify];
 }
 
 - (void)testApplyOptionsOnInitShouldSetWidthOptions {
 	self.options.sideMenu.right.width = [[Double alloc] initWithValue:@(100.0f)];
 	self.options.sideMenu.left.width = [[Double alloc] initWithValue:@(100.0f)];
 
-	[[self.bindedViewController expect] side:MMDrawerSideLeft width:100.0f];
-	[[self.bindedViewController expect] side:MMDrawerSideRight width:100.0f];
+	[[self.boundViewController expect] side:MMDrawerSideLeft width:100.0f];
+	[[self.boundViewController expect] side:MMDrawerSideRight width:100.0f];
 	
 	[self.uut applyOptionsOnInit:self.options];
 	
-	[self.bindedViewController verify];
+	[self.boundViewController verify];
 }
 
 - (void)testApplyOptionsOnInitShouldSetDefaultDrawerGestureMode {
-	[[self.bindedViewController expect] setOpenDrawerGestureModeMask:MMOpenDrawerGestureModeAll];
+	[[self.boundViewController expect] setOpenDrawerGestureModeMask:MMOpenDrawerGestureModeAll];
 	[self.uut applyOptionsOnInit:self.options];
-	[self.bindedViewController verify];
+	[self.boundViewController verify];
 }
 
 - (void)testApplyOptionsOnInitShouldSetBezelDrawerGestureMode {
 	self.options.sideMenu.openGestureMode = [[SideMenuOpenMode alloc] initWithValue:@(MMOpenDrawerGestureModeNone)];
-	[[self.bindedViewController expect] setOpenDrawerGestureModeMask:MMOpenDrawerGestureModeNone];
+	[[self.boundViewController expect] setOpenDrawerGestureModeMask:MMOpenDrawerGestureModeNone];
 	[self.uut applyOptionsOnInit:self.options];
-	[self.bindedViewController verify];
+	[self.boundViewController verify];
+}
+
+- (void)testBackgroundColor_validColor {
+	UIColor* inputColor = [RCTConvert UIColor:@(0xFFFF0000)];
+	self.options.layout.backgroundColor = [[Color alloc] initWithValue:inputColor];
+	[self.uut applyOptions:self.options];
+	UIColor* expectedColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
+	XCTAssertTrue([((UIViewController *)self.boundViewController).view.backgroundColor isEqual:expectedColor]);
 }
 
 @end

playground/ios/NavigationTests/RNNStackPresenterTest.m

@@ -106,4 +106,12 @@
 	XCTAssertTrue([self.boundViewController.navigationBar.standardAppearance.backIndicatorImage isEqual:image]);
 }
 
+- (void)testBackgroundColor_validColor {
+	UIColor* inputColor = [RCTConvert UIColor:@(0xFFFF0000)];
+	self.options.layout.backgroundColor = [[Color alloc] initWithValue:inputColor];
+	[self.uut applyOptions:self.options];
+	UIColor* expectedColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
+	XCTAssertTrue([self.boundViewController.view.backgroundColor isEqual:expectedColor]);
+}
+
 @end

playground/ios/NavigationTests/RNNTabBarPresenterTest.m

@@ -92,4 +92,12 @@
     [uut verify];
 }
 
+- (void)testBackgroundColor_validColor {
+	UIColor* inputColor = [RCTConvert UIColor:@(0xFFFF0000)];
+	self.options.layout.backgroundColor = [[Color alloc] initWithValue:inputColor];
+	[self.uut applyOptions:self.options];
+	UIColor* expectedColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
+	XCTAssertTrue([((UIViewController *)self.boundViewController).view.backgroundColor isEqual:expectedColor]);
+}
+
 @end