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

e2e/ScreenStyle.test.js

@@ -25,4 +25,23 @@ describe('screen style', () => {
     await elementByLabel('Dynamic Options').tap();
     await expect(element(by.label('Options Screen'))).toBeVisible();
   });
+
+  it('hides Tab Bar when pressing on Hide Top Bar and shows it when pressing on Show Top Bar', async () => {
+    await elementByLabel('Push Options Screen').tap();
+    await elementByLabel('Hide Top Bar').tap();
+    await expect(element(by.type('UINavigationBar'))).toBeNotVisible();
+    await elementByLabel('Show Top Bar').tap();
+    await expect(element(by.type('UINavigationBar'))).toBeVisible();
+  });
+
+  it('hides topBar onScroll down and shows it on scroll up', async () => {
+    await elementByLabel('Push Options Screen').tap();
+    await elementByLabel('scrollView Screen').tap();
+    await elementByLabel('Toggle Top Bar Hide On Scroll').tap();
+    await expect(element(by.type('UINavigationBar'))).toBeVisible();
+    await element(by.id('scrollView')).swipe('up', 'fast');
+    await expect(element(by.type('UINavigationBar'))).toBeNotVisible();
+    await element(by.id('scrollView')).swipe('down', 'fast');
+    await expect(element(by.type('UINavigationBar'))).toBeVisible();
+  });
 });

lib/ios/RNNNavigationOptions.h

@@ -8,8 +8,14 @@
 @property (nonatomic, strong) NSNumber* statusBarHidden;
 @property (nonatomic, strong) NSString* title;
 @property (nonatomic, strong) NSNumber* screenBackgroundColor;
-@property (nonatomic, strong) NSString* setTabBadge;
 @property (nonatomic, strong) NSString* topBarTextFontFamily;
+@property (nonatomic, strong) NSNumber* topBarHidden;
+@property (nonatomic, strong) NSNumber* topBarHideOnScroll;
+@property (nonatomic, strong) NSNumber* topBarButtonColor;
+@property (nonatomic, strong) NSNumber* topBarTranslucent;
+@property (nonatomic, strong) NSString* setTabBadge;
+
+
 
 -(instancetype)init;
 -(instancetype)initWithDict:(NSDictionary *)navigationOptions;

lib/ios/RNNNavigationOptions.m

@@ -13,9 +13,15 @@
 	self.topBarBackgroundColor = [navigationOptions objectForKey:@"topBarBackgroundColor"];
 	self.statusBarHidden = [navigationOptions objectForKey:@"statusBarHidden"];
 	self.title = [navigationOptions objectForKey:@"title"];
+	self.topBarTextColor = [navigationOptions objectForKey:@"topBarTextColor"];
 	self.screenBackgroundColor = [navigationOptions objectForKey:@"screenBackgroundColor"];
-	self.setTabBadge = [navigationOptions objectForKey:@"setTabBadge"];
 	self.topBarTextFontFamily = [navigationOptions objectForKey:@"topBarTextFontFamily"];
+	self.topBarHidden = [navigationOptions objectForKey:@"topBarHidden"];
+	self.topBarHideOnScroll = [navigationOptions objectForKey:@"topBarHideOnScroll"];
+	self.topBarButtonColor = [navigationOptions objectForKey:@"topBarButtonColor"];
+	self.topBarTranslucent = [navigationOptions objectForKey:@"topBarTranslucent"];
+	self.setTabBadge = [navigationOptions objectForKey:@"setTabBadge"];
+
 	return self;
 }
 
@@ -32,9 +38,11 @@
 	} else {
 		viewController.navigationController.navigationBar.barTintColor = nil;
 	}
+	
 	if (self.title) {
 		viewController.navigationItem.title = self.title;
 	}
+	
 	if (self.topBarTextColor) {
 		UIColor* textColor = [RCTConvert UIColor:self.topBarTextColor];
 		NSMutableDictionary* navigationBarTitleTextAttributes = [NSMutableDictionary dictionaryWithDictionary:@{NSForegroundColorAttributeName: textColor}];
@@ -45,20 +53,52 @@
 	} else if (self.topBarTextFontFamily){
 		viewController.navigationController.navigationBar.titleTextAttributes = @{NSFontAttributeName: [UIFont fontWithName:self.topBarTextFontFamily size:20]};
 	}
+	
 	if (self.screenBackgroundColor) {
 		UIColor* screenColor = [RCTConvert UIColor:self.screenBackgroundColor];
 		viewController.view.backgroundColor = screenColor;
-  }
+	}
+	
+	if (self.topBarHidden){
+		if ([self.topBarHidden boolValue]) {
+			[viewController.navigationController setNavigationBarHidden:YES animated:YES];
+		} else {
+			[viewController.navigationController setNavigationBarHidden:NO animated:YES];
+		}
+	}
+	
+	if (self.topBarHideOnScroll) {
+		BOOL topBarHideOnScrollBool = [self.topBarHideOnScroll boolValue];
+		if (topBarHideOnScrollBool) {
+			viewController.navigationController.hidesBarsOnSwipe = YES;
+		} else {
+			viewController.navigationController.hidesBarsOnSwipe = NO;
+		}
+	}
+	
+	if (self.topBarButtonColor) {
+		UIColor* buttonColor = [RCTConvert UIColor:self.topBarButtonColor];
+		viewController.navigationController.navigationBar.tintColor = buttonColor;
+	} else {
+		viewController.navigationController.navigationBar.tintColor = nil;
+
 	if (self.setTabBadge) {
 		NSString *badge = [RCTConvert NSString:self.setTabBadge];
 		if (viewController.navigationController) {
 			viewController.navigationController.tabBarItem.badgeValue = badge;
     } else {
 			viewController.tabBarItem.badgeValue = badge;
+	}
+
+	}
+	
+	if (self.topBarTranslucent) {
+		if ([self.topBarTranslucent boolValue]) {
+			viewController.navigationController.navigationBar.translucent = YES;
+		} else {
+			viewController.navigationController.navigationBar.translucent = NO;
 		}
 	}
+	}
 }
-
-
-
 @end

lib/ios/ReactNativeNavigationTests/RNNRootViewControllerTest.m

@@ -100,6 +100,47 @@
 	XCTAssertTrue([self.uut.view.backgroundColor isEqual:expectedColor]);
 }
 
+-(void)testTopBarTextFontFamily_validFont{
+	NSString* inputFont = @"HelveticaNeue";
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	self.options.topBarTextFontFamily = inputFont;
+	[self.uut viewWillAppear:false];
+	UIFont* expectedFont = [UIFont fontWithName:inputFont size:20];
+	XCTAssertTrue([self.uut.navigationController.navigationBar.titleTextAttributes[@"NSFont"] isEqual:expectedFont]);
+}
+
+-(void)testTopBarTextFontFamily_invalidFont{
+	NSString* inputFont = @"HelveticaNeueeeee";
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	self.options.topBarTextFontFamily = inputFont;
+	XCTAssertThrows([self.uut viewWillAppear:false]);
+}
+
+-(void)testTopBarHideOnScroll_true {
+	NSNumber* hideOnScrollInput = @(1);
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	self.options.topBarHideOnScroll = hideOnScrollInput;
+	[self.uut viewWillAppear:false];
+	XCTAssertTrue(self.uut.navigationController.hidesBarsOnSwipe);
+}
+
+-(void)testTopBarButtonColor {
+	NSNumber* inputColor = @(0xFFFF0000);
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	self.options.topBarButtonColor = inputColor;
+	[self.uut viewWillAppear:false];
+	UIColor* expectedColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
+	XCTAssertTrue([self.uut.navigationController.navigationBar.tintColor isEqual:expectedColor]);
+}
+
+-(void)testTopBarTranslucent {
+	NSNumber* topBarTranslucentInput = @(0);
+	self.options.topBarTranslucent = topBarTranslucentInput;
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+	XCTAssertFalse(self.uut.navigationController.navigationBar.translucent);
+}
+
 
 
 @end

playground/src/containers/OptionsScreen.js

@@ -19,6 +19,9 @@ class OptionsScreen extends Component {
   constructor(props) {
     super(props);
     this.onClickDynamicOptions = this.onClickDynamicOptions.bind(this);
+    this.onClickShowTopBar = this.onClickShowTopBar.bind(this);
+    this.onClickHideTopBar = this.onClickHideTopBar.bind(this);
+    this.onClickScrollViewScreen = this.onClickScrollViewScreen.bind(this);
   }
 
   render() {
@@ -26,6 +29,9 @@ class OptionsScreen extends Component {
       <View style={styles.root}>
         <Text style={styles.h1}>{`Options Screen`}</Text>
         <Button title="Dynamic Options" onPress={this.onClickDynamicOptions} />
+        <Button title="Show Top Bar" onPress={this.onClickShowTopBar} />
+        <Button title="Hide Top Bar" onPress={this.onClickHideTopBar} />
+        <Button title="scrollView Screen" onPress={this.onClickScrollViewScreen} />
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>
     );
@@ -36,9 +42,28 @@ class OptionsScreen extends Component {
       title: 'Dynamic Title',
       topBarTextColor: '#00FFFF',
       topBarBackgroundColor: 'green',
+      topBarButtonColor: 'red',
       topBarTextFontFamily: 'HelveticaNeue-CondensedBold'
     });
   }
+
+  onClickScrollViewScreen() {
+    Navigation.push(this.props.containerId, {
+      name: 'navigation.playground.ScrollViewScreen'
+    });
+  }
+
+  onClickShowTopBar() {
+    Navigation.setOptions(this.props.containerId, {
+      topBarHidden: false
+    });
+  }
+
+  onClickHideTopBar() {
+    Navigation.setOptions(this.props.containerId, {
+      topBarHidden: true
+    });
+  }
 }
 
 const styles = {

playground/src/containers/ScrollViewScreen.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  ScrollView,
+  View,
+  Button
+} from 'react-native';
+
+import Navigation from 'react-native-navigation';
+
+class ScrollViewScreen extends Component {
+  static get navigationOptions() {
+    return {
+      topBarTranslucent: false
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      topBarHideOnScroll: false
+    };
+    this.onClickToggleTopBarHideOnScroll = this.onClickToggleTopBarHideOnScroll.bind(this);
+  }
+
+  render() {
+    return (
+      <ScrollView testID="scrollView" contentContainerStyle={styles.contentContainer}>
+        <View>
+          <Button title="Toggle Top Bar Hide On Scroll" onPress={this.onClickToggleTopBarHideOnScroll} />
+        </View>
+      </ScrollView>
+    );
+  }
+
+  onClickToggleTopBarHideOnScroll() {
+    Navigation.setOptions(this.props.containerId, {
+      topBarHideOnScroll: !this.state.topBarHideOnScroll
+    });
+  }
+}
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    paddingVertical: 20,
+    alignItems: 'center',
+    height: 1000
+  }
+});
+export default ScrollViewScreen;

playground/src/containers/index.js

@@ -1,13 +1,14 @@
 import Navigation from 'react-native-navigation';
-
 import WelcomeScreen from './WelcomeScreen';
 import TextScreen from './TextScreen';
 import PushedScreen from './PushedScreen';
 import LifecycleScreen from './LifecycleScreen';
 import ModalScreen from './ModalScreen';
 import OptionsScreen from './OptionsScreen';
+import ScrollViewScreen from './ScrollViewScreen';
 
 function registerContainers() {
+  Navigation.registerContainer(`navigation.playground.ScrollViewScreen`, () => ScrollViewScreen);
   Navigation.registerContainer(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
   Navigation.registerContainer(`navigation.playground.ModalScreen`, () => ModalScreen);
   Navigation.registerContainer(`navigation.playground.LifecycleScreen`, () => LifecycleScreen);