Parcourir la source

[BREAKING] Top bar options changes (#4040)

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

* fix unit tests
Yogev Ben David il y a 6 ans
Parent
révision
37882ab179
No account linked to committer's email address

+ 9
- 3
docs/docs/options-migration.md Voir le fichier

@@ -145,7 +145,9 @@ Transparent TopBar. Set `drawBehind: true` to draw the screen behind the transpa
145 145
 
146 146
 ```js
147 147
 topBar: {
148
-  transparent: true
148
+  background: {
149
+    color: 'transparent'
150
+  }
149 151
 }  
150 152
 ```
151 153
 
@@ -417,7 +419,9 @@ Translucent TopBar, Setting `drawBehind: true` is required for this property to
417 419
 
418 420
 ```js
419 421
 topBar: {
420
-  translucent: true
422
+  background: {
423
+    translucent: true
424
+  }
421 425
 }
422 426
 ```
423 427
 
@@ -435,7 +439,9 @@ Blue the area behind the TopBar, Setting `drawBehind: true` is required for this
435 439
 
436 440
 ```js
437 441
 topBar: {
438
-  blur: true
442
+  background: {
443
+    blur: true
444
+  }
439 445
 }  
440 446
 ```
441 447
 

+ 4
- 3
docs/docs/styling.md Voir le fichier

@@ -169,10 +169,11 @@ Navigation.mergeOptions(this.props.componentId, {
169 169
   rootBackgroundImage: require('rootBackground.png'),
170 170
   topBar: {
171 171
     barStyle: 'default' | 'black',
172
-    translucent: true,
173
-    transparent: false,
172
+    background: {
173
+      translucent: true,
174
+      blur: false
175
+    }
174 176
     noBorder: false,
175
-    blur: false,
176 177
     backButton: {
177 178
       title: 'Back',
178 179
       showTitle: false

+ 2
- 0
lib/ios/RNNBackgroundOptions.h Voir le fichier

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

+ 83
- 1
lib/ios/RNNBackgroundOptions.m Voir le fichier

@@ -1,12 +1,94 @@
1 1
 #import "RNNBackgroundOptions.h"
2 2
 
3
+extern const NSInteger BLUR_TOPBAR_TAG;
4
+const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
5
+
6
+@interface RNNBackgroundOptions()
7
+
8
+@property (nonatomic, strong) NSMutableDictionary* originalTopBarImages;
9
+
10
+@end
11
+
3 12
 @implementation RNNBackgroundOptions
4 13
 
5 14
 - (void)applyOnNavigationController:(UINavigationController *)navigationController {
15
+	if (self.translucent) {
16
+		navigationController.navigationBar.translucent = [self.translucent boolValue];
17
+	} else {
18
+		navigationController.navigationBar.translucent = NO;
19
+	}
20
+	
21
+	if ([self.blur boolValue]) {
22
+		if (![navigationController.navigationBar viewWithTag:BLUR_TOPBAR_TAG]) {
23
+
24
+			[navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
25
+			navigationController.navigationBar.shadowImage = [UIImage new];
26
+			UIVisualEffectView *blur = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
27
+			CGRect statusBarFrame = [[UIApplication sharedApplication] statusBarFrame];
28
+			blur.frame = CGRectMake(0, -1 * statusBarFrame.size.height, navigationController.navigationBar.frame.size.width, navigationController.navigationBar.frame.size.height + statusBarFrame.size.height);
29
+			blur.userInteractionEnabled = NO;
30
+			blur.tag = BLUR_TOPBAR_TAG;
31
+			[navigationController.navigationBar insertSubview:blur atIndex:0];
32
+			[navigationController.navigationBar sendSubviewToBack:blur];
33
+		}
34
+	} else {
35
+		UIView *blur = [navigationController.navigationBar viewWithTag:BLUR_TOPBAR_TAG];
36
+		if (blur) {
37
+			[navigationController.navigationBar setBackgroundImage: nil forBarMetrics:UIBarMetricsDefault];
38
+			navigationController.navigationBar.shadowImage = nil;
39
+			[blur removeFromSuperview];
40
+		}
41
+	}
42
+	
6 43
 	if (self.color && ![self.color isKindOfClass:[NSNull class]]) {
7 44
 		UIColor* backgroundColor = [RCTConvert UIColor:self.color];
8
-		navigationController.navigationBar.barTintColor = backgroundColor;
45
+
46
+		CGFloat bgColorAlpha = CGColorGetAlpha(backgroundColor.CGColor);
47
+
48
+		if (bgColorAlpha == 0.0) {
49
+			if (![navigationController.navigationBar viewWithTag:TOP_BAR_TRANSPARENT_TAG]){
50
+				[self storeOriginalTopBarImages:navigationController];
51
+				UIView *transparentView = [[UIView alloc] initWithFrame:CGRectZero];
52
+				transparentView.backgroundColor = [UIColor clearColor];
53
+				transparentView.tag = TOP_BAR_TRANSPARENT_TAG;
54
+				[navigationController.navigationBar insertSubview:transparentView atIndex:0];
55
+			}
56
+			navigationController.navigationBar.translucent = YES;
57
+			[navigationController.navigationBar setBackgroundColor:[UIColor clearColor]];
58
+			navigationController.navigationBar.shadowImage = [UIImage new];
59
+			[navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
60
+		} else {
61
+			navigationController.navigationBar.barTintColor = backgroundColor;
62
+			UIView *transparentView = [navigationController.navigationBar viewWithTag:TOP_BAR_TRANSPARENT_TAG];
63
+			if (transparentView){
64
+				[transparentView removeFromSuperview];
65
+				[navigationController.navigationBar setBackgroundImage:self.originalTopBarImages[@"backgroundImage"] forBarMetrics:UIBarMetricsDefault];
66
+				navigationController.navigationBar.shadowImage = self.originalTopBarImages[@"shadowImage"];
67
+				self.originalTopBarImages = nil;
68
+			}
69
+		}
70
+	} else {
71
+		UIView *transparentView = [navigationController.navigationBar viewWithTag:TOP_BAR_TRANSPARENT_TAG];
72
+		if (transparentView){
73
+			[transparentView removeFromSuperview];
74
+			[navigationController.navigationBar setBackgroundImage:self.originalTopBarImages[@"backgroundImage"] forBarMetrics:UIBarMetricsDefault];
75
+			navigationController.navigationBar.shadowImage = self.originalTopBarImages[@"shadowImage"];
76
+			self.originalTopBarImages = nil;
77
+		}
78
+	}
79
+}
80
+
81
+- (void)storeOriginalTopBarImages:(UINavigationController *)navigationController {
82
+	NSMutableDictionary *originalTopBarImages = [@{} mutableCopy];
83
+	UIImage *bgImage = [navigationController.navigationBar backgroundImageForBarMetrics:UIBarMetricsDefault];
84
+	if (bgImage != nil) {
85
+		originalTopBarImages[@"backgroundImage"] = bgImage;
86
+	}
87
+	UIImage *shadowImage = navigationController.navigationBar.shadowImage;
88
+	if (shadowImage != nil) {
89
+		originalTopBarImages[@"shadowImage"] = shadowImage;
9 90
 	}
91
+	self.originalTopBarImages = originalTopBarImages;
10 92
 }
11 93
 
12 94
 @end

+ 0
- 3
lib/ios/RNNTopBarOptions.h Voir le fichier

@@ -18,11 +18,8 @@
18 18
 @property (nonatomic, strong) NSNumber* leftButtonDisabledColor;
19 19
 @property (nonatomic, strong) NSNumber* rightButtonDisabledColor;
20 20
 @property (nonatomic, strong) NSString* barStyle;
21
-@property (nonatomic, strong) NSNumber* translucent;
22
-@property (nonatomic, strong) NSNumber* transparent;
23 21
 @property (nonatomic, strong) NSNumber* drawBehind;
24 22
 @property (nonatomic, strong) NSNumber* noBorder;
25
-@property (nonatomic, strong) NSNumber* blur;
26 23
 @property (nonatomic, strong) NSNumber* animate;
27 24
 @property (nonatomic, strong) NSString* testID;
28 25
 @property (nonatomic, strong) RNNLargeTitleOptions* largeTitle;

+ 1
- 73
lib/ios/RNNTopBarOptions.m Voir le fichier

@@ -2,13 +2,8 @@
2 2
 #import "RNNNavigationButtons.h"
3 3
 #import "RNNCustomTitleView.h"
4 4
 
5
-extern const NSInteger BLUR_TOPBAR_TAG;
6
-const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
7
-
8
-
9 5
 @interface RNNTopBarOptions ()
10 6
 
11
-@property (nonatomic, strong) NSMutableDictionary* originalTopBarImages;
12 7
 @property (nonatomic, strong) RNNNavigationButtons* navigationButtons;
13 8
 
14 9
 @end
@@ -75,7 +70,6 @@ const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
75 70
 }
76 71
 
77 72
 - (void)applyOnNavigationController:(UINavigationController *)navigationController {
78
-	[self.background applyOnNavigationController:navigationController];
79 73
 	if (self.testID) {
80 74
 		navigationController.navigationBar.accessibilityIdentifier = self.testID;
81 75
 	}
@@ -102,66 +96,13 @@ const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
102 96
 		}
103 97
 	}
104 98
 	
105
-	if ([self.blur boolValue]) {
106
-		if (![navigationController.navigationBar viewWithTag:BLUR_TOPBAR_TAG]) {
107
-			
108
-			[navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
109
-			navigationController.navigationBar.shadowImage = [UIImage new];
110
-			UIVisualEffectView *blur = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
111
-			CGRect statusBarFrame = [[UIApplication sharedApplication] statusBarFrame];
112
-			blur.frame = CGRectMake(0, -1 * statusBarFrame.size.height, navigationController.navigationBar.frame.size.width, navigationController.navigationBar.frame.size.height + statusBarFrame.size.height);
113
-			blur.userInteractionEnabled = NO;
114
-			blur.tag = BLUR_TOPBAR_TAG;
115
-			[navigationController.navigationBar insertSubview:blur atIndex:0];
116
-			[navigationController.navigationBar sendSubviewToBack:blur];
117
-		}
118
-	} else {
119
-		UIView *blur = [navigationController.navigationBar viewWithTag:BLUR_TOPBAR_TAG];
120
-		if (blur) {
121
-			[navigationController.navigationBar setBackgroundImage: nil forBarMetrics:UIBarMetricsDefault];
122
-			navigationController.navigationBar.shadowImage = nil;
123
-			[blur removeFromSuperview];
124
-		}
125
-	}
126
-	
127
-	void (^disableTopBarTransparent)(void) = ^ {
128
-		UIView *transparentView = [navigationController.navigationBar viewWithTag:TOP_BAR_TRANSPARENT_TAG];
129
-		if (transparentView){
130
-			[transparentView removeFromSuperview];
131
-			[navigationController.navigationBar setBackgroundImage:self.originalTopBarImages[@"backgroundImage"] forBarMetrics:UIBarMetricsDefault];
132
-			navigationController.navigationBar.shadowImage = self.originalTopBarImages[@"shadowImage"];
133
-			self.originalTopBarImages = nil;
134
-		}
135
-	};
136
-	
137
-	if (self.transparent) {
138
-		if ([self.transparent boolValue]) {
139
-			if (![navigationController.navigationBar viewWithTag:TOP_BAR_TRANSPARENT_TAG]){
140
-				[self storeOriginalTopBarImages:navigationController];
141
-				[navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
142
-				navigationController.navigationBar.shadowImage = [UIImage new];
143
-				UIView *transparentView = [[UIView alloc] initWithFrame:CGRectZero];
144
-				transparentView.tag = TOP_BAR_TRANSPARENT_TAG;
145
-				[navigationController.navigationBar insertSubview:transparentView atIndex:0];
146
-			}
147
-		} else {
148
-			disableTopBarTransparent();
149
-		}
150
-	} else {
151
-		disableTopBarTransparent();
152
-	}
153
-	
154 99
 	if (self.barStyle) {
155 100
 		navigationController.navigationBar.barStyle = [RCTConvert UIBarStyle:self.barStyle];
156 101
 	} else {
157 102
 		navigationController.navigationBar.barStyle = UIBarStyleDefault;
158 103
 	}
159 104
 	
160
-	if (self.translucent) {
161
-		navigationController.navigationBar.translucent = [self.translucent boolValue];
162
-	} else {
163
-		navigationController.navigationBar.translucent = NO;
164
-	}
105
+	[self.background applyOnNavigationController:navigationController];
165 106
 }
166 107
 
167 108
 - (void)setRightButtonColor:(NSNumber *)rightButtonColor {
@@ -212,17 +153,4 @@ const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
212 153
 	}
213 154
 }
214 155
 
215
--(void)storeOriginalTopBarImages:(UINavigationController *)navigationController {
216
-	NSMutableDictionary *originalTopBarImages = [@{} mutableCopy];
217
-	UIImage *bgImage = [navigationController.navigationBar backgroundImageForBarMetrics:UIBarMetricsDefault];
218
-	if (bgImage != nil) {
219
-		originalTopBarImages[@"backgroundImage"] = bgImage;
220
-	}
221
-	UIImage *shadowImage = navigationController.navigationBar.shadowImage;
222
-	if (shadowImage != nil) {
223
-		originalTopBarImages[@"shadowImage"] = shadowImage;
224
-	}
225
-	self.originalTopBarImages = originalTopBarImages;
226
-}
227
-
228 156
 @end

+ 7
- 13
lib/ios/ReactNativeNavigationTests/RNNRootViewControllerTest.m Voir le fichier

@@ -179,7 +179,7 @@
179 179
 
180 180
 -(void)testTopBarTranslucent {
181 181
 	NSNumber* topBarTranslucentInput = @(0);
182
-	self.options.topBar.translucent = topBarTranslucentInput;
182
+	self.options.topBar.background.translucent = topBarTranslucentInput;
183 183
 	__unused RNNNavigationController* nav = [self createNavigationController];
184 184
 	[self.uut viewWillAppear:false];
185 185
 	XCTAssertFalse(self.uut.navigationController.navigationBar.translucent);
@@ -200,8 +200,8 @@
200 200
 }
201 201
 
202 202
 -(void)testTopBarTransparent_BOOL_True {
203
-	NSNumber* topBarTransparentInput = @(1);
204
-	self.options.topBar.transparent = topBarTransparentInput;
203
+	NSNumber* transparentColor = @(0x00000000);
204
+	self.options.topBar.background.color = transparentColor;
205 205
 	__unused RNNNavigationController* nav = [self createNavigationController];
206 206
 	[self.uut viewWillAppear:false];
207 207
 	UIView* transparentView = [self.uut.navigationController.navigationBar viewWithTag:TOP_BAR_TRANSPARENT_TAG];
@@ -210,20 +210,14 @@
210 210
 }
211 211
 
212 212
 -(void)testTopBarTransparent_BOOL_false {
213
-	NSNumber* topBarTransparentInput = @(0);
213
+	NSNumber* inputColor = @(0xFFFF0000);
214 214
 	__unused RNNNavigationController* nav = [self createNavigationController];
215
-	self.options.topBar.transparent = topBarTransparentInput;
215
+	self.options.topBar.background.color = inputColor;
216 216
 	[self.uut viewWillAppear:false];
217 217
 	UIView* transparentView = [self.uut.navigationController.navigationBar viewWithTag:TOP_BAR_TRANSPARENT_TAG];
218 218
 	XCTAssertFalse(transparentView);
219 219
 }
220 220
 
221
-
222
--(void)testStoreOriginalTopBarImages {
223
-
224
-}
225
-
226
-
227 221
 -(void)testTopBarLargeTitle_default {
228 222
 	__unused RNNNavigationController* nav = [self createNavigationController];
229 223
 	[self.uut viewWillAppear:false];
@@ -564,7 +558,7 @@
564 558
 
565 559
 -(void)testTopBarBlur_false {
566 560
 	NSNumber* topBarBlurInput = @(0);
567
-	self.options.topBar.blur = topBarBlurInput;
561
+	self.options.topBar.background.blur = topBarBlurInput;
568 562
 	__unused RNNNavigationController* nav = [self createNavigationController];
569 563
 	[self.uut viewWillAppear:false];
570 564
 	XCTAssertNil([self.uut.navigationController.navigationBar viewWithTag:BLUR_TOPBAR_TAG]);
@@ -572,7 +566,7 @@
572 566
 
573 567
 -(void)testTopBarBlur_true {
574 568
 	NSNumber* topBarBlurInput = @(1);
575
-	self.options.topBar.blur = topBarBlurInput;
569
+	self.options.topBar.background.blur = topBarBlurInput;
576 570
 	__unused RNNNavigationController* nav = [self createNavigationController];
577 571
 	[self.uut viewWillAppear:false];
578 572
 	XCTAssertNotNil([self.uut.navigationController.navigationBar viewWithTag:BLUR_TOPBAR_TAG]);

+ 10
- 17
lib/src/interfaces/Options.ts Voir le fichier

@@ -194,6 +194,16 @@ export interface  OptionsTopBarBackground {
194 194
   component?: {
195 195
     name?: string;
196 196
   };
197
+  /**
198
+   * Allows the NavBar to be translucent (blurred)
199
+   * #### (iOS specific)
200
+   */
201
+  translucent?: boolean;
202
+  /**
203
+   * Enable background blur
204
+   * #### (iOS specific)
205
+   */
206
+  blur?: boolean;
197 207
 }
198 208
 
199 209
 export interface OptionsTopBarButton {
@@ -294,28 +304,12 @@ export interface OptionsTopBar {
294 304
    * @default 'default'
295 305
    */
296 306
   barStyle?: 'default' | 'black';
297
-  /**
298
-   * Allows the NavBar to be translucent (blurred)
299
-   * #### (iOS specific)
300
-   * @requires transparent: false
301
-   */
302
-  translucent?: boolean;
303
-  /**
304
-   * Allows the NavBar to be transparent
305
-   * #### (iOS specific)
306
-   */
307
-  transparent?: boolean;
308 307
   /**
309 308
    * Disable the border on bottom of the navbar
310 309
    * #### (iOS specific)
311 310
    * @default false
312 311
    */
313 312
   noBorder?: boolean;
314
-  /**
315
-   * Enable background blur
316
-   * #### (iOS specific)
317
-   */
318
-  blur?: boolean;
319 313
   /**
320 314
    * Show a UISearchBar in the Top Bar
321 315
    * #### (iOS 11+ specific)
@@ -397,7 +391,6 @@ export interface OptionsBottomTabs {
397 391
   /**
398 392
    * Allows the Bottom Tabs to be translucent (blurred)
399 393
    * #### (iOS specific)
400
-   * @requires transparent: false
401 394
    */
402 395
   translucent?: boolean;
403 396
   /**

+ 3
- 1
playground/src/screens/CustomTransitionOrigin.js Voir le fichier

@@ -18,7 +18,9 @@ class CustomTransitionOrigin extends Component {
18 18
         largeTitle: {
19 19
           visible: false
20 20
         },
21
-        translucent: true
21
+        background: {
22
+          translucent: true
23
+        }
22 24
       }
23 25
     };
24 26
   }

+ 6
- 2
playground/src/screens/OptionsScreen.js Voir le fichier

@@ -219,7 +219,9 @@ class OptionsScreen extends Component {
219 219
   onClickTopBarTransparent = () => {
220 220
     Navigation.mergeOptions(this.props.componentId, {
221 221
       topBar: {
222
-        transparent: true
222
+        background: {
223
+          color: 'transparent'
224
+        }
223 225
       }
224 226
     });
225 227
   }
@@ -227,7 +229,9 @@ class OptionsScreen extends Component {
227 229
   onClickTopBarOpaque = () => {
228 230
     Navigation.mergeOptions(this.props.componentId, {
229 231
       topBar: {
230
-        transparent: false
232
+        background: {
233
+          color: 'white'
234
+        }
231 235
       }
232 236
     });
233 237
   }

+ 6
- 3
playground/src/screens/PushedScreen.js Voir le fichier

@@ -20,11 +20,14 @@ class PushedScreen extends Component {
20 20
           text: 'single',
21 21
           testID: testIDs.TOP_BAR_BUTTON
22 22
         },
23
+        background: {
24
+          color: 'blue'
25
+        },
23 26
         rightButtonColor: 'red',
24 27
       },
25
-      layout: {
26
-        backgroundColor: '#f5fcff'
27
-      },
28
+      // layout: {
29
+      //   backgroundColor: '#f5fcff'
30
+      // },
28 31
       bottomTabs: {
29 32
         visible: false
30 33
       }

+ 6
- 2
playground/src/screens/SearchScreen.js Voir le fichier

@@ -27,7 +27,9 @@ class SearchControllerScreen extends Component {
27 27
           visible: true
28 28
         },
29 29
         searchBar: true,
30
-        translucent: true,
30
+        background: {
31
+          translucent: true
32
+        },
31 33
         searchBarPlaceholder: 'Start Typing'
32 34
       }
33 35
     };
@@ -75,7 +77,9 @@ class SearchControllerScreen extends Component {
75 77
             largeTitle: {
76 78
               visible: true
77 79
             },
78
-            translucent: true,
80
+            background: {
81
+              translucent: true
82
+            }
79 83
           }
80 84
         }
81 85
       },