v2 tdd styles - topBarBackgroundColor, RNNNavigationOptions, style refactor (#1574)

* 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

lib/ios/RNNControllerFactory.m

@@ -4,6 +4,7 @@
 #import "RNNRootViewController.h"
 #import "RNNSideMenuController.h"
 #import "RNNSideMenuChildVC.h"
+#import "RNNNavigationOptions.h"
 
 
 @implementation RNNControllerFactory {
@@ -75,7 +76,10 @@
 }
 
 - (RNNRootViewController*)createContainer:(RNNLayoutNode*)node {
-	return [[RNNRootViewController alloc] initWithNode:node rootViewCreator:_creator eventEmitter:_eventEmitter];
+	NSString* name = node.data[@"name"];
+	RNNNavigationOptions* options = [[RNNNavigationOptions alloc] initWithDict:node.data[@"navigationOptions"]];
+	NSString* containerId = node.nodeId;
+	return [[RNNRootViewController alloc] initWithName:name withOptions:options withContainerId:containerId rootViewCreator:_creator eventEmitter:_eventEmitter];
 }
 
 - (UINavigationController*)createContainerStack:(RNNLayoutNode*)node {

lib/ios/RNNNavigationOptions.h

@@ -0,0 +1,15 @@
+#import <Foundation/Foundation.h>
+#import <UIKit/UIKit.h>
+
+@interface RNNNavigationOptions : NSObject
+
+@property (nonatomic, strong) NSNumber* topBarBackgroundColor;
+@property (nonatomic, strong) NSNumber* statusBarHidden;
+@property (nonatomic, strong) NSString* title;
+
+-(instancetype)initWithDict:(NSDictionary *)navigationOptions;
+
+-(void)apply:(UIViewController*)viewController;
+
+@end
+

lib/ios/RNNNavigationOptions.m

@@ -0,0 +1,30 @@
+#import "RNNNavigationOptions.h"
+#import <React/RCTConvert.h>
+
+@implementation RNNNavigationOptions
+
+
+-(instancetype)initWithDict:(NSDictionary *)navigationOptions {
+	self = [super init];
+	self.topBarBackgroundColor = [navigationOptions objectForKey:@"topBarBackgroundColor"];
+	self.statusBarHidden = [navigationOptions objectForKey:@"statusBarHidden"];
+	self.title = [navigationOptions objectForKey:@"title"];
+	return self;
+}
+
+-(void)apply:(UIViewController*)viewController{
+	if (self.topBarBackgroundColor) {
+		UIColor* backgroundColor = [RCTConvert UIColor:self.topBarBackgroundColor];
+		viewController.navigationController.navigationBar.barTintColor = backgroundColor;
+	}
+	if (self.title) {
+		viewController.navigationItem.title = self.title;
+	}
+	
+
+}
+
+
+
+
+@end

lib/ios/RNNRootViewController.h

@@ -4,10 +4,13 @@
 #import "RNNLayoutNode.h"
 #import "RNNRootViewCreator.h"
 #import "RNNEventEmitter.h"
+#import "RNNNavigationOptions.h"
 
 @interface RNNRootViewController : UIViewController
 
--(instancetype)initWithNode:(RNNLayoutNode*)node
+-(instancetype)initWithName:(NSString*)name
+				withOptions:(RNNNavigationOptions*)options
+			withContainerId:(NSString*)containerId
 			rootViewCreator:(id<RNNRootViewCreator>)creator
 			   eventEmitter:(RNNEventEmitter*)eventEmitter;
 

lib/ios/RNNRootViewController.m

@@ -1,21 +1,25 @@
 
 #import "RNNRootViewController.h"
+#import <React/RCTConvert.h>
+
 
 @interface RNNRootViewController()
 @property (nonatomic, strong) NSString* containerId;
 @property (nonatomic, strong) NSString* containerName;
 @property (nonatomic, strong) RNNEventEmitter *eventEmitter;
 @property (nonatomic) BOOL _statusBarHidden;
+@property (nonatomic, strong) RNNNavigationOptions* navigationOptions;
+
 @end
 
 @implementation RNNRootViewController
 
--(instancetype)initWithNode:(RNNLayoutNode*)node rootViewCreator:(id<RNNRootViewCreator>)creator eventEmitter:(RNNEventEmitter*)eventEmitter {
+-(instancetype)initWithName:(NSString*)name withOptions:(RNNNavigationOptions*)options withContainerId:(NSString*)containerId rootViewCreator:(id<RNNRootViewCreator>)creator eventEmitter:(RNNEventEmitter*)eventEmitter {
 	self = [super init];
-	self.containerId = node.nodeId;
-	self.containerName = node.data[@"name"];
+	self.containerId = containerId;
+	self.containerName = name;
+	self.navigationOptions = options;
 	self.eventEmitter = eventEmitter;
-	
 	self.view = [creator createRootView:self.containerName rootViewId:self.containerId];
 	
 	[[NSNotificationCenter defaultCenter] addObserver:self
@@ -23,14 +27,12 @@
 												 name:RCTJavaScriptWillStartLoadingNotification
 											   object:nil];
 	
-	self.navigationItem.title = node.data[@"navigationOptions"][@"title"];
-	self._statusBarHidden = [(NSNumber*)node.data[@"navigationOptions"][@"statusBarHidden"] boolValue];
 	
 	return self;
 }
 
 - (BOOL)prefersStatusBarHidden {
-	return self._statusBarHidden; // || self.navigationController.isNavigationBarHidden;
+	return [self.navigationOptions.statusBarHidden boolValue]; // || self.navigationController.isNavigationBarHidden;
 }
 
 
@@ -44,6 +46,10 @@
 	[self.eventEmitter sendContainerStop:self.containerId];
 }
 
+-(void)viewWillAppear:(BOOL)animated{
+	[super viewWillAppear:animated];
+	[self.navigationOptions apply:self];
+}
 /**
  *	fix for #877, #878
  */

lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

@@ -89,6 +89,10 @@
 		7BEF0D191E437684003E96B0 /* RNNRootViewController.m in Sources */ = {isa = PBXBuildFile; fileRef = 7BEF0D171E437684003E96B0 /* RNNRootViewController.m */; };
 		7BEF0D1C1E43771B003E96B0 /* RNNLayoutNode.h in Headers */ = {isa = PBXBuildFile; fileRef = 7BEF0D1A1E43771B003E96B0 /* RNNLayoutNode.h */; };
 		7BEF0D1D1E43771B003E96B0 /* RNNLayoutNode.m in Sources */ = {isa = PBXBuildFile; fileRef = 7BEF0D1B1E43771B003E96B0 /* RNNLayoutNode.m */; };
+		E83BAD681F2734B500A9F3DD /* RNNNavigationOptionsTest.m in Sources */ = {isa = PBXBuildFile; fileRef = E83BAD671F2734B500A9F3DD /* RNNNavigationOptionsTest.m */; };
+		E83BAD6B1F27363A00A9F3DD /* RNNNavigationOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = E83BAD6A1F27363A00A9F3DD /* RNNNavigationOptions.m */; };
+		E83BAD791F27416B00A9F3DD /* RNNRootViewControllerTest.m in Sources */ = {isa = PBXBuildFile; fileRef = E83BAD781F27416B00A9F3DD /* RNNRootViewControllerTest.m */; };
+		E83BAD7C1F27643000A9F3DD /* RNNTestRootViewCreator.m in Sources */ = {isa = PBXBuildFile; fileRef = E83BAD7B1F27643000A9F3DD /* RNNTestRootViewCreator.m */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -199,6 +203,12 @@
 		7BEF0D1A1E43771B003E96B0 /* RNNLayoutNode.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNLayoutNode.h; sourceTree = "<group>"; };
 		7BEF0D1B1E43771B003E96B0 /* RNNLayoutNode.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNLayoutNode.m; sourceTree = "<group>"; };
 		D8AFADBD1BEE6F3F00A4592D /* libReactNativeNavigation.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libReactNativeNavigation.a; sourceTree = BUILT_PRODUCTS_DIR; };
+		E83BAD671F2734B500A9F3DD /* RNNNavigationOptionsTest.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNNavigationOptionsTest.m; sourceTree = "<group>"; };
+		E83BAD691F27362500A9F3DD /* RNNNavigationOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNNavigationOptions.h; sourceTree = "<group>"; };
+		E83BAD6A1F27363A00A9F3DD /* RNNNavigationOptions.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNNavigationOptions.m; sourceTree = "<group>"; };
+		E83BAD781F27416B00A9F3DD /* RNNRootViewControllerTest.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNRootViewControllerTest.m; sourceTree = "<group>"; };
+		E83BAD7A1F27643000A9F3DD /* RNNTestRootViewCreator.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNTestRootViewCreator.h; sourceTree = "<group>"; };
+		E83BAD7B1F27643000A9F3DD /* RNNTestRootViewCreator.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNTestRootViewCreator.m; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -321,6 +331,8 @@
 				263905D51E4C94970023D7D3 /* RNNSideMenuController.m */,
 				263905E41E4CAC950023D7D3 /* RNNSideMenuChildVC.h */,
 				263905E51E4CAC950023D7D3 /* RNNSideMenuChildVC.m */,
+				E83BAD691F27362500A9F3DD /* RNNNavigationOptions.h */,
+				E83BAD6A1F27363A00A9F3DD /* RNNNavigationOptions.m */,
 			);
 			name = Controllers;
 			sourceTree = "<group>";
@@ -334,6 +346,10 @@
 				7B49FEC91E95098500DEB3EA /* RNNCommandsHandlerTest.m */,
 				7B49FECA1E95098500DEB3EA /* RNNNavigationStackManagerTest.m */,
 				7B49FEBF1E95090800DEB3EA /* Info.plist */,
+				E83BAD671F2734B500A9F3DD /* RNNNavigationOptionsTest.m */,
+				E83BAD781F27416B00A9F3DD /* RNNRootViewControllerTest.m */,
+				E83BAD7A1F27643000A9F3DD /* RNNTestRootViewCreator.h */,
+				E83BAD7B1F27643000A9F3DD /* RNNTestRootViewCreator.m */,
 			);
 			path = ReactNativeNavigationTests;
 			sourceTree = "<group>";
@@ -532,10 +548,13 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				E83BAD7C1F27643000A9F3DD /* RNNTestRootViewCreator.m in Sources */,
 				7B49FECE1E95098500DEB3EA /* RNNCommandsHandlerTest.m in Sources */,
+				E83BAD681F2734B500A9F3DD /* RNNNavigationOptionsTest.m in Sources */,
 				7B49FECF1E95098500DEB3EA /* RNNNavigationStackManagerTest.m in Sources */,
 				7B49FECB1E95098500DEB3EA /* RNNControllerFactoryTest.m in Sources */,
 				7B49FECD1E95098500DEB3EA /* RNNModalManagerTest.m in Sources */,
+				E83BAD791F27416B00A9F3DD /* RNNRootViewControllerTest.m in Sources */,
 				7B49FECC1E95098500DEB3EA /* RNNStoreTest.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -556,6 +575,7 @@
 				263905E71E4CAC950023D7D3 /* RNNSideMenuChildVC.m in Sources */,
 				7BA500751E2544B9001B9E1B /* ReactNativeNavigation.m in Sources */,
 				263905B21E4C6F440023D7D3 /* MMDrawerController.m in Sources */,
+				E83BAD6B1F27363A00A9F3DD /* RNNNavigationOptions.m in Sources */,
 				7BBFE5441E25330E002A6182 /* RNNBridgeModule.m in Sources */,
 				261F0E651E6EC94900989DE2 /* RNNModalManager.m in Sources */,
 				7BEF0D1D1E43771B003E96B0 /* RNNLayoutNode.m in Sources */,

lib/ios/ReactNativeNavigationTests/RNNControllerFactoryTest.m

@@ -142,37 +142,7 @@
 }
 
 
-- (void)testNavigationOptions_default {
-	UIViewController *ans = [self.factory createLayoutAndSaveToStore: @{@"id": @"cntId_2",
-																		@"type": @"Container",
-																		@"data": @{@"navigationOptions": @{}},
-																		@"children": @[]}];
-	XCTAssertFalse([ans prefersStatusBarHidden]);
-}
-
-- (void)testNavigationOptions_true {
-	UIViewController *ans = [self.factory createLayoutAndSaveToStore: @{@"id": @"cntId_2",
-																	    @"type": @"Container",
-																		@"data": @{
-																			@"navigationOptions": @{
-																					@"statusBarHidden": @(1)
-																					}
-																			},
-																		@"children": @[]}];
-	XCTAssertTrue([ans prefersStatusBarHidden]);
-}
 
-- (void)testNavigationOptions_false {
-	UIViewController *ans = [self.factory createLayoutAndSaveToStore: @{@"id": @"cntId_2",
-																		@"type": @"Container",
-																		@"data": @{
-																				@"navigationOptions": @{
-																						@"statusBarHidden": @(0)
-																						}
-																				},
-																		@"children": @[]}];
-	XCTAssertFalse([ans prefersStatusBarHidden]);
-}
 
 - (void)testCreateLayout_addContainerToStore {
 	NSString *containerId = @"cntId";

lib/ios/ReactNativeNavigationTests/RNNNavigationOptionsTest.m

@@ -0,0 +1,20 @@
+#import <XCTest/XCTest.h>
+#import "RNNNavigationOptions.h"
+
+@interface RNNNavigationOptionsTest : XCTestCase
+
+@end
+
+@implementation RNNNavigationOptionsTest
+
+- (void)setUp {
+    [super setUp];
+}
+
+-(void)testInitCreatesInstanceType{
+	RNNNavigationOptions* options = [[RNNNavigationOptions alloc] initWithDict:@{}];
+	XCTAssertTrue([options isKindOfClass:[RNNNavigationOptions class]]);
+}
+
+
+@end

lib/ios/ReactNativeNavigationTests/RNNRootViewControllerTest.m

@@ -0,0 +1,87 @@
+#import <XCTest/XCTest.h>
+#import "RNNRootViewController.h"
+#import "RNNReactRootViewCreator.h"
+#import "RNNTestRootViewCreator.h"
+#import <React/RCTConvert.h>
+#import "RNNNavigationOptions.h"
+
+@interface RNNRootViewControllerTest : 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) RNNNavigationOptions* options;
+@property (nonatomic, strong) RNNRootViewController* uut;
+@end
+
+@implementation RNNRootViewControllerTest
+
+- (void)setUp {
+    [super setUp];
+	self.creator = [[RNNTestRootViewCreator alloc] init];
+	self.pageName = @"somename";
+	self.containerId = @"cntId";
+	self.emitter = nil;
+	self.options = [RNNNavigationOptions new];
+	self.uut = [[RNNRootViewController alloc] initWithName:self.pageName withOptions:self.options withContainerId:self.containerId rootViewCreator:self.creator eventEmitter:self.emitter];
+}
+
+-(void)testTopBarBackgroundColor_validColor{
+	NSNumber* inputColor = @(0xFFFF0000);
+	self.options.topBarBackgroundColor = 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.barTintColor isEqual:expectedColor]);
+}
+
+-(void)testTopBarBackgroundColorWithoutNavigationController{
+	NSNumber* inputColor = @(0xFFFF0000);
+	self.options.topBarBackgroundColor = inputColor;
+	
+	XCTAssertNoThrow([self.uut viewWillAppear:false]);
+}
+
+- (void)testStatusBarHidden_default {
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+
+	XCTAssertFalse([self.uut prefersStatusBarHidden]);
+}
+
+- (void)testStatusBarHidden_true {
+	self.options.statusBarHidden = @(1);
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+	
+	XCTAssertTrue([self.uut prefersStatusBarHidden]);
+}
+
+- (void)testStatusBarHidden_false {
+	self.options.statusBarHidden = @(0);
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+	
+	XCTAssertFalse([self.uut prefersStatusBarHidden]);
+}
+
+-(void)testTitle_string{
+	NSString* title =@"some title";
+	self.options.title= title;
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	
+	[self.uut viewWillAppear:false];
+	XCTAssertTrue([self.uut.navigationItem.title isEqual:title]);
+}
+
+-(void)testTitle_default{
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	
+	[self.uut viewWillAppear:false];
+	XCTAssertNil(self.uut.navigationItem.title);
+}
+
+
+@end

lib/ios/ReactNativeNavigationTests/RNNTestRootViewCreator.h

@@ -0,0 +1,6 @@
+#import <Foundation/Foundation.h>
+#import "RNNRootViewCreator.h"
+
+@interface RNNTestRootViewCreator : NSObject <RNNRootViewCreator>
+
+@end

lib/ios/ReactNativeNavigationTests/RNNTestRootViewCreator.m

@@ -0,0 +1,10 @@
+#import "RNNTestRootViewCreator.h"
+
+@implementation RNNTestRootViewCreator
+
+- (UIView*)createRootView:(NSString*)name rootViewId:(NSString*)rootViewId {
+	UIView *view = [[UIView alloc] init];
+	return view;
+}
+
+@end

lib/src/commands/LayoutTreeCrawler.js

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import { processColor } from 'react-native';
 import LayoutTypes from './LayoutTypes';
 
 export default class LayoutTreeCrawler {
@@ -24,6 +25,18 @@ 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);
+      }
+    });
   }
 
   _assertKnownLayoutType(type) {

lib/src/commands/LayoutTreeCrawler.test.js

@@ -84,4 +84,87 @@ describe('LayoutTreeCrawler', () => {
     uut.crawl(node);
     expect(node.data.navigationOptions).toEqual({});
   });
+
+  describe('navigation options', () => {
+    let navigationOptions;
+    let MyContainer;
+    let node;
+
+    beforeEach(() => {
+      navigationOptions = {};
+      MyContainer = class {
+        static navigationOptions = navigationOptions;
+      };
+      node = { type: LayoutTypes.Container, data: { name: 'theContainerName' } };
+      store.setOriginalContainerClassForName('theContainerName', MyContainer);
+    });
+
+    it('processes colors into numeric AARRGGBB', () => {
+      navigationOptions.someKeyColor = 'red';
+      uut.crawl(node);
+      expect(node.data.navigationOptions.someKeyColor).toEqual(0xffff0000);
+
+      navigationOptions.someKeyColor = 'yellow';
+      uut.crawl(node);
+      expect(node.data.navigationOptions.someKeyColor).toEqual(0xffffff00);
+    });
+
+    it('processes numeric colors', () => {
+      navigationOptions.someKeyColor = '#123456';
+      uut.crawl(node);
+      expect(node.data.navigationOptions.someKeyColor).toEqual(0xff123456);
+
+      navigationOptions.someKeyColor = 0x123456ff; // wut
+      uut.crawl(node);
+      expect(node.data.navigationOptions.someKeyColor).toEqual(0xff123456);
+    });
+
+    it('process colors with rgb functions', () => {
+      navigationOptions.someKeyColor = 'rgb(255, 0, 255)';
+      uut.crawl(node);
+      expect(node.data.navigationOptions.someKeyColor).toEqual(0xffff00ff);
+    });
+
+    it('process colors with special words', () => {
+      navigationOptions.someKeyColor = 'fuchsia';
+      uut.crawl(node);
+      expect(node.data.navigationOptions.someKeyColor).toEqual(0xffff00ff);
+    });
+
+    it('process colors with hsla functions', () => {
+      navigationOptions.someKeyColor = 'hsla(360, 100%, 100%, 1.0)';
+      uut.crawl(node);
+      expect(node.data.navigationOptions.someKeyColor).toEqual(0xffffffff);
+    });
+
+    it('unknown colors return undefined', () => {
+      navigationOptions.someKeyColor = 'wut';
+      uut.crawl(node);
+      expect(node.data.navigationOptions.someKeyColor).toEqual(undefined);
+    });
+
+    it('any keys ending with Color', () => {
+      navigationOptions.otherKeyColor = 'red';
+      navigationOptions.yetAnotherColor = 'blue';
+      navigationOptions.andAnotherColor = 'rgb(0, 255, 0)';
+      uut.crawl(node);
+      expect(node.data.navigationOptions.otherKeyColor).toEqual(0xffff0000);
+      expect(node.data.navigationOptions.yetAnotherColor).toEqual(0xff0000ff);
+      expect(node.data.navigationOptions.andAnotherColor).toEqual(0xff00ff00);
+    });
+
+    it('keys ending with Color case sensitive', () => {
+      navigationOptions.otherKey_color = 'red';
+      uut.crawl(node);
+      expect(node.data.navigationOptions.otherKey_color).toEqual('red');
+    });
+
+    it('any nested recursive keys ending with Color', () => {
+      navigationOptions.innerObj = { theKeyColor: 'red' };
+      navigationOptions.innerObj.innerMostObj = { anotherColor: 'yellow' };
+      uut.crawl(node);
+      expect(node.data.navigationOptions.innerObj.theKeyColor).toEqual(0xffff0000);
+      expect(node.data.navigationOptions.innerObj.innerMostObj.anotherColor).toEqual(0xffffff00);
+    });
+  });
 });

playground/src/containers/OptionsScreen.js

@@ -11,7 +11,9 @@ import Navigation from 'react-native-navigation';
 
 class OptionsScreen extends Component {
   static navigationOptions = {
-    title: 'Static Title'
+    title: 'Static Title',
+    topBarBackgroundColor: "red",
+    statusBarHidden: true
   }
 
   constructor(props) {