Browse Source

V2 top bar button color iOS (#1637)

* screen Background Color iOS

* ios v2 topBarTextFontFamily

* added topBarHidden to iOS

* minor fix and topBarHideOnScroll

* minor fix

* topBarButtonColor iOS

* topBarTranslucent iOS

* topBarTranslucent IOS minor fixes

* eslint fixes

* minor fixes
bogobogo 7 years ago
parent
commit
330aa3830f

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

@@ -25,4 +25,23 @@ describe('screen style', () => {
25 25
     await elementByLabel('Dynamic Options').tap();
26 26
     await expect(element(by.label('Options Screen'))).toBeVisible();
27 27
   });
28
+
29
+  it('hides Tab Bar when pressing on Hide Top Bar and shows it when pressing on Show Top Bar', async () => {
30
+    await elementByLabel('Push Options Screen').tap();
31
+    await elementByLabel('Hide Top Bar').tap();
32
+    await expect(element(by.type('UINavigationBar'))).toBeNotVisible();
33
+    await elementByLabel('Show Top Bar').tap();
34
+    await expect(element(by.type('UINavigationBar'))).toBeVisible();
35
+  });
36
+
37
+  it('hides topBar onScroll down and shows it on scroll up', async () => {
38
+    await elementByLabel('Push Options Screen').tap();
39
+    await elementByLabel('scrollView Screen').tap();
40
+    await elementByLabel('Toggle Top Bar Hide On Scroll').tap();
41
+    await expect(element(by.type('UINavigationBar'))).toBeVisible();
42
+    await element(by.id('scrollView')).swipe('up', 'fast');
43
+    await expect(element(by.type('UINavigationBar'))).toBeNotVisible();
44
+    await element(by.id('scrollView')).swipe('down', 'fast');
45
+    await expect(element(by.type('UINavigationBar'))).toBeVisible();
46
+  });
28 47
 });

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

@@ -8,8 +8,14 @@
8 8
 @property (nonatomic, strong) NSNumber* statusBarHidden;
9 9
 @property (nonatomic, strong) NSString* title;
10 10
 @property (nonatomic, strong) NSNumber* screenBackgroundColor;
11
-@property (nonatomic, strong) NSString* setTabBadge;
12 11
 @property (nonatomic, strong) NSString* topBarTextFontFamily;
12
+@property (nonatomic, strong) NSNumber* topBarHidden;
13
+@property (nonatomic, strong) NSNumber* topBarHideOnScroll;
14
+@property (nonatomic, strong) NSNumber* topBarButtonColor;
15
+@property (nonatomic, strong) NSNumber* topBarTranslucent;
16
+@property (nonatomic, strong) NSString* setTabBadge;
17
+
18
+
13 19
 
14 20
 -(instancetype)init;
15 21
 -(instancetype)initWithDict:(NSDictionary *)navigationOptions;

+ 45
- 5
lib/ios/RNNNavigationOptions.m View File

@@ -13,9 +13,15 @@
13 13
 	self.topBarBackgroundColor = [navigationOptions objectForKey:@"topBarBackgroundColor"];
14 14
 	self.statusBarHidden = [navigationOptions objectForKey:@"statusBarHidden"];
15 15
 	self.title = [navigationOptions objectForKey:@"title"];
16
+	self.topBarTextColor = [navigationOptions objectForKey:@"topBarTextColor"];
16 17
 	self.screenBackgroundColor = [navigationOptions objectForKey:@"screenBackgroundColor"];
17
-	self.setTabBadge = [navigationOptions objectForKey:@"setTabBadge"];
18 18
 	self.topBarTextFontFamily = [navigationOptions objectForKey:@"topBarTextFontFamily"];
19
+	self.topBarHidden = [navigationOptions objectForKey:@"topBarHidden"];
20
+	self.topBarHideOnScroll = [navigationOptions objectForKey:@"topBarHideOnScroll"];
21
+	self.topBarButtonColor = [navigationOptions objectForKey:@"topBarButtonColor"];
22
+	self.topBarTranslucent = [navigationOptions objectForKey:@"topBarTranslucent"];
23
+	self.setTabBadge = [navigationOptions objectForKey:@"setTabBadge"];
24
+
19 25
 	return self;
20 26
 }
21 27
 
@@ -32,9 +38,11 @@
32 38
 	} else {
33 39
 		viewController.navigationController.navigationBar.barTintColor = nil;
34 40
 	}
41
+	
35 42
 	if (self.title) {
36 43
 		viewController.navigationItem.title = self.title;
37 44
 	}
45
+	
38 46
 	if (self.topBarTextColor) {
39 47
 		UIColor* textColor = [RCTConvert UIColor:self.topBarTextColor];
40 48
 		NSMutableDictionary* navigationBarTitleTextAttributes = [NSMutableDictionary dictionaryWithDictionary:@{NSForegroundColorAttributeName: textColor}];
@@ -45,20 +53,52 @@
45 53
 	} else if (self.topBarTextFontFamily){
46 54
 		viewController.navigationController.navigationBar.titleTextAttributes = @{NSFontAttributeName: [UIFont fontWithName:self.topBarTextFontFamily size:20]};
47 55
 	}
56
+	
48 57
 	if (self.screenBackgroundColor) {
49 58
 		UIColor* screenColor = [RCTConvert UIColor:self.screenBackgroundColor];
50 59
 		viewController.view.backgroundColor = screenColor;
51
-  }
60
+	}
61
+	
62
+	if (self.topBarHidden){
63
+		if ([self.topBarHidden boolValue]) {
64
+			[viewController.navigationController setNavigationBarHidden:YES animated:YES];
65
+		} else {
66
+			[viewController.navigationController setNavigationBarHidden:NO animated:YES];
67
+		}
68
+	}
69
+	
70
+	if (self.topBarHideOnScroll) {
71
+		BOOL topBarHideOnScrollBool = [self.topBarHideOnScroll boolValue];
72
+		if (topBarHideOnScrollBool) {
73
+			viewController.navigationController.hidesBarsOnSwipe = YES;
74
+		} else {
75
+			viewController.navigationController.hidesBarsOnSwipe = NO;
76
+		}
77
+	}
78
+	
79
+	if (self.topBarButtonColor) {
80
+		UIColor* buttonColor = [RCTConvert UIColor:self.topBarButtonColor];
81
+		viewController.navigationController.navigationBar.tintColor = buttonColor;
82
+	} else {
83
+		viewController.navigationController.navigationBar.tintColor = nil;
84
+
52 85
 	if (self.setTabBadge) {
53 86
 		NSString *badge = [RCTConvert NSString:self.setTabBadge];
54 87
 		if (viewController.navigationController) {
55 88
 			viewController.navigationController.tabBarItem.badgeValue = badge;
56 89
     } else {
57 90
 			viewController.tabBarItem.badgeValue = badge;
91
+	}
92
+
93
+	}
94
+	
95
+	if (self.topBarTranslucent) {
96
+		if ([self.topBarTranslucent boolValue]) {
97
+			viewController.navigationController.navigationBar.translucent = YES;
98
+		} else {
99
+			viewController.navigationController.navigationBar.translucent = NO;
58 100
 		}
59 101
 	}
102
+	}
60 103
 }
61
-
62
-
63
-
64 104
 @end

+ 41
- 0
lib/ios/ReactNativeNavigationTests/RNNRootViewControllerTest.m View File

@@ -100,6 +100,47 @@
100 100
 	XCTAssertTrue([self.uut.view.backgroundColor isEqual:expectedColor]);
101 101
 }
102 102
 
103
+-(void)testTopBarTextFontFamily_validFont{
104
+	NSString* inputFont = @"HelveticaNeue";
105
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
106
+	self.options.topBarTextFontFamily = inputFont;
107
+	[self.uut viewWillAppear:false];
108
+	UIFont* expectedFont = [UIFont fontWithName:inputFont size:20];
109
+	XCTAssertTrue([self.uut.navigationController.navigationBar.titleTextAttributes[@"NSFont"] isEqual:expectedFont]);
110
+}
111
+
112
+-(void)testTopBarTextFontFamily_invalidFont{
113
+	NSString* inputFont = @"HelveticaNeueeeee";
114
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
115
+	self.options.topBarTextFontFamily = inputFont;
116
+	XCTAssertThrows([self.uut viewWillAppear:false]);
117
+}
118
+
119
+-(void)testTopBarHideOnScroll_true {
120
+	NSNumber* hideOnScrollInput = @(1);
121
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
122
+	self.options.topBarHideOnScroll = hideOnScrollInput;
123
+	[self.uut viewWillAppear:false];
124
+	XCTAssertTrue(self.uut.navigationController.hidesBarsOnSwipe);
125
+}
126
+
127
+-(void)testTopBarButtonColor {
128
+	NSNumber* inputColor = @(0xFFFF0000);
129
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
130
+	self.options.topBarButtonColor = inputColor;
131
+	[self.uut viewWillAppear:false];
132
+	UIColor* expectedColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
133
+	XCTAssertTrue([self.uut.navigationController.navigationBar.tintColor isEqual:expectedColor]);
134
+}
135
+
136
+-(void)testTopBarTranslucent {
137
+	NSNumber* topBarTranslucentInput = @(0);
138
+	self.options.topBarTranslucent = topBarTranslucentInput;
139
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
140
+	[self.uut viewWillAppear:false];
141
+	XCTAssertFalse(self.uut.navigationController.navigationBar.translucent);
142
+}
143
+
103 144
 
104 145
 
105 146
 @end

+ 25
- 0
playground/src/containers/OptionsScreen.js View File

@@ -19,6 +19,9 @@ class OptionsScreen extends Component {
19 19
   constructor(props) {
20 20
     super(props);
21 21
     this.onClickDynamicOptions = this.onClickDynamicOptions.bind(this);
22
+    this.onClickShowTopBar = this.onClickShowTopBar.bind(this);
23
+    this.onClickHideTopBar = this.onClickHideTopBar.bind(this);
24
+    this.onClickScrollViewScreen = this.onClickScrollViewScreen.bind(this);
22 25
   }
23 26
 
24 27
   render() {
@@ -26,6 +29,9 @@ class OptionsScreen extends Component {
26 29
       <View style={styles.root}>
27 30
         <Text style={styles.h1}>{`Options Screen`}</Text>
28 31
         <Button title="Dynamic Options" onPress={this.onClickDynamicOptions} />
32
+        <Button title="Show Top Bar" onPress={this.onClickShowTopBar} />
33
+        <Button title="Hide Top Bar" onPress={this.onClickHideTopBar} />
34
+        <Button title="scrollView Screen" onPress={this.onClickScrollViewScreen} />
29 35
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
30 36
       </View>
31 37
     );
@@ -36,9 +42,28 @@ class OptionsScreen extends Component {
36 42
       title: 'Dynamic Title',
37 43
       topBarTextColor: '#00FFFF',
38 44
       topBarBackgroundColor: 'green',
45
+      topBarButtonColor: 'red',
39 46
       topBarTextFontFamily: 'HelveticaNeue-CondensedBold'
40 47
     });
41 48
   }
49
+
50
+  onClickScrollViewScreen() {
51
+    Navigation.push(this.props.containerId, {
52
+      name: 'navigation.playground.ScrollViewScreen'
53
+    });
54
+  }
55
+
56
+  onClickShowTopBar() {
57
+    Navigation.setOptions(this.props.containerId, {
58
+      topBarHidden: false
59
+    });
60
+  }
61
+
62
+  onClickHideTopBar() {
63
+    Navigation.setOptions(this.props.containerId, {
64
+      topBarHidden: true
65
+    });
66
+  }
42 67
 }
43 68
 
44 69
 const styles = {

+ 50
- 0
playground/src/containers/ScrollViewScreen.js View File

@@ -0,0 +1,50 @@
1
+import React, { Component } from 'react';
2
+import {
3
+  StyleSheet,
4
+  ScrollView,
5
+  View,
6
+  Button
7
+} from 'react-native';
8
+
9
+import Navigation from 'react-native-navigation';
10
+
11
+class ScrollViewScreen extends Component {
12
+  static get navigationOptions() {
13
+    return {
14
+      topBarTranslucent: false
15
+    };
16
+  }
17
+
18
+  constructor(props) {
19
+    super(props);
20
+    this.state = {
21
+      topBarHideOnScroll: false
22
+    };
23
+    this.onClickToggleTopBarHideOnScroll = this.onClickToggleTopBarHideOnScroll.bind(this);
24
+  }
25
+
26
+  render() {
27
+    return (
28
+      <ScrollView testID="scrollView" contentContainerStyle={styles.contentContainer}>
29
+        <View>
30
+          <Button title="Toggle Top Bar Hide On Scroll" onPress={this.onClickToggleTopBarHideOnScroll} />
31
+        </View>
32
+      </ScrollView>
33
+    );
34
+  }
35
+
36
+  onClickToggleTopBarHideOnScroll() {
37
+    Navigation.setOptions(this.props.containerId, {
38
+      topBarHideOnScroll: !this.state.topBarHideOnScroll
39
+    });
40
+  }
41
+}
42
+
43
+const styles = StyleSheet.create({
44
+  contentContainer: {
45
+    paddingVertical: 20,
46
+    alignItems: 'center',
47
+    height: 1000
48
+  }
49
+});
50
+export default ScrollViewScreen;

+ 2
- 1
playground/src/containers/index.js View File

@@ -1,13 +1,14 @@
1 1
 import Navigation from 'react-native-navigation';
2
-
3 2
 import WelcomeScreen from './WelcomeScreen';
4 3
 import TextScreen from './TextScreen';
5 4
 import PushedScreen from './PushedScreen';
6 5
 import LifecycleScreen from './LifecycleScreen';
7 6
 import ModalScreen from './ModalScreen';
8 7
 import OptionsScreen from './OptionsScreen';
8
+import ScrollViewScreen from './ScrollViewScreen';
9 9
 
10 10
 function registerContainers() {
11
+  Navigation.registerContainer(`navigation.playground.ScrollViewScreen`, () => ScrollViewScreen);
11 12
   Navigation.registerContainer(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
12 13
   Navigation.registerContainer(`navigation.playground.ModalScreen`, () => ModalScreen);
13 14
   Navigation.registerContainer(`navigation.playground.LifecycleScreen`, () => LifecycleScreen);