From 9b9c12b7b4fab31331b46815079a89d518b7a930 Mon Sep 17 00:00:00 2001 From: Riyaz Ahmed Date: Wed, 13 Dec 2017 23:48:38 +0530 Subject: [PATCH 1/2] adds shadow opacity, shadow color, shadow offset, shadow radius to navbar for ios --- ios/RCCViewController.m | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/ios/RCCViewController.m b/ios/RCCViewController.m index 964e8a9d0f6..b31b812ec8a 100755 --- a/ios/RCCViewController.m +++ b/ios/RCCViewController.m @@ -446,6 +446,20 @@ -(void)setStyleOnAppearForViewController:(UIViewController*)viewController appea viewController.navigationController.navigationBar.tintColor = nil; } + BOOL topBarElevationShadowEnabled = self.navigatorStyle[@"topBarElevationShadowEnabled"] != (id)[NSNull null] ? [RCTConvert CGFloat:self.navigatorStyle[@"topBarElevationShadowEnabled"]] : NO; + + if (topBarElevationShadowEnabled) { + CGFloat shadowOpacity = self.navigatorStyle[@"topBarShadowOpacity"] != 0 ? [RCTConvert CGFloat:self.navigatorStyle[@"topBarShadowOpacity"]] : 0.2; + CGFloat shadowOffset = self.navigatorStyle[@"topBarShadowOffset"] != 0 ? [RCTConvert CGFloat:self.navigatorStyle[@"topBarShadowOffset"]] : 3.0; + CGFloat shadowRadius = self.navigatorStyle[@"topBarShadowRadius"] != 0 ? [RCTConvert CGFloat:self.navigatorStyle[@"topBarShadowRadius"]] : 2.0; + UIColor *shadowColor = self.navigatorStyle[@"topBarShadowColor"] != (id)[NSNull null] ? [RCTConvert UIColor:self.navigatorStyle[@"topBarShadowColor"]] : UIColor.blackColor; + + viewController.navigationController.navigationBar.layer.shadowOpacity = shadowOpacity; + viewController.navigationController.navigationBar.layer.shadowColor = shadowColor.CGColor; + viewController.navigationController.navigationBar.layer.shadowOffset = CGSizeMake(0, shadowOffset); + viewController.navigationController.navigationBar.layer.shadowRadius = shadowRadius; + } + BOOL viewControllerBasedStatusBar = false; NSObject *viewControllerBasedStatusBarAppearance = [[NSBundle mainBundle] infoDictionary][@"UIViewControllerBasedStatusBarAppearance"]; From 223a84ae82a846cf04d09e82e922a3f670a91d4c Mon Sep 17 00:00:00 2001 From: Riyaz Ahmed Date: Wed, 13 Dec 2017 23:52:04 +0530 Subject: [PATCH 2/2] mentions ios shadow in styling-the-navigator docs --- docs/styling-the-navigator.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/styling-the-navigator.md b/docs/styling-the-navigator.md index 9888ac1defa..7841ddfbb9d 100644 --- a/docs/styling-the-navigator.md +++ b/docs/styling-the-navigator.md @@ -55,7 +55,7 @@ this.props.navigator.setStyle({ navBarComponentAlignment: 'center', // center/fill navBarCustomViewInitialProps: {}, // navBar custom component props navBarButtonColor: '#007aff', // Change color of nav bar buttons (eg. the back button) (remembered across pushes) - + topBarElevationShadowEnabled: false, // (Android - default: true, iOS - default: false). Disables TopBar elevation shadow on Lolipop and above navBarHidden: false, // make the nav bar hidden navBarHideOnScroll: false, // make the nav bar hidden only after the user starts to scroll navBarTranslucent: false, // make the nav bar semi-translucent, works best with drawUnderNavBar:true @@ -94,12 +94,16 @@ this.props.navigator.setStyle({ navBarRightButtonFontSize: 17, // Change font size of right nav bar button navBarRightButtonColor: 'blue', // Change color of right nav bar button navBarRightButtonFontWeight: '600', // Change font weight of right nav bar button + + topBarShadowColor: 'blue' // Sets shadow of the navbar, Works only when topBarElevationShadowEnabled: true + topBarShadowOpacity: 0.5, // Sets shadow opacity on the navbar, Works only when topBarElevationShadowEnabled: true + topBarShadowOffset: 12, // Sets shadow offset on the navbar, Works only when topBarElevationShadowEnabled: true + topBarShadowRadius: 3 // Sets shadow radius on the navbar, Works only when topBarElevationShadowEnabled: true // Android only navigationBarColor: '#000000', // change the background color of the bottom native navigation bar. navBarTitleTextCentered: true, // default: false. centers the title. navBarButtonFontFamily: 'sans-serif-thin', // Change the font family of textual buttons - topBarElevationShadowEnabled: false, // default: true. Disables TopBar elevation shadow on Lolipop and above statusBarColor: '#000000', // change the color of the status bar. drawUnderStatusBar: false, // default: false, will draw the screen underneath the statusbar. Useful togheter with statusBarColor: transparent collapsingToolBarImage: "http://lorempixel.com/400/200/", // Collapsing Toolbar image.