Merge pull request #33194 from neonbhai/picker-style-fix

Picker style fix (cherry picked from commit 0a331cb)
Expensify · Dec 15, 2023 · debf55f · debf55f
1 parent 05c3563
commit debf55f
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -68,7 +68,6 @@ type ThemeColors = {
     dropUIBG: Color;
     receiptDropUIBG: Color;
     checkBox: Color;
-    pickerOptionsTextColor: Color;
     imageCropBackgroundColor: Color;
     fallbackIconColor: Color;
     reactionActiveBackground: Color;