setButtons for iOS (#1746)

e2e/ScreenStyle.test.js

@@ -1,6 +1,6 @@
 const Utils = require('./Utils');
 
-const elementByLabel = Utils.elementByLabel;
+const { elementByLabel, elementById } = Utils;
 
 describe('screen style', () => {
   beforeEach(async () => {
@@ -50,4 +50,18 @@ describe('screen style', () => {
     await elementByLabel('Set Tab Badge').tap();
     await expect(element(by.text('EnCyClOpEdIa'))).toBeVisible();
   });
+
+  it('set right buttons', async () => {
+    await elementByLabel('Push Options Screen').tap();
+    await expect(elementById('buttonOne')).toBeVisible();
+    await elementById('buttonOne').tap();
+    await expect(elementById('buttonTwo')).toBeVisible();
+    await elementById('buttonTwo').tap();
+    await expect(elementById('buttonOne')).toBeVisible();
+  });
+
+  it('set left buttons', async () => {
+    await elementByLabel('Push Options Screen').tap();
+    await expect(elementById('buttonLeft')).toBeVisible();
+  });
 });

e2e/Utils.js

@@ -1,5 +1,8 @@
 module.exports = {
   elementByLabel: (label) => {
     return element(by.label(label));
+  },
+  elementById: (id) => {
+    return element(by.id(id));
   }
 };

lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationEvent.java

@@ -11,6 +11,7 @@ public class NavigationEvent {
 	private static final String onAppLaunched = "RNN.appLaunched";
 	private static final String containerDidAppear = "RNN.containerDidAppear";
 	private static final String containerDidDisappear = "RNN.containerDidDisappear";
+	private static final String onNavigationButtonPressed = "RNN.navigationButtonPressed";
 
 	private final RCTDeviceEventEmitter emitter;
 
@@ -30,6 +31,11 @@ public class NavigationEvent {
 		emit(containerDidAppear, id);
 	}
 
+	public void sendOnNavigationButtonPressed(String id, String buttonId) {
+		//TODO!
+		//emit(onNavigationButtonPressed, id);
+	}
+
 	private void emit(String eventName) {
 		emit(eventName, Arguments.createMap());
 	}

lib/ios/RCTHelpers.h

@@ -0,0 +1,8 @@
+#import <Foundation/Foundation.h>
+#import <React/RCTRootView.h>
+
+@interface RCTHelpers : NSObject
++ (NSMutableDictionary *)textAttributesFromDictionary:(NSDictionary *)dictionary withPrefix:(NSString *)prefix;
++ (NSMutableDictionary *)textAttributesFromDictionary:(NSDictionary *)dictionary withPrefix:(NSString *)prefix baseFont:(UIFont *)font;
++ (NSString*)getTimestampString;
+@end

lib/ios/RCTHelpers.m

@@ -0,0 +1,138 @@
+#import "RCTHelpers.h"
+#import <React/RCTView.h>
+#import <React/RCTScrollView.h>
+#import <React/RCTFont.h>
+
+@implementation RCTHelpers
+
++ (NSMutableDictionary *)textAttributesFromDictionary:(NSDictionary *)dictionary withPrefix:(NSString *)prefix baseFont:(UIFont *)baseFont
+{
+	NSMutableDictionary *textAttributes = [NSMutableDictionary new];
+	
+	NSString *colorKey = @"color";
+	NSString *familyKey = @"fontFamily";
+	NSString *weightKey = @"fontWeight";
+	NSString *sizeKey = @"fontSize";
+	NSString *styleKey = @"fontStyle";
+	NSString *shadowColourKey = @"shadowColor";
+	NSString *shadowOffsetKey = @"shadowOffset";
+	NSString *shadowBlurRadiusKey = @"shadowBlurRadius";
+	NSString *showShadowKey = @"showShadow";
+	
+	if (prefix) {
+		
+		colorKey = [colorKey stringByReplacingCharactersInRange:NSMakeRange(0, 1) withString:[colorKey substringToIndex:1].capitalizedString];
+		colorKey = [NSString stringWithFormat:@"%@%@", prefix, colorKey];
+		
+		familyKey = [familyKey stringByReplacingCharactersInRange:NSMakeRange(0, 1) withString:[familyKey substringToIndex:1].capitalizedString];
+		familyKey = [NSString stringWithFormat:@"%@%@", prefix, familyKey];
+		
+		weightKey = [weightKey stringByReplacingCharactersInRange:NSMakeRange(0, 1) withString:[weightKey substringToIndex:1].capitalizedString];
+		weightKey = [NSString stringWithFormat:@"%@%@", prefix, weightKey];
+		
+		sizeKey = [sizeKey stringByReplacingCharactersInRange:NSMakeRange(0, 1) withString:[sizeKey substringToIndex:1].capitalizedString];
+		sizeKey = [NSString stringWithFormat:@"%@%@", prefix, sizeKey];
+		
+		styleKey = [styleKey stringByReplacingCharactersInRange:NSMakeRange(0, 1) withString:[styleKey substringToIndex:1].capitalizedString];
+		styleKey = [NSString stringWithFormat:@"%@%@", prefix, styleKey];
+		
+		shadowColourKey = [shadowColourKey stringByReplacingCharactersInRange:NSMakeRange(0, 1) withString:[shadowColourKey substringToIndex:1].capitalizedString];
+		shadowColourKey = [NSString stringWithFormat:@"%@%@", prefix, shadowColourKey];
+		
+		shadowOffsetKey = [shadowOffsetKey stringByReplacingCharactersInRange:NSMakeRange(0, 1) withString:[shadowOffsetKey substringToIndex:1].capitalizedString];
+		shadowOffsetKey = [NSString stringWithFormat:@"%@%@", prefix, shadowOffsetKey];
+		
+		shadowBlurRadiusKey = [shadowBlurRadiusKey stringByReplacingCharactersInRange:NSMakeRange(0, 1) withString:[shadowBlurRadiusKey substringToIndex:1].capitalizedString];
+		shadowBlurRadiusKey = [NSString stringWithFormat:@"%@%@", prefix, shadowBlurRadiusKey];
+		
+		showShadowKey = [showShadowKey stringByReplacingCharactersInRange:NSMakeRange(0, 1) withString:[showShadowKey substringToIndex:1].capitalizedString];
+		showShadowKey = [NSString stringWithFormat:@"%@%@", prefix, showShadowKey];
+	}
+	
+	NSShadow *shadow;
+	
+	NSNumber *shadowColor = dictionary[shadowColourKey];
+	if (shadowColor && [shadowColor isKindOfClass:[NSNumber class]]) {
+		if (!shadow) {
+			shadow = [NSShadow new];
+		}
+		shadow.shadowColor = [RCTConvert UIColor:shadowColor];
+	}
+	
+	NSDictionary *shadowOffsetDict = dictionary[shadowOffsetKey];
+	if (shadowOffsetDict && [shadowOffsetDict isKindOfClass:[NSDictionary class]]) {
+		CGSize shadowOffset = [RCTConvert CGSize:shadowOffsetDict];
+		if (!shadow) {
+			shadow = [NSShadow new];
+		}
+		shadow.shadowOffset = shadowOffset;
+	}
+	
+	NSNumber *shadowRadius = dictionary[shadowBlurRadiusKey];
+	if (shadowRadius) {
+		CGFloat radius = [RCTConvert CGFloat:shadowRadius];
+		if (!shadow) {
+			shadow = [NSShadow new];
+		}
+		shadow.shadowBlurRadius = radius;
+	}
+	
+	NSNumber *showShadow = dictionary[showShadowKey];
+	if (showShadow) {
+		BOOL show = [RCTConvert BOOL:showShadow];
+		if (!show) {
+			shadow = nil;
+		}
+	}
+	
+	if (shadow) {
+		[textAttributes setObject:shadow forKey:NSShadowAttributeName];
+	}
+	
+	NSNumber *textColor = dictionary[colorKey];
+	if (textColor && [textColor isKindOfClass:[NSNumber class]])
+	{
+		UIColor *color = [RCTConvert UIColor:textColor];
+		[textAttributes setObject:color forKey:NSForegroundColorAttributeName];
+	}
+	
+	NSString *fontFamily = dictionary[familyKey];
+	if (![fontFamily isKindOfClass:[NSString class]]) {
+		fontFamily = nil;
+	}
+	
+	NSString *fontWeight = dictionary[weightKey];
+	if (![fontWeight isKindOfClass:[NSString class]]) {
+		fontWeight = nil;
+	}
+	
+	NSNumber *fontSize = dictionary[sizeKey];
+	if (![fontSize isKindOfClass:[NSNumber class]]) {
+		fontSize = nil;
+	}
+	
+	NSString *fontStyle = dictionary[styleKey];
+	if (![fontStyle isKindOfClass:[NSString class]]) {
+		fontStyle = nil;
+	}
+	
+	UIFont *font = [RCTFont updateFont:baseFont withFamily:fontFamily size:fontSize weight:fontWeight style:fontStyle variant:nil scaleMultiplier:1];
+	
+	if (font && (fontStyle || fontWeight || fontSize || fontFamily)) {
+		[textAttributes setObject:font forKey:NSFontAttributeName];
+	}
+	
+	return textAttributes;
+}
+
++ (NSMutableDictionary *)textAttributesFromDictionary:(NSDictionary *)dictionary withPrefix:(NSString *)prefix
+{
+	return [self textAttributesFromDictionary:dictionary withPrefix:prefix baseFont:[UIFont systemFontOfSize:[UIFont systemFontSize]]];
+}
+
++ (NSString *)getTimestampString {
+	long long milliseconds = (long long)([[NSDate date] timeIntervalSince1970] * 1000.0);
+	return [NSString stringWithFormat:@"%lld", milliseconds];
+}
+
+@end

lib/ios/RNNCommandsHandler.m

@@ -43,6 +43,7 @@
 		RNNRootViewController* rootVc = (RNNRootViewController*)vc;
 		[rootVc.navigationOptions mergeWith:options];
 		[rootVc.navigationOptions applyOn:vc];
+		[rootVc applyNavigationButtons];
 	}
 }
 

lib/ios/RNNEventEmitter.h

@@ -12,4 +12,6 @@
 
 -(void)sendContainerDidDisappear:(NSString*)containerId;
 
+-(void)sendOnNavigationButtonPressed:(NSString*)containerId buttonId:(NSString*)buttonId;
+
 @end

lib/ios/RNNEventEmitter.m

@@ -7,10 +7,10 @@ RCT_EXPORT_MODULE();
 static NSString* const onAppLaunched	= @"RNN.appLaunched";
 static NSString* const containerDidAppear	= @"RNN.containerDidAppear";
 static NSString* const containerDidDisappear	= @"RNN.containerDidDisappear";
-
+static NSString* const onNavigationButtonPressed	= @"RNN.navigationButtonPressed";
 
 -(NSArray<NSString *> *)supportedEvents {
-	return @[onAppLaunched, containerDidAppear, containerDidDisappear];
+	return @[onAppLaunched, containerDidAppear, containerDidDisappear, onNavigationButtonPressed];
 }
 
 # pragma mark public
@@ -27,6 +27,10 @@ static NSString* const containerDidDisappear	= @"RNN.containerDidDisappear";
 	[self send:containerDidDisappear body:containerId];
 }
 
+-(void)sendOnNavigationButtonPressed:(NSString *)containerId buttonId:(NSString*)buttonId {
+	[self send:onNavigationButtonPressed body:@{@"containerId":containerId , @"buttonId": buttonId }];
+}
+
 # pragma mark private
 
 -(void)send:(NSString *)eventName body:(id)body {

lib/ios/RNNNavigationButtons.h

@@ -0,0 +1,14 @@
+#import <Foundation/Foundation.h>
+#import <UIKit/UIKit.h>
+#import "RNNRootViewController.h"
+
+@interface RNNNavigationButtons : NSObject
+
+-(instancetype)init;
+-(instancetype)initWithViewController:(RNNRootViewController*)viewController;
+
+-(void)applyLeftButtons:(NSArray*)leftButtons rightButtons:(NSArray*)rightButtons;
+
+@end
+
+

lib/ios/RNNNavigationButtons.m

@@ -0,0 +1,111 @@
+#import "RNNNavigationButtons.h"
+#import "RNNUIBarButtonItem.h"
+#import <React/RCTConvert.h>
+#import "RCTHelpers.h"
+
+@interface RNNNavigationButtons()
+@property (weak, nonatomic) RNNRootViewController* viewController;
+
+@end
+
+@implementation RNNNavigationButtons
+
+-(instancetype)init {
+	return [super init];
+}
+
+-(instancetype)initWithViewController:(RNNRootViewController*)viewController {
+	self = [super init];
+	
+	self.viewController = viewController;
+	
+	return self;
+}
+
+-(void)applyLeftButtons:(NSArray*)leftButtons rightButtons:(NSArray*)rightButtons {
+	if(leftButtons) {
+		[self setButtons:leftButtons side:@"left" animated:NO];
+	}
+	
+	if(rightButtons) {
+		[self setButtons:rightButtons side:@"right" animated:NO];
+	}
+}
+
+-(void)setButtons:(NSArray*)buttons side:(NSString*)side animated:(BOOL)animated {
+	NSMutableArray *barButtonItems = [NSMutableArray new];
+	for (NSDictionary *button in buttons) {
+		RNNUIBarButtonItem* barButtonItem = [self buildButton:button];
+		if(barButtonItem) {
+			[barButtonItems addObject:barButtonItem];
+		}
+	}
+	
+	if ([side isEqualToString:@"left"])
+	{
+		[self.viewController.navigationItem setLeftBarButtonItems:barButtonItems animated:animated];
+	}
+	
+	if ([side isEqualToString:@"right"])
+	{
+		[self.viewController.navigationItem setRightBarButtonItems:barButtonItems animated:animated];
+	}
+}
+
+-(RNNUIBarButtonItem*)buildButton: (NSDictionary*)dictionary {
+	NSString* buttonId = dictionary[@"id"];
+	NSString* title = dictionary[@"title"];
+	
+	if(!buttonId){
+		@throw [NSException exceptionWithName:@"NSInvalidArgumentException" reason:[@"button id is not specified " stringByAppendingString:title] userInfo:nil];
+	}
+	
+	UIImage* iconImage = nil;
+	id icon = dictionary[@"icon"];
+	if (icon) {
+		iconImage = [RCTConvert UIImage:icon];
+	}
+	
+	RNNUIBarButtonItem *barButtonItem;
+	if (iconImage) {
+		barButtonItem = [[RNNUIBarButtonItem alloc] init:buttonId withIcon:iconImage];
+	} else if (title) {
+		barButtonItem = [[RNNUIBarButtonItem alloc] init:buttonId withTitle:title];
+		
+		NSMutableDictionary *buttonTextAttributes = [RCTHelpers textAttributesFromDictionary:dictionary withPrefix:@"button"];
+		if (buttonTextAttributes.allKeys.count > 0) {
+			[barButtonItem setTitleTextAttributes:buttonTextAttributes forState:UIControlStateNormal];
+		}
+	} else {
+		return nil;
+	}
+	
+	barButtonItem.target = self;
+	barButtonItem.action = @selector(onButtonPress:);
+	
+	NSNumber *disabled = dictionary[@"disabled"];
+	BOOL disabledBool = disabled ? [disabled boolValue] : NO;
+	if (disabledBool) {
+		[barButtonItem setEnabled:NO];
+	}
+	
+	NSNumber *disableIconTintString = dictionary[@"disableIconTint"];
+	BOOL disableIconTint = disableIconTintString ? [disableIconTintString boolValue] : NO;
+	if (disableIconTint) {
+		[barButtonItem setImage:[barButtonItem.image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
+	}
+	
+	NSString *testID = dictionary[@"testID"];
+	if (testID)
+	{
+		barButtonItem.accessibilityIdentifier = testID;
+	}
+	
+	return barButtonItem;
+}
+
+-(void)onButtonPress:(RNNUIBarButtonItem*)barButtonItem
+{
+	[self.viewController.eventEmitter sendOnNavigationButtonPressed:self.viewController.containerId buttonId:barButtonItem.buttonId];
+}
+@end

lib/ios/RNNNavigationOptions.h

@@ -17,16 +17,16 @@ extern const NSInteger BLUR_STATUS_TAG;
 @property (nonatomic, strong) NSNumber* topBarTranslucent;
 @property (nonatomic, strong) NSString* tabBadge;
 @property (nonatomic, strong) NSNumber* topBarTextFontSize;
+@property (nonatomic, strong) NSArray* leftButtons;
+@property (nonatomic, strong) NSArray* rightButtons;
 @property (nonatomic, strong) NSNumber* topBarNoBorder;
 @property (nonatomic, strong) NSNumber* statusBarBlur;
 @property (nonatomic, strong) NSNumber* statusBarHideWithTopBar;
 
-
 -(instancetype)init;
 -(instancetype)initWithDict:(NSDictionary *)navigationOptions;
 
 -(void)applyOn:(UIViewController*)viewController;
 -(void)mergeWith:(NSDictionary*)otherOptions;
 
-@end
-
+@end

lib/ios/RNNNavigationOptions.m

@@ -8,7 +8,7 @@ const NSInteger BLUR_STATUS_TAG = 78264801;
 -(instancetype)init {
 	return [self initWithDict:@{}];
 }
-
+	
 -(instancetype)initWithDict:(NSDictionary *)navigationOptions {
 	self = [super init];
 	self.topBarBackgroundColor = [navigationOptions objectForKey:@"topBarBackgroundColor"];
@@ -23,6 +23,8 @@ const NSInteger BLUR_STATUS_TAG = 78264801;
 	self.topBarTranslucent = [navigationOptions objectForKey:@"topBarTranslucent"];
 	self.tabBadge = [navigationOptions objectForKey:@"tabBadge"];
 	self.topBarTextFontSize = [navigationOptions objectForKey:@"topBarTextFontSize"];
+	self.leftButtons = [navigationOptions objectForKey:@"leftButtons"];
+	self.rightButtons = [navigationOptions objectForKey:@"rightButtons"];
 	self.topBarNoBorder = [navigationOptions objectForKey:@"topBarNoBorder"];
 
 	return self;
@@ -136,4 +138,5 @@ const NSInteger BLUR_STATUS_TAG = 78264801;
 	}
 	
 }
+
 @end

lib/ios/RNNRootViewController.h

@@ -9,6 +9,8 @@
 @interface RNNRootViewController : UIViewController
 
 @property (nonatomic, strong) RNNNavigationOptions* navigationOptions;
+@property (nonatomic, strong) RNNEventEmitter *eventEmitter;
+@property (nonatomic, strong) NSString* containerId;
 
 -(instancetype)initWithName:(NSString*)name
 				withOptions:(RNNNavigationOptions*)options
@@ -17,4 +19,6 @@
 			   eventEmitter:(RNNEventEmitter*)eventEmitter;
 
 
+-(void) applyNavigationButtons;
+
 @end

lib/ios/RNNRootViewController.m

@@ -1,13 +1,12 @@
 
 #import "RNNRootViewController.h"
 #import <React/RCTConvert.h>
-
+#import "RNNNavigationButtons.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) RNNNavigationButtons* navigationButtons;
 
 @end
 
@@ -30,6 +29,7 @@
 												 name:RCTJavaScriptWillStartLoadingNotification
 											   object:nil];
 	
+	self.navigationButtons = [[RNNNavigationButtons alloc] initWithViewController:self];
 	
 	return self;
 }
@@ -37,6 +37,7 @@
 -(void)viewWillAppear:(BOOL)animated{
 	[super viewWillAppear:animated];
 	[self.navigationOptions applyOn:self];
+	[self applyNavigationButtons];
 }
 
 - (BOOL)prefersStatusBarHidden {
@@ -58,6 +59,10 @@
 	[self.eventEmitter sendContainerDidDisappear:self.containerId];
 }
 
+-(void) applyNavigationButtons{
+	[self.navigationButtons applyLeftButtons:self.navigationOptions.leftButtons rightButtons:self.navigationOptions.rightButtons];
+}
+
 /**
  *	fix for #877, #878
  */

lib/ios/RNNUIBarButtonItem.h

@@ -0,0 +1,11 @@
+#import <Foundation/Foundation.h>
+
+@interface RNNUIBarButtonItem : UIBarButtonItem
+
+@property (nonatomic, strong) NSString* buttonId;
+
+-(instancetype)init:(NSString*)buttonId withIcon:(UIImage*)iconImage;
+-(instancetype)init:(NSString*)buttonId withTitle:(NSString*)title;
+
+@end
+

lib/ios/RNNUIBarButtonItem.m

@@ -0,0 +1,19 @@
+#import <Foundation/Foundation.h>
+#import <UIKit/UIKit.h>
+#import "RNNUIBarButtonItem.h"
+
+@implementation RNNUIBarButtonItem
+
+-(instancetype)init:(NSString*)buttonId withIcon:(UIImage*)iconImage {
+	self = [super initWithImage:iconImage style:UIBarButtonItemStylePlain target:nil action:nil];
+	self.buttonId = buttonId;
+	return self;
+}
+
+-(instancetype)init:(NSString*)buttonId withTitle:(NSString*)title {
+	self = [super initWithTitle:title style:UIBarButtonItemStylePlain target:nil action:nil];
+	self.buttonId = buttonId;
+	return self;
+}
+
+@end

lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

@@ -7,6 +7,10 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
+		214545251F4DC125006E8DA1 /* RNNUIBarButtonItem.m in Sources */ = {isa = PBXBuildFile; fileRef = 214545241F4DC125006E8DA1 /* RNNUIBarButtonItem.m */; };
+		2145452A1F4DC85F006E8DA1 /* RCTHelpers.m in Sources */ = {isa = PBXBuildFile; fileRef = 214545291F4DC85F006E8DA1 /* RCTHelpers.m */; };
+		21B85E5D1F44480200B314B5 /* RNNNavigationButtons.m in Sources */ = {isa = PBXBuildFile; fileRef = 21B85E5C1F44480200B314B5 /* RNNNavigationButtons.m */; };
+		21B85E5F1F44482A00B314B5 /* RNNNavigationButtons.h in Headers */ = {isa = PBXBuildFile; fileRef = 21B85E5E1F44482A00B314B5 /* RNNNavigationButtons.h */; };
 		261F0E641E6EC94900989DE2 /* RNNModalManager.h in Headers */ = {isa = PBXBuildFile; fileRef = 261F0E621E6EC94900989DE2 /* RNNModalManager.h */; };
 		261F0E651E6EC94900989DE2 /* RNNModalManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 261F0E631E6EC94900989DE2 /* RNNModalManager.m */; };
 		261F0E6A1E6F028A00989DE2 /* RNNNavigationStackManager.h in Headers */ = {isa = PBXBuildFile; fileRef = 261F0E681E6F028A00989DE2 /* RNNNavigationStackManager.h */; };
@@ -118,6 +122,12 @@
 /* End PBXCopyFilesBuildPhase section */
 
 /* Begin PBXFileReference section */
+		214545241F4DC125006E8DA1 /* RNNUIBarButtonItem.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNUIBarButtonItem.m; sourceTree = "<group>"; };
+		214545261F4DC164006E8DA1 /* RNNUIBarButtonItem.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNUIBarButtonItem.h; sourceTree = "<group>"; };
+		214545281F4DC81F006E8DA1 /* RCTHelpers.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RCTHelpers.h; sourceTree = "<group>"; };
+		214545291F4DC85F006E8DA1 /* RCTHelpers.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RCTHelpers.m; sourceTree = "<group>"; };
+		21B85E5C1F44480200B314B5 /* RNNNavigationButtons.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNNavigationButtons.m; sourceTree = "<group>"; };
+		21B85E5E1F44482A00B314B5 /* RNNNavigationButtons.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNNavigationButtons.h; sourceTree = "<group>"; };
 		261F0E621E6EC94900989DE2 /* RNNModalManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNModalManager.h; sourceTree = "<group>"; };
 		261F0E631E6EC94900989DE2 /* RNNModalManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNModalManager.m; sourceTree = "<group>"; };
 		261F0E681E6F028A00989DE2 /* RNNNavigationStackManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNNavigationStackManager.h; sourceTree = "<group>"; };
@@ -244,6 +254,15 @@
 /* End PBXFrameworksBuildPhase section */
 
 /* Begin PBXGroup section */
+		214545271F4DC7ED006E8DA1 /* Helpers */ = {
+			isa = PBXGroup;
+			children = (
+				214545281F4DC81F006E8DA1 /* RCTHelpers.h */,
+				214545291F4DC85F006E8DA1 /* RCTHelpers.m */,
+			);
+			name = Helpers;
+			sourceTree = "<group>";
+		};
 		263905881E4C6F440023D7D3 /* RNNSideMenu */ = {
 			isa = PBXGroup;
 			children = (
@@ -333,6 +352,10 @@
 				263905E51E4CAC950023D7D3 /* RNNSideMenuChildVC.m */,
 				E83BAD691F27362500A9F3DD /* RNNNavigationOptions.h */,
 				E83BAD6A1F27363A00A9F3DD /* RNNNavigationOptions.m */,
+				21B85E5E1F44482A00B314B5 /* RNNNavigationButtons.h */,
+				21B85E5C1F44480200B314B5 /* RNNNavigationButtons.m */,
+				214545261F4DC164006E8DA1 /* RNNUIBarButtonItem.h */,
+				214545241F4DC125006E8DA1 /* RNNUIBarButtonItem.m */,
 			);
 			name = Controllers;
 			sourceTree = "<group>";
@@ -389,6 +412,7 @@
 		D8AFADB41BEE6F3F00A4592D = {
 			isa = PBXGroup;
 			children = (
+				214545271F4DC7ED006E8DA1 /* Helpers */,
 				7BA500731E2544B9001B9E1B /* ReactNativeNavigation.h */,
 				7BA500741E2544B9001B9E1B /* ReactNativeNavigation.m */,
 				268692801E5054F800E2C612 /* RNNStore.h */,
@@ -441,6 +465,7 @@
 				263905C01E4C6F440023D7D3 /* SidebarAirbnbAnimation.h in Headers */,
 				263905E61E4CAC950023D7D3 /* RNNSideMenuChildVC.h in Headers */,
 				263905C41E4C6F440023D7D3 /* SidebarFacebookAnimation.h in Headers */,
+				21B85E5F1F44482A00B314B5 /* RNNNavigationButtons.h in Headers */,
 				7BEF0D181E437684003E96B0 /* RNNRootViewController.h in Headers */,
 				7B1126A61E2D2B6C00F9B03B /* RNNBridgeModule.h in Headers */,
 				263905BE1E4C6F440023D7D3 /* RCCTheSideBarManagerViewController.h in Headers */,
@@ -582,9 +607,11 @@
 				7BA500781E254908001B9E1B /* RNNSplashScreen.m in Sources */,
 				263905BA1E4C6F440023D7D3 /* RCCDrawerController.m in Sources */,
 				263905BC1E4C6F440023D7D3 /* RCCDrawerHelper.m in Sources */,
+				2145452A1F4DC85F006E8DA1 /* RCTHelpers.m in Sources */,
 				263905C11E4C6F440023D7D3 /* SidebarAirbnbAnimation.m in Sources */,
 				263905D71E4C94970023D7D3 /* RNNSideMenuController.m in Sources */,
 				26916C991E4B9E7700D13680 /* RNNReactRootViewCreator.m in Sources */,
+				214545251F4DC125006E8DA1 /* RNNUIBarButtonItem.m in Sources */,
 				263905B81E4C6F440023D7D3 /* UIViewController+MMDrawerController.m in Sources */,
 				263905CD1E4C6F440023D7D3 /* SidebarWunderlistAnimation.m in Sources */,
 				263905CF1E4C6F440023D7D3 /* TheSidebarController.m in Sources */,
@@ -593,6 +620,7 @@
 				268692831E5054F800E2C612 /* RNNStore.m in Sources */,
 				7BC9346E1E26886E00EFA125 /* RNNControllerFactory.m in Sources */,
 				263905B61E4C6F440023D7D3 /* MMExampleDrawerVisualStateManager.m in Sources */,
+				21B85E5D1F44480200B314B5 /* RNNNavigationButtons.m in Sources */,
 				263905C91E4C6F440023D7D3 /* SidebarFlipboardAnimation.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;

lib/ios/ReactNativeNavigationTests/RNNRootViewControllerTest.m

@@ -4,6 +4,7 @@
 #import "RNNTestRootViewCreator.h"
 #import <React/RCTConvert.h>
 #import "RNNNavigationOptions.h"
+#import "RNNUIBarButtonItem.h"
 
 @interface RNNRootViewControllerTest : XCTestCase
 
@@ -224,6 +225,67 @@
 	//	XCTAssertThrows([self.uut viewWillAppear:false]);
 }
 
+-(void)testRightButtonsWithTitle_withoutStyle {
+	self.options.rightButtons = @[@{@"id": @"testId", @"title": @"test"}];
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+	
+	RNNUIBarButtonItem* button = (RNNUIBarButtonItem*)[nav.topViewController.navigationItem.rightBarButtonItems objectAtIndex:0];
+	NSString* expectedButtonId = @"testId";
+	NSString* expectedTitle = @"test";
+	XCTAssertTrue([button.buttonId isEqualToString:expectedButtonId]);
+	XCTAssertTrue([button.title isEqualToString:expectedTitle]);
+	XCTAssertTrue(button.enabled);
+}
+
+-(void)testRightButtonsWithTitle_withStyle {
+	NSNumber* inputColor = @(0xFFFF0000);
+	
+	self.options.rightButtons = @[@{@"id": @"testId", @"title": @"test", @"disabled": @true, @"buttonColor": inputColor, @"buttonFontSize": @22, @"buttonFontWeight": @"800"}];
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+	
+	RNNUIBarButtonItem* button = (RNNUIBarButtonItem*)[nav.topViewController.navigationItem.rightBarButtonItems objectAtIndex:0];
+	NSString* expectedButtonId = @"testId";
+	NSString* expectedTitle = @"test";
+	XCTAssertTrue([button.buttonId isEqualToString:expectedButtonId]);
+	XCTAssertTrue([button.title isEqualToString:expectedTitle]);
+	XCTAssertFalse(button.enabled);
+	
+	//TODO: Determine how to tests buttonColor,buttonFontSize and buttonFontWeight?
+}
+
+
+-(void)testLeftButtonsWithTitle_withoutStyle {
+	self.options.leftButtons = @[@{@"id": @"testId", @"title": @"test"}];
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+	
+	RNNUIBarButtonItem* button = (RNNUIBarButtonItem*)[nav.topViewController.navigationItem.leftBarButtonItems objectAtIndex:0];
+	NSString* expectedButtonId = @"testId";
+	NSString* expectedTitle = @"test";
+	XCTAssertTrue([button.buttonId isEqualToString:expectedButtonId]);
+	XCTAssertTrue([button.title isEqualToString:expectedTitle]);
+	XCTAssertTrue(button.enabled);
+}
+
+-(void)testLeftButtonsWithTitle_withStyle {
+	NSNumber* inputColor = @(0xFFFF0000);
+	
+	self.options.leftButtons = @[@{@"id": @"testId", @"title": @"test", @"disabled": @true, @"buttonColor": inputColor, @"buttonFontSize": @22, @"buttonFontWeight": @"800"}];
+	__unused UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController:self.uut];
+	[self.uut viewWillAppear:false];
+	
+	RNNUIBarButtonItem* button = (RNNUIBarButtonItem*)[nav.topViewController.navigationItem.leftBarButtonItems objectAtIndex:0];
+	NSString* expectedButtonId = @"testId";
+	NSString* expectedTitle = @"test";
+	XCTAssertTrue([button.buttonId isEqualToString:expectedButtonId]);
+	XCTAssertTrue([button.title isEqualToString:expectedTitle]);
+	XCTAssertFalse(button.enabled);
+	
+	//TODO: Determine how to tests buttonColor,buttonFontSize and buttonFontWeight?
+}
+
 -(void)testTopBarNoBorderOn {
 	NSNumber* topBarNoBorderInput = @(1);
 	self.options.topBarNoBorder = topBarNoBorderInput;

lib/src/adapters/NativeEventsReceiver.js

@@ -16,6 +16,10 @@ class NativeEventsReceiver {
   appLaunched(callback) {
     this.emitter.addListener('RNN.appLaunched', callback);
   }
+
+  navigationButtonPressed(callback) {
+    this.emitter.addListener('RNN.navigationButtonPressed', callback);
+  }
 }
 
 module.exports = NativeEventsReceiver;

lib/src/commands/OptionsProcessor.js

@@ -1,5 +1,6 @@
 const _ = require('lodash');
 const { processColor } = require('react-native');
+const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');
 
 class OptionsProcessor {
   static processOptions(navigationOptions) {
@@ -7,7 +8,10 @@ class OptionsProcessor {
       if (_.endsWith(key, 'Color')) {
         navigationOptions[key] = processColor(value);
       }
-      if (_.isPlainObject(value)) {
+      if (_.isEqual(key, 'icon') || _.endsWith(key, 'Icon') || _.endsWith(key, 'Image')) {
+        navigationOptions[key] = resolveAssetSource(navigationOptions[key]);
+      }
+      if (_.isPlainObject(value) || _.isArray(value)) {
         OptionsProcessor.processOptions(value);
       }
     });

lib/src/commands/OptionsProcessor.test.js

@@ -75,4 +75,20 @@ describe('navigation options', () => {
     expect(navigationOptions.innerObj.theKeyColor).toEqual(0xffff0000);
     expect(navigationOptions.innerObj.innerMostObj.anotherColor).toEqual(0xffffff00);
   });
+
+  it('resolve image sources with name/ending with icon', () => {
+    navigationOptions.icon = 'require("https://wix.github.io/react-native-navigation/_images/logo.png");';
+    navigationOptions.innerObj = {
+      myIcon: 'require("https://wix.github.io/react-native-navigation/_images/logo.png");',
+      myOtherValue: 'value'
+    };
+    OptionsProcessor.processOptions(navigationOptions);
+
+    // As we can't import external images and we don't want to add an image here
+    // I assign the icons to strings (what the require would generally look like)
+    // and expect the value to be resovled, in this case it doesn't find anything and returns null
+    expect(navigationOptions.icon).toEqual(null);
+    expect(navigationOptions.innerObj.myIcon).toEqual(null);
+    expect(navigationOptions.innerObj.myOtherValue).toEqual('value');
+  });
 });

lib/src/containers/ContainerWrapper.js

@@ -46,6 +46,12 @@ class ContainerWrapper {
         }
       }
 
+      onNavigationButtonPressed(buttonId) {
+        if (this.originalContainerRef.onNavigationButtonPressed) {
+          this.originalContainerRef.onNavigationButtonPressed(buttonId);
+        }
+      }
+
       componentWillReceiveProps(nextProps) {
         this.setState({
           allProps: _.merge({}, nextProps, store.getPropsForContainerId(this.state.containerId))

lib/src/containers/ContainerWrapper.test.js

@@ -140,6 +140,7 @@ describe('ContainerWrapper', () => {
   describe('container lifecycle', () => {
     const didAppearCallback = jest.fn();
     const didDisappearCallback = jest.fn();
+    const onNavigationButtonPressedCallback = jest.fn();
 
     class MyLifecycleContainer extends MyContainer {
       didAppear() {
@@ -149,13 +150,18 @@ describe('ContainerWrapper', () => {
       didDisappear() {
         didDisappearCallback();
       }
+
+      onNavigationButtonPressed() {
+        onNavigationButtonPressedCallback();
+      }
     }
 
-    it('didAppear and didDisappear are optional', () => {
+    it('didAppear, didDisappear and onNavigationButtonPressed are optional', () => {
       const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
       const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
       expect(() => tree.getInstance().didAppear()).not.toThrow();
       expect(() => tree.getInstance().didDisappear()).not.toThrow();
+      expect(() => tree.getInstance().onNavigationButtonPressed()).not.toThrow();
     });
 
     it('calls didAppear on OriginalContainer', () => {
@@ -173,5 +179,13 @@ describe('ContainerWrapper', () => {
       tree.getInstance().didDisappear();
       expect(didDisappearCallback).toHaveBeenCalledTimes(1);
     });
+
+    it('calls onNavigationButtonPressed on OriginalContainer', () => {
+      const NavigationContainer = ContainerWrapper.wrap(containerName, MyLifecycleContainer, store);
+      const tree = renderer.create(<NavigationContainer containerId={'container1'} />);
+      expect(onNavigationButtonPressedCallback).toHaveBeenCalledTimes(0);
+      tree.getInstance().onNavigationButtonPressed();
+      expect(onNavigationButtonPressedCallback).toHaveBeenCalledTimes(1);
+    });
   });
 });

lib/src/containers/Lifecycle.js

@@ -3,6 +3,7 @@ class Lifecycle {
     this.store = store;
     this.containerDidAppear = this.containerDidAppear.bind(this);
     this.containerDidDisappear = this.containerDidDisappear.bind(this);
+    this.onNavigationButtonPressed = this.onNavigationButtonPressed.bind(this);
   }
 
   containerDidAppear(id) {
@@ -18,6 +19,13 @@ class Lifecycle {
       ref.didDisappear();
     }
   }
+
+  onNavigationButtonPressed(params) {
+    const ref = this.store.getRefForContainerId(params.containerId);
+    if (ref && ref.onNavigationButtonPressed) {
+      ref.onNavigationButtonPressed(params.buttonId);
+    }
+  }
 }
 
 module.exports = Lifecycle;

lib/src/containers/Lifecycle.test.js

@@ -9,7 +9,8 @@ describe('Lifecycle', () => {
   beforeEach(() => {
     mockRef = {
       didAppear: jest.fn(),
-      didDisappear: jest.fn()
+      didDisappear: jest.fn(),
+      onNavigationButtonPressed: jest.fn()
     };
     store = new Store();
     store.setRefForContainerId('myUniqueId', mockRef);
@@ -54,4 +55,26 @@ describe('Lifecycle', () => {
       uut.containerDidDisappear('myUniqueId');
     });
   });
+
+  describe('onNavigationButtonPressed', () => {
+    it('calls onNavigationButtonPressed on container ref from store', () => {
+      uut.onNavigationButtonPressed({
+        containerId: 'myUniqueId',
+        buttonId: 'myButtonId'
+      });
+      expect(mockRef.onNavigationButtonPressed).toHaveBeenCalledTimes(1);
+    });
+
+    it('skips undefined refs', () => {
+      uut.onNavigationButtonPressed('myButtonId');
+      expect(mockRef.didDisappear).not.toHaveBeenCalled();
+    });
+
+    it('skips unimplemented onNavigationButtonPressed', () => {
+      mockRef = {};
+      expect(mockRef.onNavigationButtonPressed).toBeUndefined();
+      store.setRefForContainerId('myUniqueId', mockRef);
+      uut.containerDidAppear('myUniqueId');
+    });
+  });
 });

lib/src/events/PrivateEventsListener.js

@@ -9,6 +9,7 @@ class PrivateEventsListener {
   listenAndHandlePrivateEvents() {
     this.nativeEventsReceiver.containerDidAppear(this.lifecycle.containerDidAppear);
     this.nativeEventsReceiver.containerDidDisappear(this.lifecycle.containerDidDisappear);
+    this.nativeEventsReceiver.navigationButtonPressed(this.lifecycle.onNavigationButtonPressed);
   }
 }
 

lib/src/events/PrivateEventsListener.test.js

@@ -33,4 +33,20 @@ describe('PrivateEventsListener', () => {
     uut.listenAndHandlePrivateEvents();
     expect(nativeEventsReceiver.containerDidDisappear).toHaveBeenCalledTimes(1);
   });
+
+  it('register and handle onNavigationButtonPressed', () => {
+    const mockRef = {
+      onNavigationButtonPressed: jest.fn()
+    };
+    store.setRefForContainerId('myContainerId', mockRef);
+    uut.listenAndHandlePrivateEvents();
+    expect(nativeEventsReceiver.navigationButtonPressed).toHaveBeenCalledTimes(1);
+    const callbackFunction = nativeEventsReceiver.navigationButtonPressed.mock.calls[0][0];
+    expect(callbackFunction).toBeInstanceOf(Function);
+
+    expect(mockRef.onNavigationButtonPressed).not.toHaveBeenCalled();
+    callbackFunction({ containerId: 'myContainerId', buttonId: 'myButtonId' });
+
+    expect(mockRef.onNavigationButtonPressed).toHaveBeenCalledTimes(1);
+  });
 });

playground/src/containers/LifecycleScreen.js

@@ -26,6 +26,10 @@ class LifecycleScreen extends Component {
     alert('componentWillUnmount'); // eslint-disable-line no-alert
   }
 
+  onNavigationButtonPressed(id) {
+    alert(`onNavigationButtonPressed: ${id}`); // eslint-disable-line no-alert
+  }
+
   render() {
     return (
       <View style={styles.root}>

playground/src/containers/OptionsScreen.js

@@ -5,11 +5,28 @@ const { View, Text, Button } = require('react-native');
 
 const Navigation = require('react-native-navigation');
 
+const BUTTON_ONE = 'buttonOne';
+const BUTTON_TWO = 'buttonTwo';
+const BUTTON_LEFT = 'buttonLeft';
+
 class OptionsScreen extends Component {
+
   static get navigationOptions() {
     return {
       title: 'Static Title',
-      topBarTextFontFamily: 'HelveticaNeue-Italic'
+      topBarTextFontFamily: 'HelveticaNeue-Italic',
+      rightButtons: [{
+        id: BUTTON_ONE,
+        testID: BUTTON_ONE,
+        title: 'One',
+        buttonColor: 'red'
+      }],
+      leftButtons: [{
+        id: BUTTON_LEFT,
+        testID: BUTTON_LEFT,
+        title: 'Left',
+        buttonColor: 'purple'
+      }]
     };
   }
 
@@ -34,6 +51,35 @@ class OptionsScreen extends Component {
     );
   }
 
+  onNavigationButtonPressed(id) {
+    if (id === BUTTON_ONE) {
+      Navigation.setOptions(this.props.containerId, {
+        rightButtons: [{
+          id: BUTTON_TWO,
+          testID: BUTTON_TWO,
+          title: 'Two',
+          // icon: require('../../img/navicon_add.png'),
+          // disableIconTint: true,
+          // disabled: true
+          buttonColor: 'green',
+          buttonFontSize: 28,
+          buttonFontWeight: '800'
+        }]
+      });
+    } else if (id === BUTTON_TWO) {
+      Navigation.setOptions(this.props.containerId, {
+        rightButtons: [{
+          id: BUTTON_ONE,
+          testID: BUTTON_ONE,
+          title: 'One',
+          buttonColor: 'red'
+        }]
+      });
+    } else if (id === BUTTON_LEFT) {
+      Navigation.pop(this.props.containerId);
+    }
+  }
+
   onClickDynamicOptions() {
     Navigation.setOptions(this.props.containerId, {
       title: 'Dynamic Title',