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 #4490

Reviewed By: svcscm

Differential Revision: D2723190

Pulled By: nicklockwood

fb-gh-sync-id: ab9188192f1d0d087787dfed8c128073bfaa3235

Examples/UIExplorer/PickerIOSExample.js

@@ -87,31 +87,55 @@ var PickerExample = React.createClass({
               key={carMake}
               value={carMake}
               label={CAR_MAKES_AND_MODELS[carMake].name}
-              />
-            )
-          )}
+            />
+          ))}
         </PickerIOS>
         <Text>Please choose a model of {make.name}:</Text>
         <PickerIOS
           selectedValue={this.state.modelIndex}
           key={this.state.carMake}
           onValueChange={(modelIndex) => this.setState({modelIndex})}>
-          {CAR_MAKES_AND_MODELS[this.state.carMake].models.map(
-            (modelName, modelIndex) => (
-              <PickerItemIOS
-                key={this.state.carMake + '_' + modelIndex}
-                value={modelIndex}
-                label={modelName}
-              />
-            ))
-          }
+          {CAR_MAKES_AND_MODELS[this.state.carMake].models.map((modelName, modelIndex) => (
+            <PickerItemIOS
+              key={this.state.carMake + '_' + modelIndex}
+              value={modelIndex}
+              label={modelName}
+            />
+          ))}
         </PickerIOS>
         <Text>You selected: {selectionString}</Text>
       </View>
     );
   },
 });
 
+var PickerStyleExample = React.createClass({
+  getInitialState: function() {
+    return {
+      carMake: 'cadillac',
+    };
+  },
+
+  render: function() {
+    var make = CAR_MAKES_AND_MODELS[this.state.carMake];
+    var selectionString = make.name + ' ' + make.models[this.state.modelIndex];
+    return (
+      <PickerIOS
+        itemStyle={{fontSize: 25, color: 'red', textAlign: 'left', fontWeight: 'bold'}}
+        selectedValue={this.state.carMake}
+        onValueChange={(carMake) => this.setState({carMake, modelIndex: 0})}>
+        {Object.keys(CAR_MAKES_AND_MODELS).map((carMake) => (
+          <PickerItemIOS
+            key={carMake}
+            value={carMake}
+            label={CAR_MAKES_AND_MODELS[carMake].name}
+          />
+        ))}
+      </PickerIOS>
+    );
+  },
+});
+
 exports.displayName = (undefined: ?string);
 exports.title = '<PickerIOS>';
 exports.description = 'Render lists of selectable options with UIPickerView.';
@@ -121,4 +145,10 @@ exports.examples = [
   render: function(): ReactElement {
     return <PickerExample />;
   },
+},
+{
+  title: '<PickerIOS> with custom styling',
+  render: function(): ReactElement {
+    return <PickerStyleExample />;
+  },
 }];

Libraries/Picker/PickerIOS.ios.js

@@ -17,15 +17,19 @@ var React = require('React');
 var ReactChildren = require('ReactChildren');
 var RCTPickerIOSConsts = require('NativeModules').UIManager.RCTPicker.Constants;
 var StyleSheet = require('StyleSheet');
+var StyleSheetPropType = require('StyleSheetPropType');
+var TextStylePropTypes = require('TextStylePropTypes');
 var View = require('View');
 
+var itemStylePropType = StyleSheetPropType(TextStylePropTypes);
 var requireNativeComponent = require('requireNativeComponent');
 
 var PickerIOS = React.createClass({
   mixins: [NativeMethodsMixin],
 
   propTypes: {
     ...View.propTypes,
+    itemStyle: itemStylePropType,
     onValueChange: React.PropTypes.func,
     selectedValue: React.PropTypes.any, // string or integer basically
   },
@@ -50,13 +54,13 @@ var PickerIOS = React.createClass({
     });
     return {selectedIndex, items};
   },
-
+  
   render: function() {
     return (
       <View style={this.props.style}>
         <RCTPickerIOS
-          ref={ picker => this._picker = picker }
-          style={styles.pickerIOS}
+          ref={picker => this._picker = picker}
+          style={[styles.pickerIOS, this.props.itemStyle]}
           items={this.state.items}
           selectedIndex={this.state.selectedIndex}
           onChange={this._onChange}
@@ -108,7 +112,11 @@ var styles = StyleSheet.create({
   },
 });
 
-var RCTPickerIOS = requireNativeComponent('RCTPicker', PickerIOS, {
+var RCTPickerIOS = requireNativeComponent('RCTPicker', {
+  propTypes: {
+    style: itemStylePropType,
+  },
+}, {
   nativeOnly: {
     items: true,
     onChange: true,

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 @@ @implementation RCTPicker
 - (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 @@ - (NSInteger)pickerView:(__unused UIPickerView *)pickerView
 
 #pragma mark - UIPickerViewDelegate methods
 
-- (NSDictionary *)itemForRow:(NSInteger)row
+- (NSString *)pickerView:(__unused UIPickerView *)pickerView
+             titleForRow:(NSInteger)row
+            forComponent:(__unused NSInteger)component
 {
-  return _items[row];
+  return [RCTConvert NSString:_items[row][@"label"]];
 }
 
-- (id)valueForRow:(NSInteger)row
+- (UIView *)pickerView:(UIPickerView *)pickerView
+            viewForRow:(NSInteger)row
+          forComponent:(NSInteger)component
+           reusingView:(UILabel *)label
 {
-  return [self itemForRow:row][@"value"];
-}
+  if (!label) {
+    label = [[UILabel alloc] initWithFrame:(CGRect){
+      CGPointZero,
+      {
+        [pickerView rowSizeForComponent:component].width,
+        [pickerView rowSizeForComponent:component].height,
+      }
+    }];
+  }
 
-- (NSString *)pickerView:(__unused UIPickerView *)pickerView
-             titleForRow:(NSInteger)row forComponent:(__unused NSInteger)component
-{
-  return [self itemForRow:row][@"label"];
+  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 @@ - (void)pickerView:(__unused UIPickerView *)pickerView
   if (_onChange) {
     _onChange(@{
       @"newIndex": @(row),
-      @"newValue": [self valueForRow:row]
+      @"newValue": RCTNullIfNil(_items[row][@"value"]),
     });
   }
 }

React/Views/RCTPickerManager.m

@@ -25,6 +25,24 @@ - (UIView *)view
 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
 {