Use autolayout constraints to set size of custom bar button item

This fixes an issue where the frame for the custom view can be set to the incorrect y-offset upon setting the custom frame.

In iOS 11, this behavior changed, as UIBarButtonItem went from being using springs-and-struts for sizing, to using a UIStackView, and thus using Autolayout.

This lead to the superview of having a frame of (0, 22, 0, 0) at the first layout pass.

By moving to using NSLayoutConstaints, we can now properly size our custom view.

See also: https://gist.github.com/niw/569b49648fcab22124e1d12c195fe595
See also: https://stackoverflow.com/questions/10988918/change-width-of-a-uibarbuttonitem-in-a-uinavigationbar

Author: eliperkins

lib/ios/RNNUIBarButtonItem.m

@@ -3,13 +3,17 @@
 #import "RNNUIBarButtonItem.h"
 #import "RCTConvert+UIBarButtonSystemItem.h"
 
+@interface RNNUIBarButtonItem ()
+
+@property (nonatomic, strong) NSLayoutConstraint *widthConstraint;
+@property (nonatomic, strong) NSLayoutConstraint *heightConstraint;
+
+@end
+
 @implementation RNNUIBarButtonItem
 
 -(instancetype)init:(NSString*)buttonId withIcon:(UIImage*)iconImage {
-	UIButton* button = [[UIButton alloc] init];
-	[button addTarget:self action:@selector(onButtonPressed) forControlEvents:UIControlEventTouchUpInside];
-	[button setImage:iconImage forState:UIControlStateNormal];
-	self = [super initWithCustomView:button];
+	self = [super initWithImage:iconImage style:UIBarButtonItemStylePlain target:nil action:nil];
 	self.buttonId = buttonId;
 	return self;
 }
@@ -26,27 +30,37 @@ -(instancetype)init:(NSString*)buttonId withCustomView:(RCTRootView *)reactView
 	reactView.sizeFlexibility = RCTRootViewSizeFlexibilityWidthAndHeight;
 	reactView.delegate = self;
 	reactView.backgroundColor = [UIColor clearColor];
+	self.widthConstraint = [NSLayoutConstraint constraintWithItem:reactView
+														attribute:NSLayoutAttributeWidth
+														relatedBy:NSLayoutRelationEqual
+														   toItem:nil
+														attribute:NSLayoutAttributeNotAnAttribute
+													   multiplier:1.0
+														 constant:1.0];
+	self.heightConstraint = [NSLayoutConstraint constraintWithItem:reactView
+														 attribute:NSLayoutAttributeHeight
+														 relatedBy:NSLayoutRelationEqual
+														   	toItem:nil
+														 attribute:NSLayoutAttributeNotAnAttribute
+													   	multiplier:1.0
+														  constant:1.0];
+	[NSLayoutConstraint activateConstraints:@[self.widthConstraint, self.heightConstraint]];
 	self.buttonId = buttonId;
 	return self;
 }
-
--(instancetype)init:(NSString*)buttonId withSystemItem:(NSString *)systemItemName {
+	
+- (instancetype)init:(NSString*)buttonId withSystemItem:(NSString *)systemItemName {
 	UIBarButtonSystemItem systemItem = [RCTConvert UIBarButtonSystemItem:systemItemName];
 	self = [super initWithBarButtonSystemItem:systemItem target:nil action:nil];
 	self.buttonId = buttonId;
 	return self;
 }
 
 - (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView {
-	CGSize size = rootView.intrinsicContentSize;
-	rootView.frame = CGRectMake(0, 0, size.width, size.height);
-	self.width = size.width;
-}
-
-- (void)onButtonPressed {
-	[self.target performSelector:self.action
-					  withObject:self
-					  afterDelay:0];
+	self.widthConstraint.constant = rootView.intrinsicContentSize.width;
+	self.heightConstraint.constant = rootView.intrinsicContentSize.height;
+	[rootView setNeedsUpdateConstraints];
+	[rootView updateConstraintsIfNeeded];
 }
 
 @end