Browse Source

V2 tabBarHidden (#2297)

* added tabBar toggle

* added tabBarHidden e2e

* changed tabBar api prop to bottomTabs

* unit test fix
yogevbd 7 years ago
parent
commit
d429c9876c

+ 15
- 0
e2e/ScreenStyle.test.js View File

59
     await expect(element(by.text('TeSt'))).toBeVisible();
59
     await expect(element(by.text('TeSt'))).toBeVisible();
60
   });
60
   });
61
 
61
 
62
+  it('hide Tab Bar', async () => {
63
+    await elementByLabel('Switch to tab based app').tap();
64
+    await expect(element(by.type('UITabBar'))).toBeVisible();
65
+    await elementByLabel('Hide Tab Bar').tap();
66
+    await expect(element(by.type('UITabBar'))).toBeNotVisible();
67
+  });
68
+
69
+  it('show Tab Bar', async () => {
70
+    await elementByLabel('Switch to tab based app').tap();
71
+    await elementByLabel('Hide Tab Bar').tap();
72
+    await expect(element(by.type('UITabBar'))).toBeNotVisible();
73
+    await elementByLabel('Show Tab Bar').tap();
74
+    await expect(element(by.type('UITabBar'))).toBeVisible();
75
+  });
76
+
62
   it('set right buttons', async () => {
77
   it('set right buttons', async () => {
63
     await elementByLabel('Push Options Screen').tap();
78
     await elementByLabel('Push Options Screen').tap();
64
     await expect(elementById('buttonOne')).toBeVisible();
79
     await expect(elementById('buttonOne')).toBeVisible();

+ 1
- 1
lib/android/app/src/main/java/com/reactnativenavigation/parse/NavigationOptions.java View File

30
 		if (json == null) return result;
30
 		if (json == null) return result;
31
 
31
 
32
 		result.topBarOptions = TopBarOptions.parse(json.optJSONObject("topBar"));
32
 		result.topBarOptions = TopBarOptions.parse(json.optJSONObject("topBar"));
33
-		result.bottomTabsOptions = BottomTabsOptions.parse(json.optJSONObject("tabBar"));
33
+		result.bottomTabsOptions = BottomTabsOptions.parse(json.optJSONObject("bottomTabs"));
34
 
34
 
35
 		return result.withDefaultOptions(defaultOptions);
35
 		return result.withDefaultOptions(defaultOptions);
36
 	}
36
 	}

+ 4
- 4
lib/android/app/src/test/java/com/reactnativenavigation/parse/NavigationOptionsTest.java View File

34
 	public void parsesJson() throws Exception {
34
 	public void parsesJson() throws Exception {
35
 		JSONObject json = new JSONObject()
35
 		JSONObject json = new JSONObject()
36
                 .put("topBar", createTopBar())
36
                 .put("topBar", createTopBar())
37
-                .put("tabBar", createTabBar());
37
+                .put("bottomTabs", createTabBar());
38
 		NavigationOptions result = NavigationOptions.parse(json);
38
 		NavigationOptions result = NavigationOptions.parse(json);
39
         assertResult(result);
39
         assertResult(result);
40
 	}
40
 	}
99
     public void mergeDefaultOptions() throws Exception {
99
     public void mergeDefaultOptions() throws Exception {
100
         JSONObject json = new JSONObject();
100
         JSONObject json = new JSONObject();
101
         json.put("topBar", createTopBar());
101
         json.put("topBar", createTopBar());
102
-        json.put("tabBar", createTabBar());
102
+        json.put("bottomTabs", createTabBar());
103
         NavigationOptions defaultOptions = NavigationOptions.parse(json);
103
         NavigationOptions defaultOptions = NavigationOptions.parse(json);
104
         NavigationOptions options = new NavigationOptions();
104
         NavigationOptions options = new NavigationOptions();
105
 
105
 
111
     public void mergedDefaultOptionsDontOverrideGivenOptions() throws Exception {
111
     public void mergedDefaultOptionsDontOverrideGivenOptions() throws Exception {
112
         JSONObject defaultJson = new JSONObject()
112
         JSONObject defaultJson = new JSONObject()
113
             .put("topBar", createOtherTopBar())
113
             .put("topBar", createOtherTopBar())
114
-            .put("tabBar", createOtherTabBar());
114
+            .put("bottomTabs", createOtherTabBar());
115
         NavigationOptions defaultOptions = NavigationOptions.parse(defaultJson);
115
         NavigationOptions defaultOptions = NavigationOptions.parse(defaultJson);
116
 
116
 
117
         JSONObject json = new JSONObject()
117
         JSONObject json = new JSONObject()
118
                 .put("topBar", createTopBar())
118
                 .put("topBar", createTopBar())
119
-                .put("tabBar", createTabBar());
119
+                .put("bottomTabs", createTabBar());
120
         NavigationOptions options = NavigationOptions.parse(json);
120
         NavigationOptions options = NavigationOptions.parse(json);
121
         options.withDefaultOptions(defaultOptions);
121
         options.withDefaultOptions(defaultOptions);
122
         assertResult(options);
122
         assertResult(options);

+ 1
- 1
lib/ios/RNNNavigationOptions.h View File

20
 @property (nonatomic, strong) NSNumber* statusBarHideWithTopBar;
20
 @property (nonatomic, strong) NSNumber* statusBarHideWithTopBar;
21
 @property (nonatomic, strong) NSNumber* popGesture;
21
 @property (nonatomic, strong) NSNumber* popGesture;
22
 @property (nonatomic, strong) RNNTopBarOptions* topBar;
22
 @property (nonatomic, strong) RNNTopBarOptions* topBar;
23
-@property (nonatomic, strong) RNNTabBarOptions* tabBar;
23
+@property (nonatomic, strong) RNNTabBarOptions* bottomTabs;
24
 
24
 
25
 
25
 
26
 - (UIInterfaceOrientationMask)supportedOrientations;
26
 - (UIInterfaceOrientationMask)supportedOrientations;

+ 11
- 8
lib/ios/RNNNavigationOptions.m View File

25
 	self.leftButtons = [navigationOptions objectForKey:@"leftButtons"];
25
 	self.leftButtons = [navigationOptions objectForKey:@"leftButtons"];
26
 	self.rightButtons = [navigationOptions objectForKey:@"rightButtons"];
26
 	self.rightButtons = [navigationOptions objectForKey:@"rightButtons"];
27
 	self.topBar = [[RNNTopBarOptions alloc] initWithDict:[navigationOptions objectForKey:@"topBar"]];
27
 	self.topBar = [[RNNTopBarOptions alloc] initWithDict:[navigationOptions objectForKey:@"topBar"]];
28
-	self.tabBar = [[RNNTabBarOptions alloc] initWithDict:[navigationOptions objectForKey:@"tabBar"]];
28
+	self.bottomTabs = [[RNNTabBarOptions alloc] initWithDict:[navigationOptions objectForKey:@"bottomTabs"]];
29
 	
29
 	
30
 	return self;
30
 	return self;
31
 }
31
 }
34
 	for (id key in otherOptions) {
34
 	for (id key in otherOptions) {
35
 		if ([key isEqualToString:@"topBar"]) {
35
 		if ([key isEqualToString:@"topBar"]) {
36
 			[self.topBar mergeWith:[otherOptions objectForKey:key]];
36
 			[self.topBar mergeWith:[otherOptions objectForKey:key]];
37
-		} else if ([key isEqualToString:@"tabBar"]) {
38
-			[self.tabBar mergeWith:[otherOptions objectForKey:key]];
37
+		} else if ([key isEqualToString:@"bottomTabs"]) {
38
+			[self.bottomTabs mergeWith:[otherOptions objectForKey:key]];
39
 		} else {
39
 		} else {
40
 			[self setValue:[otherOptions objectForKey:key] forKey:key];
40
 			[self setValue:[otherOptions objectForKey:key] forKey:key];
41
 		}
41
 		}
176
 		viewController.view.backgroundColor = screenColor;
176
 		viewController.view.backgroundColor = screenColor;
177
 	}
177
 	}
178
 	
178
 	
179
-	if (self.tabBar) {
180
-		if (self.tabBar.tabBadge) {
181
-			NSString *badge = [RCTConvert NSString:self.tabBar.tabBadge];
179
+	if (self.bottomTabs) {
180
+		if (self.bottomTabs.tabBadge) {
181
+			NSString *badge = [RCTConvert NSString:self.bottomTabs.tabBadge];
182
 			if (viewController.navigationController) {
182
 			if (viewController.navigationController) {
183
 				viewController.navigationController.tabBarItem.badgeValue = badge;
183
 				viewController.navigationController.tabBarItem.badgeValue = badge;
184
 			} else {
184
 			} else {
185
 				viewController.tabBarItem.badgeValue = badge;
185
 				viewController.tabBarItem.badgeValue = badge;
186
 			}
186
 			}
187
 		}
187
 		}
188
-		if (self.tabBar.currentTabIndex) {
189
-			[viewController.tabBarController setSelectedIndex:[self.tabBar.currentTabIndex unsignedIntegerValue]];
188
+		if (self.bottomTabs.currentTabIndex) {
189
+			[viewController.tabBarController setSelectedIndex:[self.bottomTabs.currentTabIndex unsignedIntegerValue]];
190
+		}
191
+		if (self.bottomTabs.hidden) {
192
+			[((RNNTabBarController *)viewController.tabBarController) setTabBarHidden:[self.bottomTabs.hidden boolValue] animated:[self.bottomTabs.animateHide boolValue]];
190
 		}
193
 		}
191
 	}
194
 	}
192
 	
195
 	

+ 2
- 2
lib/ios/RNNRootViewController.m View File

61
 
61
 
62
 - (BOOL)hidesBottomBarWhenPushed
62
 - (BOOL)hidesBottomBarWhenPushed
63
 {
63
 {
64
-	if (self.navigationOptions.tabBar && self.navigationOptions.tabBar.hidden) {
65
-		return [self.navigationOptions.tabBar.hidden boolValue];
64
+	if (self.navigationOptions.bottomTabs && self.navigationOptions.bottomTabs.hidden) {
65
+		return [self.navigationOptions.bottomTabs.hidden boolValue];
66
 	}
66
 	}
67
 	return NO;
67
 	return NO;
68
 }
68
 }

+ 2
- 0
lib/ios/RNNTabBarController.h View File

3
 
3
 
4
 @interface RNNTabBarController : UITabBarController
4
 @interface RNNTabBarController : UITabBarController
5
 
5
 
6
+- (void)setTabBarHidden:(BOOL)hidden animated:(BOOL)animated;
7
+
6
 @end
8
 @end

+ 13
- 0
lib/ios/RNNTabBarController.m View File

1
 
1
 
2
 #import "RNNTabBarController.h"
2
 #import "RNNTabBarController.h"
3
+#define kTabBarHiddenDuration 0.3
3
 
4
 
4
 @implementation RNNTabBarController
5
 @implementation RNNTabBarController
5
 
6
 
7
 	return self.selectedViewController.supportedInterfaceOrientations;
8
 	return self.selectedViewController.supportedInterfaceOrientations;
8
 }
9
 }
9
 
10
 
11
+- (void)setTabBarHidden:(BOOL)hidden animated:(BOOL)animated {
12
+	CGRect frame = self.tabBar.frame;
13
+	CGFloat height = frame.size.height;
14
+	CGFloat offsetY = (hidden ? self.view.frame.size.height : self.view.frame.size.height-height);
15
+	frame.origin.y = offsetY;
16
+	NSTimeInterval duration = animated ? kTabBarHiddenDuration : 0.0;
17
+	
18
+	[UIView animateWithDuration:duration animations:^{
19
+		self.tabBar.frame = frame;
20
+	}];
21
+}
22
+
10
 @end
23
 @end

+ 3
- 3
lib/ios/ReactNativeNavigationTests/RNNRootViewControllerTest.m View File

174
 
174
 
175
 -(void)testTabBadge {
175
 -(void)testTabBadge {
176
 	NSString* tabBadgeInput = @"5";
176
 	NSString* tabBadgeInput = @"5";
177
-	self.options.tabBar.tabBadge = tabBadgeInput;
177
+	self.options.bottomTabs.tabBadge = tabBadgeInput;
178
 	__unused RNNTabBarController* vc = [[RNNTabBarController alloc] init];
178
 	__unused RNNTabBarController* vc = [[RNNTabBarController alloc] init];
179
 	NSMutableArray* controllers = [NSMutableArray new];
179
 	NSMutableArray* controllers = [NSMutableArray new];
180
 	UITabBarItem* item = [[UITabBarItem alloc] initWithTitle:@"A Tab" image:nil tag:1];
180
 	UITabBarItem* item = [[UITabBarItem alloc] initWithTitle:@"A Tab" image:nil tag:1];
456
 
456
 
457
 
457
 
458
 - (void)testTabBarHidden_true {
458
 - (void)testTabBarHidden_true {
459
-	self.options.tabBar.hidden = @(1);
459
+	self.options.bottomTabs.hidden = @(1);
460
 	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
460
 	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
461
 	[self.uut viewWillAppear:false];
461
 	[self.uut viewWillAppear:false];
462
 
462
 
464
 }
464
 }
465
 
465
 
466
 - (void)testTabBarHidden_false {
466
 - (void)testTabBarHidden_false {
467
-	self.options.tabBar.hidden = @(0);
467
+	self.options.bottomTabs.hidden = @(0);
468
 	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
468
 	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
469
 	[self.uut viewWillAppear:false];
469
 	[self.uut viewWillAppear:false];
470
 
470
 

+ 15
- 3
playground/src/containers/TextScreen.js View File

15
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
15
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
16
         <Button title={'Set Tab Badge'} onPress={() => this.onButtonPress()} />
16
         <Button title={'Set Tab Badge'} onPress={() => this.onButtonPress()} />
17
         <Button title="Switch To Tab 2" onPress={() => this.onClickSwitchToTab()} />
17
         <Button title="Switch To Tab 2" onPress={() => this.onClickSwitchToTab()} />
18
+        <Button title="Hide Tab Bar" onPress={() => this.hideTabBar(true)} />
19
+        <Button title="Show Tab Bar" onPress={() => this.hideTabBar(false)} />
18
       </View>
20
       </View>
19
     );
21
     );
20
   }
22
   }
30
 
32
 
31
   onButtonPress() {
33
   onButtonPress() {
32
     Navigation.setOptions(this.props.containerId, {
34
     Navigation.setOptions(this.props.containerId, {
33
-      tabBar: {
35
+      bottomTabs: {
34
         tabBadge: `TeSt`
36
         tabBadge: `TeSt`
35
       }
37
       }
36
     });
38
     });
38
 
40
 
39
   onClickSwitchToTab() {
41
   onClickSwitchToTab() {
40
     Navigation.setOptions(this.props.containerId, {
42
     Navigation.setOptions(this.props.containerId, {
41
-      tabBar: {
42
-        currentTabIndex: 1
43
+      bottomTabs: {
44
+        currentTabIndex: 1,
45
+        hidden: true,
46
+        animateHide: true
47
+      }
48
+    });
49
+  }
50
+
51
+  hideTabBar(hidden) {
52
+    Navigation.setOptions(this.props.containerId, {
53
+      bottomTabs: {
54
+        hidden
43
       }
55
       }
44
     });
56
     });
45
   }
57
   }