Added support for styling the PickerIOS

Summary:
 - PickerIOS accepts now a new prop: style
 - this prop modifies the native style of the RCTPicker allowing to modify the font size of the items (fontSize), color of the items (color, only 6 char HEX values for now) and alignment of the items (textAlign)
Closes https://github.com/facebook/react-native/pull/4490

Reviewed By: svcscm

Differential Revision: D2723190

Pulled By: nicklockwood

fb-gh-sync-id: ab9188192f1d0d087787dfed8c128073bfaa3235

React/Views/RCTPicker.h

@@ -15,6 +15,11 @@
 
 @property (nonatomic, copy) NSArray<NSDictionary *> *items;
 @property (nonatomic, assign) NSInteger selectedIndex;
+
+@property (nonatomic, strong) UIColor *color;
+@property (nonatomic, strong) UIFont *font;
+@property (nonatomic, assign) NSTextAlignment textAlign;
+
 @property (nonatomic, copy) RCTBubblingEventBlock onChange;
 
 @end

React/Views/RCTPicker.m

@@ -9,6 +9,7 @@
 
 #import "RCTPicker.h"
 
+#import "RCTConvert.h"
 #import "RCTUtils.h"
 
 @interface RCTPicker() <UIPickerViewDataSource, UIPickerViewDelegate>
@@ -19,7 +20,10 @@
 - (instancetype)initWithFrame:(CGRect)frame
 {
   if ((self = [super initWithFrame:frame])) {
+    _color = [UIColor blackColor];
+    _font = [UIFont systemFontOfSize:21]; // TODO: selected title default should be 23.5
     _selectedIndex = NSNotFound;
+    _textAlign = NSTextAlignmentCenter;
     self.delegate = self;
   }
   return self;
@@ -59,20 +63,33 @@ numberOfRowsInComponent:(__unused NSInteger)component
 
 #pragma mark - UIPickerViewDelegate methods
 
-- (NSDictionary *)itemForRow:(NSInteger)row
-{
-  return _items[row];
-}
-
-- (id)valueForRow:(NSInteger)row
-{
-  return [self itemForRow:row][@"value"];
-}
-
 - (NSString *)pickerView:(__unused UIPickerView *)pickerView
-             titleForRow:(NSInteger)row forComponent:(__unused NSInteger)component
+             titleForRow:(NSInteger)row
+            forComponent:(__unused NSInteger)component
 {
-  return [self itemForRow:row][@"label"];
+  return [RCTConvert NSString:_items[row][@"label"]];
+}
+
+- (UIView *)pickerView:(UIPickerView *)pickerView
+            viewForRow:(NSInteger)row
+          forComponent:(NSInteger)component
+           reusingView:(UILabel *)label
+{
+  if (!label) {
+    label = [[UILabel alloc] initWithFrame:(CGRect){
+      CGPointZero,
+      {
+        [pickerView rowSizeForComponent:component].width,
+        [pickerView rowSizeForComponent:component].height,
+      }
+    }];
+  }
+
+  label.font = _font;
+  label.textColor = _color;
+  label.textAlignment = _textAlign;
+  label.text = [self pickerView:pickerView titleForRow:row forComponent:component];
+  return label;
 }
 
 - (void)pickerView:(__unused UIPickerView *)pickerView
@@ -82,7 +99,7 @@ numberOfRowsInComponent:(__unused NSInteger)component
   if (_onChange) {
     _onChange(@{
       @"newIndex": @(row),
-      @"newValue": [self valueForRow:row]
+      @"newValue": RCTNullIfNil(_items[row][@"value"]),
     });
   }
 }

React/Views/RCTPickerManager.m

@@ -25,6 +25,24 @@ RCT_EXPORT_MODULE()
 RCT_EXPORT_VIEW_PROPERTY(items, NSDictionaryArray)
 RCT_EXPORT_VIEW_PROPERTY(selectedIndex, NSInteger)
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(color, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(textAlign, NSTextAlignment)
+RCT_CUSTOM_VIEW_PROPERTY(fontSize, CGFloat, RCTPicker)
+{
+  view.font = [RCTConvert UIFont:view.font withSize:json ?: @(defaultView.font.pointSize)];
+}
+RCT_CUSTOM_VIEW_PROPERTY(fontWeight, NSString, __unused RCTPicker)
+{
+  view.font = [RCTConvert UIFont:view.font withWeight:json]; // defaults to normal
+}
+RCT_CUSTOM_VIEW_PROPERTY(fontStyle, NSString, __unused RCTPicker)
+{
+  view.font = [RCTConvert UIFont:view.font withStyle:json]; // defaults to normal
+}
+RCT_CUSTOM_VIEW_PROPERTY(fontFamily, NSString, RCTPicker)
+{
+  view.font = [RCTConvert UIFont:view.font withFamily:json ?: defaultView.font.familyName];
+}
 
 - (NSDictionary<NSString *, id> *)constantsToExport
 {