[fix] Picker.Item support for 'color' prop

Not well supported by browsers. Fix #810
necolas · Apr 8, 2018 · 1aec803 · 1aec803
1 parent 2050730
commit 1aec803
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git 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
@@ -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
@@ -20,7 +20,7 @@ const PickerExample = props => (
 );
 
 const styles = StyleSheet.create({
-  rootl: {
+  root: {
     alignItems: 'flex-start'
   }
 });