fix: error on Android using PlatformColor

Author: wonderlul

src/components/TextField/TextField.tsx

@@ -168,6 +168,7 @@ function TextField(props: TextFieldProps) {
     $leadingAccessoryStyles,
     $trailingAccessoryStyles,
     $fieldStyles,
+    $disabledBackgroundStyles,
     $outlineStyles,
     $animatedActiveOutlineStyles,
     $animatedLabelWrapperStyles,
@@ -193,6 +194,14 @@ function TextField(props: TextFieldProps) {
       role="none"
     >
       <View style={$fieldStyles}>
+        {/* Disabled tint overlay — filled variant only. A childless
+          absolutely-positioned View whose translucent fill is applied via the
+          `opacity` style, so it never affects label/input rendering and works
+          with PlatformColor on Android. */}
+        {!!$disabledBackgroundStyles && (
+          <View pointerEvents="none" style={$disabledBackgroundStyles} />
+        )}
+
         {/* Inactive indicator — always-visible 1px bottom border (filled) or
           full border (outlined); height and color reflect error/disabled state
           but do not change on focus */}

src/components/TextField/constants.ts

@@ -55,10 +55,3 @@ export const INACTIVE_INDICATOR_SIZE = 1;
 // SHAPE
 // ============
 export const TEXT_FIELD_BORDER_RADIUS = 4;
-
-// ============
-// OPACITY
-// ============
-
-export const OUTLINE_ALPHA = 0.12;
-export const FILLED_CONTAINER_ALPHA = 0.04;

src/components/TextField/filled/constants.ts

@@ -25,3 +25,9 @@ export const ACTIVE_LABEL_TOP_POSITION = TEXT_FIELD_PADDING_VERTICAL;
 // ==================
 
 export const PADDING_TOP = ACTIVE_LABEL_FONT_SIZE + TEXT_FIELD_PADDING_VERTICAL;
+
+// ==================
+// OPACITY
+// ==================
+
+export const FILLED_CONTAINER_ALPHA = 0.04;

src/components/TextField/filled/logic.ts

@@ -15,16 +15,16 @@ import {
 } from '../constants';
 import {
   $disabledStyle,
-  $supportingTextStyle,
   $inputStyle,
   $leadingAccessoryStyle,
+  $supportingTextStyle,
   $trailingAccessoryStyle,
 } from '../styles';
 import type { TextFieldProps, TextFieldSharedApi } from '../TextField';
 import {
   getFieldBackgroundColor,
-  getSupportingTextColor,
   getLabelColor,
+  getSupportingTextColor,
 } from '../utils';
 import {
   LABEL_LEFT_OFFSET_WITH_ACCESSORY,
@@ -36,6 +36,7 @@ import {
   $fieldStyle,
   $labelTextStyle,
   $labelWrapperStyle,
+  $disabledBackgroundStyle,
   $outlineStyle,
 } from './styles';
 import { getOutlineColor } from './utils';
@@ -145,12 +146,25 @@ export const getFilledTextFieldData = (
     $fieldStyleOverride,
   ];
 
+  /* Disabled tint (`onSurface @ 0.04`) is rendered as a childless overlay so its
+     alpha can be applied via the `opacity` style without leaking onto the label
+     and input. The View accepts `PlatformColor` directly. */
+  const $disabledBackgroundStyles: StyleProp<ViewStyle> = disabled
+    ? [
+        $disabledBackgroundStyle,
+        {
+          backgroundColor: onSurface,
+        },
+      ]
+    : undefined;
+
   const $outlineStyles = [
     $outlineStyle,
     {
       height: INACTIVE_INDICATOR_SIZE,
       backgroundColor: outlineColor,
     },
+    disabled && $disabledStyle,
   ];
 
   const $animatedActiveOutlineStyles: StyleProp<
@@ -161,6 +175,7 @@ export const getFilledTextFieldData = (
       height: ACTIVE_INDICATOR_SIZE,
       backgroundColor: activeOutlineColor,
     },
+    disabled && $disabledStyle,
     $animatedActiveOutlineStyle,
   ];
 
@@ -231,6 +246,7 @@ export const getFilledTextFieldData = (
     $animatedLabelTextStyles,
     $animatedPlaceholderStyles,
     $fieldStyles,
+    $disabledBackgroundStyles,
     $outlineStyles,
     $animatedActiveOutlineStyles,
     $containerStyles,

src/components/TextField/filled/styles.ts

@@ -6,6 +6,7 @@ import {
   TEXT_FIELD_INPUT_WRAPPER_PADDING_HORIZONTAL,
   TEXT_FIELD_PADDING_VERTICAL,
 } from '../constants';
+import { FILLED_CONTAINER_ALPHA } from './constants';
 
 export const $fieldStyle: ViewStyle = {
   minHeight: TEXT_FIELD_HEIGHT,
@@ -38,3 +39,17 @@ export const $labelTextStyle: TextStyle = {
   paddingVertical: 0,
   paddingHorizontal: 0,
 };
+
+/* Disabled tint (`onSurface @ 0.04`) is rendered as a childless overlay so its
+     alpha can be applied via the `opacity` style without leaking onto the label
+     and input. The View accepts `PlatformColor` directly. */
+export const $disabledBackgroundStyle: ViewStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  opacity: FILLED_CONTAINER_ALPHA,
+  borderTopStartRadius: TEXT_FIELD_BORDER_RADIUS,
+  borderTopEndRadius: TEXT_FIELD_BORDER_RADIUS,
+};

src/components/TextField/filled/utils.ts

@@ -1,8 +1,11 @@
-import color from 'color';
-
-import { tokens } from '../../../styles/themes/v3/tokens';
 import type { InternalTheme } from '../../../types';
 
+/**
+ * Returns the raw outline color for a filled field. The disabled state's
+ * alpha is intentionally NOT baked in here — it is applied via the `opacity`
+ * style on the (childless) outline View so the value can be a `PlatformColor`
+ * on Android, which the `color` library cannot parse at runtime.
+ */
 export const getOutlineColor = ({
   theme,
   status,
@@ -19,10 +22,7 @@ export const getOutlineColor = ({
   } = theme;
 
   if (disabled) {
-    return color(onSurface)
-      .alpha(tokens.md.ref.stateOpacity.disabled)
-      .rgb()
-      .string();
+    return onSurface;
   }
   if (status === 'error') {
     return error;

src/components/TextField/outlined/constants.ts

@@ -47,3 +47,9 @@ export const LABEL_TRANSLATE_X_WITHOUT_ACCESSORY =
 
 export const PLACEHOLDER_TOP_POSITION =
   TEXT_FIELD_PADDING_VERTICAL + LINE_HEIGHT_DELTA;
+
+// ============
+// OPACITY
+// ============
+
+export const OUTLINE_ALPHA = 0.12;

src/components/TextField/outlined/logic.ts

@@ -23,6 +23,7 @@ import { getSupportingTextColor, getLabelColor } from '../utils';
 import {
   LABEL_LEFT_OFFSET_WITH_ACCESSORY,
   LABEL_LEFT_OFFSET_WITHOUT_ACCESSORY,
+  OUTLINE_ALPHA,
   PLACEHOLDER_TOP_POSITION,
 } from './constants';
 import {
@@ -99,12 +100,16 @@ export const getOutlinedTextFieldData = (
 
   const $fieldStyles = [$fieldStyle, $fieldStyleOverride];
 
+  /* The outline is a childless absolutely-positioned View, so applying
+     `opacity` here is safe and lets us pass `outlineColor` through unchanged
+     (including PlatformColor values on Android). */
   const $outlineStyles = [
     $outlineStyle,
     {
       borderWidth: isFocused ? 2 : 1,
       borderColor: outlineColor,
     },
+    disabled && { opacity: OUTLINE_ALPHA },
     $fieldStyleOverride,
   ];
 
@@ -199,6 +204,7 @@ export const getOutlinedTextFieldData = (
     $animatedLabelTextStyles,
     $animatedPlaceholderStyles,
     $fieldStyles,
+    $disabledBackgroundStyles: undefined,
     $outlineStyles,
     $containerStyles,
     $supportingTextStyles,

src/components/TextField/outlined/utils.ts

@@ -1,8 +1,11 @@
-import color from 'color';
-
 import type { InternalTheme } from '../../../types';
-import { OUTLINE_ALPHA } from '../constants';
 
+/**
+ * Returns the raw outline color for an outlined field. The disabled state's
+ * alpha is intentionally NOT baked in here — it is applied via the `opacity`
+ * style on the (childless) outline View so the value can be a `PlatformColor`
+ * on Android, which the `color` library cannot parse at runtime.
+ */
 export const getOutlineColor = ({
   theme,
   isFocused,
@@ -25,7 +28,7 @@ export const getOutlineColor = ({
   }
 
   if (disabled) {
-    outlineColor = color(onSurface).alpha(OUTLINE_ALPHA).rgb().string();
+    outlineColor = onSurface;
   }
 
   if (hasError) {

src/components/TextField/utils.ts

@@ -1,6 +1,3 @@
-import color from 'color';
-
-import { FILLED_CONTAINER_ALPHA } from './constants';
 import type { InternalTheme } from '../../types';
 
 export const getAccentColors = ({
@@ -69,19 +66,23 @@ export const getSupportingTextColor = ({
   return onSurfaceVariant;
 };
 
+/**
+ * Returns the solid background color for the filled field container, or
+ * `undefined` when disabled. The disabled tint (`onSurface @ 0.04`) is rendered
+ * as a separate overlay View whose alpha is applied via the `opacity` style;
+ * keeping the alpha out of the color string is what makes the component safe
+ * to use with `PlatformColor` values on Android.
+ */
 export const getFieldBackgroundColor = ({
   theme,
   disabled,
 }: {
   theme: InternalTheme;
   disabled: boolean;
-}) => {
-  const {
-    colors: { onSurface, surfaceContainerHighest },
-  } = theme;
+}): string | undefined => {
   if (disabled) {
-    return color(onSurface).alpha(FILLED_CONTAINER_ALPHA).rgb().string();
+    return undefined;
   }
 
-  return surfaceContainerHighest;
+  return theme.colors.surfaceContainerHighest;
 };