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
   navBarComponentAlignment: 'center', // center/fill
55
   navBarComponentAlignment: 'center', // center/fill
56
   navBarCustomViewInitialProps: {}, // navBar custom component props
56
   navBarCustomViewInitialProps: {}, // navBar custom component props
57
   navBarButtonColor: '#007aff', // Change color of nav bar buttons (eg. the back button) (remembered across pushes)
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
   navBarHidden: false, // make the nav bar hidden
59
   navBarHidden: false, // make the nav bar hidden
60
   navBarHideOnScroll: false, // make the nav bar hidden only after the user starts to scroll
60
   navBarHideOnScroll: false, // make the nav bar hidden only after the user starts to scroll
61
   navBarTranslucent: false, // make the nav bar semi-translucent, works best with drawUnderNavBar:true
61
   navBarTranslucent: false, // make the nav bar semi-translucent, works best with drawUnderNavBar:true
94
   navBarRightButtonFontSize: 17, // Change font size of right nav bar button
94
   navBarRightButtonFontSize: 17, // Change font size of right nav bar button
95
   navBarRightButtonColor: 'blue', // Change color of right nav bar button
95
   navBarRightButtonColor: 'blue', // Change color of right nav bar button
96
   navBarRightButtonFontWeight: '600', // Change font weight of right nav bar button
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
   // Android only
103
   // Android only
99
   navigationBarColor: '#000000', // change the background color of the bottom native navigation bar.
104
   navigationBarColor: '#000000', // change the background color of the bottom native navigation bar.
100
   navBarTitleTextCentered: true, // default: false. centers the title.
105
   navBarTitleTextCentered: true, // default: false. centers the title.
101
   navBarButtonFontFamily: 'sans-serif-thin', // Change the font family of textual buttons
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
   statusBarColor: '#000000', // change the color of the status bar.
107
   statusBarColor: '#000000', // change the color of the status bar.
104
   drawUnderStatusBar: false, // default: false, will draw the screen underneath the statusbar. Useful togheter with statusBarColor: transparent
108
   drawUnderStatusBar: false, // default: false, will draw the screen underneath the statusbar. Useful togheter with statusBarColor: transparent
105
   collapsingToolBarImage: "http://lorempixel.com/400/200/", // Collapsing Toolbar image.
109
   collapsingToolBarImage: "http://lorempixel.com/400/200/", // Collapsing Toolbar image.

+ 14
- 0
ios/RCCViewController.m View File

439
     viewController.navigationController.navigationBar.tintColor = nil;
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
   BOOL viewControllerBasedStatusBar = false;
456
   BOOL viewControllerBasedStatusBar = false;
443
   
457
   
444
   NSObject *viewControllerBasedStatusBarAppearance = [[NSBundle mainBundle] infoDictionary][@"UIViewControllerBasedStatusBarAppearance"];
458
   NSObject *viewControllerBasedStatusBarAppearance = [[NSBundle mainBundle] infoDictionary][@"UIViewControllerBasedStatusBarAppearance"];