From 1aec803086bb9b5fc56831f7b31bb9fad45f581f Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Sun, 8 Apr 2018 11:43:20 -0700
Subject: [PATCH] [fix] Picker.Item support for 'color' prop

Not well supported by browsers.

Fix #810
---
 .../react-native-web/src/exports/Picker/PickerItem.js  |  5 +++--
 website/storybook/1-components/Picker/PickerScreen.js  | 10 +++++++++-
 .../1-components/Picker/examples/PickerExample.js      |  2 +-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/react-native-web/src/exports/Picker/PickerItem.js b/packages/react-native-web/src/exports/Picker/PickerItem.js
index 1f435ddb..af5bcf3b 100644
--- a/packages/react-native-web/src/exports/Picker/PickerItem.js
+++ b/packages/react-native-web/src/exports/Picker/PickerItem.js
@@ -19,7 +19,8 @@ export default class PickerItem extends Component<Props> {
   };
 
   render() {
-    const { label, testID, value } = this.props;
-    return createElement('option', { testID, value }, label);
+    const { color, label, testID, value } = this.props;
+    const style = { color };
+    return createElement('option', { style, testID, value }, label);
   }
 }
diff --git a/website/storybook/1-components/Picker/PickerScreen.js b/website/storybook/1-components/Picker/PickerScreen.js
index 3943bdd3..90897ac3 100644
--- a/website/storybook/1-components/Picker/PickerScreen.js
+++ b/website/storybook/1-components/Picker/PickerScreen.js
@@ -98,8 +98,16 @@ const PickerScreen = () => (
       <Description>Individual selectable item in a Picker.</Description>
 
       <Section title="Props">
-        <DocItem name="label" typeInfo="string" description="Text to display for this item" />
+        <DocItem
+          name="color"
+          typeInfo="?color"
+          description="Color of the item label. (Limited by browser support.)"
+        />
+
+        <DocItem name="label" typeInfo="string" description="Text to display for this item." />
+
         <DocItem name="testID" typeInfo="?string" />
+
         <DocItem
           name="value"
           typeInfo="?number | string"
diff --git a/website/storybook/1-components/Picker/examples/PickerExample.js b/website/storybook/1-components/Picker/examples/PickerExample.js
index df785fe3..8a5c3797 100644
--- a/website/storybook/1-components/Picker/examples/PickerExample.js
+++ b/website/storybook/1-components/Picker/examples/PickerExample.js
@@ -20,7 +20,7 @@ const PickerExample = props => (
 );
 
 const styles = StyleSheet.create({
-  rootl: {
+  root: {
     alignItems: 'flex-start'
   }
 });