Merge pull request #26 from TimMun/master

Pass color prop to PickerItem
lawnstarter · Jun 5, 2018 · 3370509 · 3370509
2 parents 2e7f876 + 3b732b3
commit 3370509
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -36,7 +36,7 @@ For either platform, you can alternatively pass down a child element that will b
 | Name                    | Type     | Description                                                                                                                                                                                                                                                                              | Required? | iOS / Android |
 | ----------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------- |
 | onValueChange           | function | Callback which returns `value, index`                                                                                                                                                                                                                                                    | Y         | Both          |
-| items                   | array    | _ The items for the component to render. Each item should be in the following format:<br>`{label: 'Orange',value: 'orange',key: 'orange'}`<br>_ The label and the value are required, but the key will be based upon the label if it isn't included<br>\* The value can be any data type | Y         | Both          |
+| items                   | array    | _ The items for the component to render. Each item should be in the following format:<br>`{label: 'Orange',value: 'orange',key: 'orange', color: 'orange'}`<br>_ The label and the value are required, but the key will be based upon the label if it isn't included<br>\* The value can be any data type. The color is optional. | Y         | Both          |
 | placeholder             | object   | _ An override for the default placeholder object with a label of `Select an item...` and a value of `null`<br>_ An empty object can be used if you'd like to disable the placeholder entirely                                                                                            | N         | Both          |
 | disabled                | boolean  | Disables interaction with the component                                                                                                                                                                                                                                                  | N         | Both          |
 | value                   | any      | Will attempt to locate a matching value from the `items` array by checking each item's `value` property. If found, it will update the component to show that item as selected. If the value is not found, it will default to the first item.                                             | N         | Both          |

diff --git a/src/index.js b/src/index.js
@@ -4,6 +4,7 @@ import {
     Picker,
     Platform,
     StyleSheet,
+    ColorPropType,
     Text,
     TextInput,
     TouchableOpacity,
@@ -108,7 +109,7 @@ export default class RNPickerSelect extends PureComponent {
     renderPickerItems() {
         return this.state.items.map((item) => {
             return (
-                <Picker.Item label={item.label} value={item.value} key={item.key || item.label} />
+                <Picker.Item label={item.label} value={item.value} key={item.key || item.label} color={item.color} />
             );
         });
     }
@@ -300,6 +301,7 @@ RNPickerSelect.propTypes = {
             label: PropTypes.string.isRequired,
             value: PropTypes.any.isRequired,
             key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+            color: ColorPropType
         })
     ).isRequired,
     placeholder: PropTypes.shape({