Browse Source

introducing navbar shadow on iOS (#2339)

* adds shadow opacity, shadow color, shadow offset, shadow radius to navbar for ios

* mentions ios shadow in styling-the-navigator docs
riyaz942 6 years ago
parent
commit
8fd496e0c9
2 changed files with 20 additions and 2 deletions
  1. 6
    2
      docs/styling-the-navigator.md
  2. 14
    0
      ios/RCCViewController.m

+ 6
- 2
docs/styling-the-navigator.md View File

@@ -55,7 +55,7 @@ this.props.navigator.setStyle({
55 55
   navBarComponentAlignment: 'center', // center/fill
56 56
   navBarCustomViewInitialProps: {}, // navBar custom component props
57 57
   navBarButtonColor: '#007aff', // Change color of nav bar buttons (eg. the back button) (remembered across pushes)
58
-
58
+  topBarElevationShadowEnabled: false, // (Android - default: true, iOS - default: false). Disables TopBar elevation shadow on Lolipop and above
59 59
   navBarHidden: false, // make the nav bar hidden
60 60
   navBarHideOnScroll: false, // make the nav bar hidden only after the user starts to scroll
61 61
   navBarTranslucent: false, // make the nav bar semi-translucent, works best with drawUnderNavBar:true
@@ -94,12 +94,16 @@ this.props.navigator.setStyle({
94 94
   navBarRightButtonFontSize: 17, // Change font size of right nav bar button
95 95
   navBarRightButtonColor: 'blue', // Change color of right nav bar button
96 96
   navBarRightButtonFontWeight: '600', // Change font weight of right nav bar button
97
+
98
+  topBarShadowColor: 'blue' // Sets shadow of the navbar, Works only when topBarElevationShadowEnabled: true
99
+  topBarShadowOpacity: 0.5, // Sets shadow opacity on the navbar, Works only when topBarElevationShadowEnabled: true
100
+  topBarShadowOffset: 12, // Sets shadow offset on the navbar, Works only when topBarElevationShadowEnabled: true
101
+  topBarShadowRadius: 3 // Sets shadow radius on the navbar, Works only when topBarElevationShadowEnabled: true
97 102
   
98 103
   // Android only
99 104
   navigationBarColor: '#000000', // change the background color of the bottom native navigation bar.
100 105
   navBarTitleTextCentered: true, // default: false. centers the title.
101 106
   navBarButtonFontFamily: 'sans-serif-thin', // Change the font family of textual buttons
102
-  topBarElevationShadowEnabled: false, // default: true. Disables TopBar elevation shadow on Lolipop and above
103 107
   statusBarColor: '#000000', // change the color of the status bar.
104 108
   drawUnderStatusBar: false, // default: false, will draw the screen underneath the statusbar. Useful togheter with statusBarColor: transparent
105 109
   collapsingToolBarImage: "http://lorempixel.com/400/200/", // Collapsing Toolbar image.

+ 14
- 0
ios/RCCViewController.m View File

@@ -439,6 +439,20 @@ const NSInteger TRANSPARENT_NAVBAR_TAG = 78264803;
439 439
     viewController.navigationController.navigationBar.tintColor = nil;
440 440
   }
441 441
   
442
+  BOOL topBarElevationShadowEnabled = self.navigatorStyle[@"topBarElevationShadowEnabled"] != (id)[NSNull null] ? [RCTConvert CGFloat:self.navigatorStyle[@"topBarElevationShadowEnabled"]] : NO;
443
+
444
+  if (topBarElevationShadowEnabled) {
445
+    CGFloat shadowOpacity = self.navigatorStyle[@"topBarShadowOpacity"] != 0 ? [RCTConvert CGFloat:self.navigatorStyle[@"topBarShadowOpacity"]] : 0.2;
446
+    CGFloat shadowOffset = self.navigatorStyle[@"topBarShadowOffset"] != 0 ? [RCTConvert CGFloat:self.navigatorStyle[@"topBarShadowOffset"]] : 3.0;
447
+    CGFloat shadowRadius = self.navigatorStyle[@"topBarShadowRadius"] != 0 ? [RCTConvert CGFloat:self.navigatorStyle[@"topBarShadowRadius"]] : 2.0;
448
+    UIColor *shadowColor = self.navigatorStyle[@"topBarShadowColor"] != (id)[NSNull null] ? [RCTConvert UIColor:self.navigatorStyle[@"topBarShadowColor"]] : UIColor.blackColor;
449
+
450
+    viewController.navigationController.navigationBar.layer.shadowOpacity = shadowOpacity;
451
+    viewController.navigationController.navigationBar.layer.shadowColor = shadowColor.CGColor;
452
+    viewController.navigationController.navigationBar.layer.shadowOffset = CGSizeMake(0, shadowOffset);
453
+    viewController.navigationController.navigationBar.layer.shadowRadius = shadowRadius;
454
+  }
455
+
442 456
   BOOL viewControllerBasedStatusBar = false;
443 457
   
444 458
   NSObject *viewControllerBasedStatusBarAppearance = [[NSBundle mainBundle] infoDictionary][@"UIViewControllerBasedStatusBarAppearance"];