Merge pull request Expensify#13174 from Expensify/rocio-BackgroundColor

Add a color to the options in the picker when using Windows

src/components/Picker/index.js

@@ -7,8 +7,10 @@ import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
 import FormHelpMessage from '../FormHelpMessage';
 import Text from '../Text';
+import CONST from '../../CONST';
 import styles from '../../styles/styles';
 import pickerStyles from './pickerStyles';
+import getOperatingSystem from '../../libs/getOperatingSystem';
 
 const propTypes = {
     /** Picker label */
@@ -102,10 +104,28 @@ class Picker extends PureComponent {
         };
 
         this.onInputChange = this.onInputChange.bind(this);
+        this.placeholder = this.props.placeholder;
+        this.items = this.props.items;
     }
 
     componentDidMount() {
         this.setDefaultValue();
+
+        // Windows will reuse the text color of the select for each one of the options
+        // so we might need to color accordingly so it doesn't blend with the background.
+        if (getOperatingSystem() === CONST.OS.WINDOWS) {
+            this.placeholder = _.isEmpty(this.placeholder) ? {} : {
+                ...this.placeholder,
+                color: '#002140',
+            };
+
+            this.items = _.map(this.items, item => (
+                {
+                    ...item,
+                    color: '#002140',
+                }
+            ));
+        }
     }
 
     componentDidUpdate(prevProps) {
@@ -157,10 +177,10 @@ class Picker extends PureComponent {
                     )}
                     <RNPickerSelect
                         onValueChange={this.onInputChange}
-                        items={this.props.items}
+                        items={this.items}
                         style={this.props.size === 'normal' ? pickerStyles(this.props.isDisabled) : styles.pickerSmall}
                         useNativeAndroidPickerStyle={false}
-                        placeholder={this.props.placeholder}
+                        placeholder={this.placeholder}
                         value={this.props.value}
                         Icon={() => this.props.icon(this.props.size)}
                         disabled={this.props.isDisabled}