changed setOptions to receive RNNNavigationOptions and added topBarTextColor (#1616)

* created RNNNavigationOptions

* created RNNRootViewControllerTest and added a test for the topBarBackgroundColor style

* working

* process navigationOptions colors

* created a test for new RNNRootViewController functionality

* changed RNNRootViewController to init with name, navigationOptions and container id, instead of node

* changed RNNRootViewController to get a new type - RNNavigationOptions

* refactored statusBarHidden test and implementation, all tests pass

* added setup to RNNRootViewControllerTest.m and refactored tests

* added test for title and implemented static title

* minor fixes

* removed redundant eslint config

* added topBarTextColor to RNNNavigationOptions

* topBarTextColor RNNRootViewController test

* changed setOptions to receive RNNNavigationOptions. created OptionsProcessor to process colors in both layoutTreeCrawler and Commands

* minor fix

* create setOptionsDynamically in RNNNavigationOptions to make dynamic options merge with static option instead of overriding them

* findcontainerId returns a RNNRootViewController , setOptions now merges styles with the static styles of the view

lib/ios/RNNCommandsHandler.m

@@ -3,6 +3,8 @@
 
 #import "RNNModalManager.h"
 #import "RNNNavigationStackManager.h"
+#import "RNNNavigationOptions.h"
+#import "RNNRootViewController.h"
 
 @implementation RNNCommandsHandler {
 	RNNControllerFactory *_controllerFactory;
@@ -35,20 +37,9 @@
 
 -(void) setOptions:(NSString*)containerId options:(NSDictionary*)options {
 	[self assertReady];
-	UIViewController* vc = [_store findContainerForId:containerId];
-	
-	NSString* title = options[@"title"];
-	NSString* topBarTextColor = options[@"topBarTextColor"];
-	
-	[vc setTitle:title];
-	
-	int rgb = [[topBarTextColor substringFromIndex:1] intValue];
-	UIColor* color = [UIColor colorWithRed:((float)((rgb & 0xFF0000) >> 16))/255.0 \
-									 green:((float)((rgb & 0x00FF00) >>  8))/255.0 \
-									  blue:((float)((rgb & 0x0000FF) >>  0))/255.0 \
-									 alpha:1.0];
-	vc.navigationController.navigationBar.titleTextAttributes = @{NSForegroundColorAttributeName: color};
-	
+	RNNRootViewController* vc = [_store findContainerForId:containerId];
+	[vc.navigationOptions setOptionsDynamically:options];
+	[vc.navigationOptions apply:vc];
 }
 
 -(void) push:(NSString*)containerId layout:(NSDictionary*)layout {

lib/ios/RNNModalManager.m

@@ -1,4 +1,5 @@
 #import "RNNModalManager.h"
+#import "RNNRootViewController.h"
 
 @implementation RNNModalManager {
 	RNNStore *_store;
@@ -33,7 +34,7 @@
 -(void)removePendingNextModalIfOnTop {
 	NSString *containerId = [[_store pendingModalIdsToDismiss] lastObject];
 	
-	UIViewController *modalToDismiss = [_store findContainerForId:containerId];
+	RNNRootViewController *modalToDismiss = [_store findContainerForId:containerId];
 	
 	if(!modalToDismiss) {
 		return;

lib/ios/RNNNavigationOptions.h

@@ -4,12 +4,14 @@
 @interface RNNNavigationOptions : NSObject
 
 @property (nonatomic, strong) NSNumber* topBarBackgroundColor;
+@property (nonatomic, strong) NSNumber* topBarTextColor;
 @property (nonatomic, strong) NSNumber* statusBarHidden;
 @property (nonatomic, strong) NSString* title;
 
 -(instancetype)initWithDict:(NSDictionary *)navigationOptions;
 
 -(void)apply:(UIViewController*)viewController;
+-(void)setOptionsDynamically:(NSDictionary*)dynamicOptions;
 
 @end
 

lib/ios/RNNNavigationOptions.m

@@ -9,9 +9,16 @@
 	self.topBarBackgroundColor = [navigationOptions objectForKey:@"topBarBackgroundColor"];
 	self.statusBarHidden = [navigationOptions objectForKey:@"statusBarHidden"];
 	self.title = [navigationOptions objectForKey:@"title"];
+	self.topBarTextColor = [navigationOptions objectForKey:@"topBarTextColor"];
 	return self;
 }
 
+-(void)setOptionsDynamically:(NSDictionary *)dynamicOptions {
+	for(id key in dynamicOptions) {
+		[self setValue:[dynamicOptions objectForKey:key] forKey:key];
+	}
+}
+
 -(void)apply:(UIViewController*)viewController{
 	if (self.topBarBackgroundColor) {
 		UIColor* backgroundColor = [RCTConvert UIColor:self.topBarBackgroundColor];
@@ -20,8 +27,10 @@
 	if (self.title) {
 		viewController.navigationItem.title = self.title;
 	}
-	
-
+	if (self.topBarTextColor) {
+		UIColor* textColor = [RCTConvert UIColor:self.topBarTextColor];
+		viewController.navigationController.navigationBar.titleTextAttributes = @{NSForegroundColorAttributeName:textColor};
+	}
 }
 
 

lib/ios/RNNNavigationStackManager.m

@@ -1,4 +1,5 @@
 #import "RNNNavigationStackManager.h"
+#import "RNNRootViewController.h"
 
 @implementation RNNNavigationStackManager {
 	RNNStore *_store;
@@ -11,12 +12,12 @@
 }
 
 -(void)push:(UIViewController *)newTop onTop:(NSString *)containerId {
-	UIViewController *vc = [_store findContainerForId:containerId];
+	RNNRootViewController *vc = [_store findContainerForId:containerId];
 	[[vc navigationController] pushViewController:newTop animated:YES];
 }
 
 -(void)pop:(NSString *)containerId {
-	UIViewController* vc = [_store findContainerForId:containerId];
+	RNNRootViewController* vc = [_store findContainerForId:containerId];
 	UINavigationController* nvc = [vc navigationController];
 	if ([nvc topViewController] == vc) {
 		[nvc popViewControllerAnimated:YES];
@@ -29,7 +30,7 @@
 }
 
 -(void)popTo:(NSString*)containerId {
-	UIViewController *vc = [_store findContainerForId:containerId];
+	RNNRootViewController *vc = [_store findContainerForId:containerId];
 	
 	if (vc) {
 		UINavigationController *nvc = [vc navigationController];
@@ -41,7 +42,7 @@
 }
 
 -(void) popToRoot:(NSString*)containerId {
-	UIViewController* vc = [_store findContainerForId:containerId];
+	RNNRootViewController* vc = [_store findContainerForId:containerId];
 	UINavigationController* nvc = [vc navigationController];
 	NSArray* poppedVCs = [nvc popToRootViewControllerAnimated:YES];
 	[self removePopedViewControllers:poppedVCs];

lib/ios/RNNRootViewController.h

@@ -8,10 +8,13 @@
 
 @interface RNNRootViewController : UIViewController
 
+@property (nonatomic, strong) RNNNavigationOptions* navigationOptions;
+
 -(instancetype)initWithName:(NSString*)name
 				withOptions:(RNNNavigationOptions*)options
 			withContainerId:(NSString*)containerId
 			rootViewCreator:(id<RNNRootViewCreator>)creator
 			   eventEmitter:(RNNEventEmitter*)eventEmitter;
 
+
 @end

lib/ios/RNNRootViewController.m

@@ -8,7 +8,6 @@
 @property (nonatomic, strong) NSString* containerName;
 @property (nonatomic, strong) RNNEventEmitter *eventEmitter;
 @property (nonatomic) BOOL _statusBarHidden;
-@property (nonatomic, strong) RNNNavigationOptions* navigationOptions;
 
 @end
 
@@ -35,7 +34,6 @@
 	return [self.navigationOptions.statusBarHidden boolValue]; // || self.navigationController.isNavigationBarHidden;
 }
 
-
 -(void)viewDidAppear:(BOOL)animated {
 	[super viewDidAppear:animated];
 	[self.eventEmitter sendContainerStart:self.containerId];

lib/ios/RNNStore.h

@@ -1,10 +1,11 @@
 
 #import <Foundation/Foundation.h>
 #import <UIKit/UIKit.h>
+#import "RNNRootViewController.h"
 
 @interface RNNStore : NSObject
 
--(UIViewController*) findContainerForId:(NSString*)containerId;
+-(RNNRootViewController*) findContainerForId:(NSString*)containerId;
 -(void) setContainer:(UIViewController*)viewController containerId:(NSString*)containerId;
 -(void) removeContainer:(NSString*)containerId;
 -(void) removeContainerByViewControllerInstance:(UIViewController*)containerInstance;

lib/ios/RNNStore.m

@@ -1,6 +1,6 @@
 
 #import "RNNStore.h"
-
+#import "RNNRootViewController.h"
 @interface RNNStore ()
 
 @end
@@ -19,12 +19,12 @@
 	return self;
 }
 
--(UIViewController *)findContainerForId:(NSString *)containerId {
+-(RNNRootViewController *)findContainerForId:(NSString *)containerId {
 	return [_containerStore objectForKey:containerId];
 }
 
 - (void)setContainer:(UIViewController*)viewController containerId:(NSString*)containerId {
-	UIViewController *existingVewController = [self findContainerForId:containerId];
+	RNNRootViewController *existingVewController = [self findContainerForId:containerId];
 	if (existingVewController) {
 		@throw [NSException exceptionWithName:@"MultipleContainerId" reason:[@"Container id already exists " stringByAppendingString:containerId] userInfo:nil];
 	}

lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

@@ -323,11 +323,11 @@
 				7BA500771E254908001B9E1B /* RNNSplashScreen.m */,
 				7BEF0D1A1E43771B003E96B0 /* RNNLayoutNode.h */,
 				7BEF0D1B1E43771B003E96B0 /* RNNLayoutNode.m */,
-				7BC9346C1E26886E00EFA125 /* RNNControllerFactory.h */,
 				7BC9346D1E26886E00EFA125 /* RNNControllerFactory.m */,
 				7BEF0D161E437684003E96B0 /* RNNRootViewController.h */,
 				7BEF0D171E437684003E96B0 /* RNNRootViewController.m */,
 				263905D41E4C94970023D7D3 /* RNNSideMenuController.h */,
+				7BC9346C1E26886E00EFA125 /* RNNControllerFactory.h */,
 				263905D51E4C94970023D7D3 /* RNNSideMenuController.m */,
 				263905E41E4CAC950023D7D3 /* RNNSideMenuChildVC.h */,
 				263905E51E4CAC950023D7D3 /* RNNSideMenuChildVC.m */,

lib/ios/ReactNativeNavigationTests/RNNCommandsHandlerTest.m

@@ -1,17 +1,38 @@
 #import <XCTest/XCTest.h>
 #import <objc/runtime.h>
 #import "RNNCommandsHandler.h"
+#import "RNNNavigationOptions.h"
+#import "RNNTestRootViewCreator.h"
+#import "RNNRootViewController.h"
 
 @interface RNNCommandsHandlerTest : XCTestCase
 
+@property (nonatomic, strong) id<RNNRootViewCreator> creator;
+@property (nonatomic, strong) NSString* pageName;
+@property (nonatomic, strong) NSString* containerId;
+@property (nonatomic, strong) id emitter;
+@property (nonatomic, strong) RNNStore* store;
+@property (nonatomic, strong) RNNNavigationOptions* options;
+@property (nonatomic, strong) RNNRootViewController* viewController;
+@property (nonatomic, strong) RNNCommandsHandler* cmdHandler;
+
 @end
 
 @implementation RNNCommandsHandlerTest
 
 - (void)setUp {
 	[super setUp];
-	
-	
+	self.creator = [[RNNTestRootViewCreator alloc] init];
+	self.pageName = @"somename";
+	self.containerId = @"cntId";
+	self.emitter = nil;
+	self.options = [[RNNNavigationOptions alloc] initWithDict:@{@"title" : @"static title"}];
+	self.store = [RNNStore new];
+	self.viewController = [[RNNRootViewController alloc] initWithName:self.pageName withOptions:self.options withContainerId:self.containerId rootViewCreator:self.creator eventEmitter:self.emitter];
+	[self.store setReadyToReceiveCommands:true];
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.viewController];
+	[self.store setContainer:self.viewController containerId:self.containerId];
+	self.cmdHandler = [[RNNCommandsHandler alloc] initWithStore:self.store controllerFactory:nil];
 }
 
 
@@ -53,6 +74,22 @@
 	return result;
 }
 
+-(void)testDynamicTopBarBackgroundColor_validColor {
+	NSDictionary* dictFromJs = @{@"topBarBackgroundColor" :@(0xFFFF0000)};
+	UIColor* expectedColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
+	[self.cmdHandler setOptions:self.containerId options:dictFromJs];
+	XCTAssertTrue([self.viewController.navigationController.navigationBar.barTintColor isEqual:expectedColor]);
+}
+
+-(void)testDynamicStylesMergeWithStaticStyles {
+	NSDictionary* dictFromJs = @{@"topBarBackgroundColor" :@(0xFFFF0000)};
+	UIColor* expectedColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
+	[self.cmdHandler setOptions:self.containerId options:dictFromJs];
+	XCTAssertTrue([self.viewController.navigationController.navigationBar.barTintColor isEqual:expectedColor]);
+	XCTAssertTrue([self.viewController.navigationItem.title isEqual:@"static title"]);
+}
+
+
 
 
 @end

lib/ios/ReactNativeNavigationTests/RNNNavigationOptionsTest.m

@@ -15,6 +15,26 @@
 	RNNNavigationOptions* options = [[RNNNavigationOptions alloc] initWithDict:@{}];
 	XCTAssertTrue([options isKindOfClass:[RNNNavigationOptions class]]);
 }
+-(void)testAddsStyleFromDictionaryWithInit{
+	RNNNavigationOptions* options = [[RNNNavigationOptions alloc] initWithDict:@{@"topBarBackgroundColor" : @(0xff0000ff)}];
+	XCTAssertTrue(options.topBarBackgroundColor);
+}
+-(void)testReturnsNilWhenStyleDoesNotExist{
+	RNNNavigationOptions* options = [[RNNNavigationOptions alloc] initWithDict:@{@"topBarBackgroundColor" : @(0xff0000ff)}];
+	XCTAssertNil(options.topBarTextColor);
+}
 
+-(void)testChangeRNNNavigationOptionsDynamically{
+	RNNNavigationOptions* options = [[RNNNavigationOptions alloc] initWithDict:@{@"topBarBackgroundColor" : @(0xff0000ff)}];
+	NSDictionary* dynamicOptions = @{@"topBarTextColor" : @(0xffff00ff), @"title" : @"hello"};
+    [options setOptionsDynamically:dynamicOptions];
+	XCTAssertTrue([options.title isEqual:@"hello"]);
+	
+}
 
+-(void)testChangeRNNNavigationOptionsWithInvalidProperties{
+	RNNNavigationOptions* options = [[RNNNavigationOptions alloc] initWithDict:@{@"topBarBackgroundColor" : @(0xff0000ff)}];
+	NSDictionary* dynamicOptions = @{@"titleeeee" : @"hello"};
+	XCTAssertThrows([options setOptionsDynamically:dynamicOptions]);
+}
 @end

lib/ios/ReactNativeNavigationTests/RNNRootViewControllerTest.m

@@ -83,5 +83,14 @@
 	XCTAssertNil(self.uut.navigationItem.title);
 }
 
+-(void)testTopBarTextColor_validColor{
+	NSNumber* inputColor = @(0xFFFF0000);
+	self.options.topBarTextColor = inputColor;
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+	UIColor* expectedColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
+	XCTAssertTrue([self.uut.navigationController.navigationBar.titleTextAttributes[@"NSColor"] isEqual:expectedColor]);
+}
+
 
 @end

lib/src/commands/Commands.js

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import optionsProcessor from './OptionsProcessor';
 
 export default class Commands {
   constructor(nativeCommandsSender, layoutTreeParser, layoutTreeCrawler) {
@@ -16,6 +17,7 @@ export default class Commands {
 
   setOptions(containerId, options) {
     const input = _.cloneDeep(options);
+    optionsProcessor(input);
     this.nativeCommandsSender.setOptions(containerId, input);
   }
 

lib/src/commands/LayoutTreeCrawler.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import { processColor } from 'react-native';
 import LayoutTypes from './LayoutTypes';
+import optionsProcessor from './OptionsProcessor';
 
 export default class LayoutTreeCrawler {
   constructor(uniqueIdProvider, store) {
@@ -25,18 +26,7 @@ export default class LayoutTreeCrawler {
     this.store.setPropsForContainerId(node.id, node.data.passProps);
     const clazz = this.store.getOriginalContainerClassForName(node.data.name);
     node.data.navigationOptions = _.cloneDeep(_.get(clazz, 'navigationOptions', {}));
-    this._processNavigationOptionsColors(node.data.navigationOptions);
-  }
-
-  _processNavigationOptionsColors(navigationOptions) {
-    _.forEach(navigationOptions, (value, key) => {
-      if (_.endsWith(key, 'Color')) {
-        navigationOptions[key] = processColor(value);
-      }
-      if (_.isPlainObject(value)) {
-        this._processNavigationOptionsColors(value);
-      }
-    });
+    optionsProcessor(node.data.navigationOptions);
   }
 
   _assertKnownLayoutType(type) {

lib/src/commands/OptionsProcessor.js

@@ -0,0 +1,13 @@
+import _ from 'lodash';
+import { processColor } from 'react-native';
+
+export default function optionsProcessor(navigationOptions) {
+  _.forEach(navigationOptions, (value, key) => {
+    if (_.endsWith(key, 'Color')) {
+      navigationOptions[key] = processColor(value);
+    }
+    if (_.isPlainObject(value)) {
+      optionsProcessor(value);
+    }
+  });
+}

lib/src/commands/OptionsProcessor.test.js

@@ -0,0 +1,78 @@
+import optionsProcessor from './OptionsProcessor';
+ 
+describe('navigation options', () => {
+  let navigationOptions;
+
+  beforeEach(() => {
+    navigationOptions = {};
+  });
+
+  it('processes colors into numeric AARRGGBB', () => {
+    navigationOptions.someKeyColor = 'red';
+    optionsProcessor(navigationOptions);
+    expect(navigationOptions.someKeyColor).toEqual(0xffff0000);
+
+    navigationOptions.someKeyColor = 'yellow';
+    optionsProcessor(navigationOptions);
+    expect(navigationOptions.someKeyColor).toEqual(0xffffff00);
+  });
+
+  it('processes numeric colors', () => {
+    navigationOptions.someKeyColor = '#123456';
+    optionsProcessor(navigationOptions);
+    expect(navigationOptions.someKeyColor).toEqual(0xff123456);
+
+    navigationOptions.someKeyColor = 0x123456ff; // wut
+    optionsProcessor(navigationOptions);
+    expect(navigationOptions.someKeyColor).toEqual(0xff123456);
+  });
+
+  it('process colors with rgb functions', () => {
+    navigationOptions.someKeyColor = 'rgb(255, 0, 255)';
+    optionsProcessor(navigationOptions);
+    expect(navigationOptions.someKeyColor).toEqual(0xffff00ff);
+  });
+
+  it('process colors with special words', () => {
+    navigationOptions.someKeyColor = 'fuchsia';
+    optionsProcessor(navigationOptions);
+    expect(navigationOptions.someKeyColor).toEqual(0xffff00ff);
+  });
+
+  it('process colors with hsla functions', () => {
+    navigationOptions.someKeyColor = 'hsla(360, 100%, 100%, 1.0)';
+    optionsProcessor(navigationOptions);
+
+    expect(navigationOptions.someKeyColor).toEqual(0xffffffff);
+  });
+
+  it('unknown colors return undefined', () => {
+    navigationOptions.someKeyColor = 'wut';
+    optionsProcessor(navigationOptions);
+    expect(navigationOptions.someKeyColor).toEqual(undefined);
+  });
+
+  it('any keys ending with Color', () => {
+    navigationOptions.otherKeyColor = 'red';
+    navigationOptions.yetAnotherColor = 'blue';
+    navigationOptions.andAnotherColor = 'rgb(0, 255, 0)';
+    optionsProcessor(navigationOptions);
+    expect(navigationOptions.otherKeyColor).toEqual(0xffff0000);
+    expect(navigationOptions.yetAnotherColor).toEqual(0xff0000ff);
+    expect(navigationOptions.andAnotherColor).toEqual(0xff00ff00);
+  });
+
+  it('keys ending with Color case sensitive', () => {
+    navigationOptions.otherKey_color = 'red';
+    optionsProcessor(navigationOptions);
+    expect(navigationOptions.otherKey_color).toEqual('red');
+  });
+
+  it('any nested recursive keys ending with Color', () => {
+    navigationOptions.innerObj = { theKeyColor: 'red' };
+    navigationOptions.innerObj.innerMostObj = { anotherColor: 'yellow' };
+    optionsProcessor(navigationOptions);
+    expect(navigationOptions.innerObj.theKeyColor).toEqual(0xffff0000);
+    expect(navigationOptions.innerObj.innerMostObj.anotherColor).toEqual(0xffffff00);
+  });
+});

playground/src/containers/OptionsScreen.js

@@ -34,7 +34,8 @@ class OptionsScreen extends Component {
   onClickDynamicOptions() {
     Navigation.setOptions(this.props.containerId, {
       title: 'Dynamic Title',
-      topBarTextColor: '#123456'
+      topBarTextColor: '#00FFFF',
+      topBarBackgroundColor: 'green'
     });
   }
 }