From debf55fe7095b2edf094fb0fa5b29225464c5b8a Mon Sep 17 00:00:00 2001
From: Rory Abraham <47436092+roryabraham@users.noreply.github.com>
Date: Fri, 15 Dec 2023 14:43:33 -0800
Subject: [PATCH] Merge pull request #33194 from neonbhai/picker-style-fix

Picker style fix

(cherry picked from commit 0a331cbba344b83e43b2730d609ab224a3a81694)
---
 src/components/Picker/BasePicker.tsx | 17 +++++++++++++++--
 src/styles/theme/themes/dark.ts      |  1 -
 src/styles/theme/themes/light.ts     |  1 -
 src/styles/theme/types.ts            |  1 -
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx
index 6f587f350b79..c6b5026b1938 100644
--- a/src/components/Picker/BasePicker.tsx
+++ b/src/components/Picker/BasePicker.tsx
@@ -9,6 +9,8 @@ import Text from '@components/Text';
 import useScrollContext from '@hooks/useScrollContext';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import getOperatingSystem from '@libs/getOperatingSystem';
+import CONST from '@src/CONST';
 import type {BasePickerHandle, BasePickerProps} from './types';
 
 type IconToRender = () => ReactElement;
@@ -47,7 +49,7 @@ function BasePicker<TPickerValue>(
 
     // 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.
-    const pickerPlaceholder = Object.keys(placeholder).length > 0 ? {...placeholder, color: theme.pickerOptionsTextColor} : {};
+    const pickerPlaceholder = Object.keys(placeholder).length > 0 ? {...placeholder, color: theme.text} : {};
 
     useEffect(() => {
         if (!!value || !items || items.length !== 1 || !onInputChange) {
@@ -136,6 +138,17 @@ function BasePicker<TPickerValue>(
         },
     }));
 
+    /**
+     * We pass light text on Android, since Android Native alerts have a dark background in all themes for now.
+     */
+    const itemColor = useMemo(() => {
+        if (getOperatingSystem() === CONST.OS.ANDROID) {
+            return theme.textLight;
+        }
+
+        return theme.text;
+    }, [theme]);
+
     const hasError = !!errorText;
 
     if (isDisabled) {
@@ -165,7 +178,7 @@ function BasePicker<TPickerValue>(
                 <RNPickerSelect
                     onValueChange={onValueChange}
                     // We add a text color to prevent white text on white background dropdown items on Windows
-                    items={items.map((item) => ({...item, color: theme.pickerOptionsTextColor}))}
+                    items={items.map((item) => ({...item, color: itemColor}))}
                     style={size === 'normal' ? styles.picker(isDisabled, backgroundColor) : styles.pickerSmall(backgroundColor)}
                     useNativeAndroidPickerStyle={false}
                     placeholder={pickerPlaceholder}
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
index c2fcac6af13e..95cf518921a9 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -65,7 +65,6 @@ const darkTheme = {
     dropUIBG: 'rgba(6,27,9,0.92)',
     receiptDropUIBG: 'rgba(3, 212, 124, 0.84)',
     checkBox: colors.green400,
-    pickerOptionsTextColor: colors.productDark900,
     imageCropBackgroundColor: colors.productDark700,
     fallbackIconColor: colors.green700,
     reactionActiveBackground: colors.green600,
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index 3cd052046f43..f10885ae4d2e 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -65,7 +65,6 @@ const lightTheme = {
     dropUIBG: 'rgba(252, 251, 249, 0.92)',
     receiptDropUIBG: 'rgba(3, 212, 124, 0.84)',
     checkBox: colors.green400,
-    pickerOptionsTextColor: colors.productLight900,
     imageCropBackgroundColor: colors.productLight700,
     fallbackIconColor: colors.green700,
     reactionActiveBackground: colors.green100,
diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts
index 56da65ddd17d..b443295b8167 100644
--- a/src/styles/theme/types.ts
+++ b/src/styles/theme/types.ts
@@ -68,7 +68,6 @@ type ThemeColors = {
     dropUIBG: Color;
     receiptDropUIBG: Color;
     checkBox: Color;
-    pickerOptionsTextColor: Color;
     imageCropBackgroundColor: Color;
     fallbackIconColor: Color;
     reactionActiveBackground: Color;