Skip to content

Commit 4dea892

Browse files
JakeDawkinsMartin Konicek
authored and
Martin Konicek
committed
Fix iOS Picker Item Colors
Summary: I want to resolve #11170 by passing the `color` prop from `PickerIOS.Item` to its implementation. In `RCTPicker.m`, the label.textColor was already being set and used, but there was nothing referencing the past prop. I passed the prop to the implementation, checked if it exists, and if not, set the default color, like before. I visually tested the **Colorful Pickers** example in UIExplorer. Those picker `Item`s pass in a `color` prop. ![dec-01-2016 22-07-46](https://cloud.githubusercontent.com/assets/9259509/20821696/ae45d704-b812-11e6-9720-0045d6c0bcd4.gif) The basic picker does not pass the color prop to the picker `Item`, and there are no errors. Basic functionality is still in tact: ![dec-01-2016 22-09-35](https://cloud.githubusercontent.com/assets/9259509/20821730/ee544f74-b812-11e6-9294-a1b45e78d9f7.gif) Closes #11260 Differential Revision: D4272370 fbshipit-source-id: 5fa33c40526dda59ca2ab527c31351bcd27e5cf3
1 parent 6ffa235 commit 4dea892

File tree

2 files changed

+10
-2
lines changed

2 files changed

+10
-2
lines changed

Libraries/Components/Picker/PickerIOS.ios.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ var StyleSheet = require('StyleSheet');
1818
var StyleSheetPropType = require('StyleSheetPropType');
1919
var TextStylePropTypes = require('TextStylePropTypes');
2020
var View = require('View');
21+
var processColor = require('processColor');
2122

2223
var itemStylePropType = StyleSheetPropType(TextStylePropTypes);
2324
var requireNativeComponent = require('requireNativeComponent');
@@ -48,7 +49,11 @@ var PickerIOS = React.createClass({
4849
if (child.props.value === props.selectedValue) {
4950
selectedIndex = index;
5051
}
51-
items.push({value: child.props.value, label: child.props.label});
52+
items.push({
53+
value: child.props.value,
54+
label: child.props.label,
55+
textColor: processColor(child.props.color),
56+
});
5257
});
5358
return {selectedIndex, items};
5459
},
@@ -95,6 +100,7 @@ PickerIOS.Item = class extends React.Component {
95100
static propTypes = {
96101
value: React.PropTypes.any, // string or integer basically
97102
label: React.PropTypes.string,
103+
color: React.PropTypes.string,
98104
};
99105

100106
render() {

React/Views/RCTPicker.m

+3-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,9 @@ - (UIView *)pickerView:(UIPickerView *)pickerView
8686
}
8787

8888
label.font = _font;
89-
label.textColor = _color;
89+
90+
label.textColor = [RCTConvert UIColor:_items[row][@"textColor"]] ?: _color;
91+
9092
label.textAlignment = _textAlign;
9193
label.text = [self pickerView:pickerView titleForRow:row forComponent:component];
9294
return label;

0 commit comments

Comments
 (0)