Skip to content
Permalink
Browse files

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
  • Loading branch information...
emilioicai authored and facebook-github-bot-3 committed Dec 8, 2015
1 parent e7a4b20 commit e2c35dddbac6ce305f1ed7b445e92fd392b42865
@@ -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 />;
},
}];
@@ -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,
@@ -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
@@ -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"]),
});
}
}
@@ -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
{

0 comments on commit e2c35dd

Please sign in to comment.
You can’t perform that action at this time.