feat: outline style override

Author: wonderlul

src/components/TextField/TextField.tsx

@@ -180,6 +180,14 @@ export interface TextFieldProps extends TextInputProps {
    * the label and TextInput, excluding accessories).
    */
   containerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Style overrides for the indicator layer (the purely visual border or line
+   * that shows state, not the interactive input).
+   * - `filled` — applied to both the always-visible bottom edge and the
+   *   animated bar that expands on focus.
+   * - `outlined` — applied to the rounded border around the field for both states.
+   */
+  outlineStyle?: StyleProp<ViewStyle>;
   theme?: ThemeProp;
   /**
    * An optional component to render on the start side of the input (leading in LTR).
@@ -251,6 +259,7 @@ function TextField(props: TextFieldProps) {
     pressableStyle: $pressableStyleOverride,
     fieldStyle,
     containerStyle,
+    outlineStyle,
     theme,
     StartAccessory,
     EndAccessory,
@@ -364,9 +373,9 @@ function TextField(props: TextFieldProps) {
             onBlur={onBlurHandler}
             selectionColor={$selectionColor}
             cursorColor={$cursorColor}
+            placeholderTextColor={$placeholderTextColor}
             {...textInputProps}
             placeholder={placeholder}
-            placeholderTextColor={$placeholderTextColor}
             style={$inputStyles}
           />
 

src/components/TextField/filled/logic.ts

@@ -37,12 +37,14 @@ export const getFilledTextFieldData = (
     style: $inputStyleOverride,
     fieldStyle: $fieldStyleOverride,
     containerStyle: $containerStyleOverride,
+    outlineStyle: $outlineStyleOverride,
     ...textInputProps
   } = props;
 
   const {
     input,
     theme,
+    isFocused,
     hasSuffix,
     disabled,
     hasAccessory,
@@ -62,14 +64,7 @@ export const getFilledTextFieldData = (
   const outlineColor = getOutlineColor({
     theme,
     hasError,
-    isFocused: false,
-    disabled,
-  });
-
-  const activeOutlineColor = getOutlineColor({
-    theme,
-    hasError,
-    isFocused: true,
+    isFocused,
     disabled,
   });
 
@@ -126,13 +121,14 @@ export const getFilledTextFieldData = (
       ]
     : undefined;
 
-  const $outlineStyles = [
+  const $outlineStyles: StyleProp<ViewStyle> = [
     $outlineStyle,
     {
       height: INACTIVE_INDICATOR_SIZE,
       backgroundColor: outlineColor,
     },
     disabled && $disabledStyle,
+    $outlineStyleOverride,
   ];
 
   const $animatedActiveOutlineStyles: StyleProp<
@@ -141,9 +137,10 @@ export const getFilledTextFieldData = (
     $outlineStyle,
     {
       height: ACTIVE_INDICATOR_SIZE,
-      backgroundColor: activeOutlineColor,
+      backgroundColor: outlineColor,
     },
     disabled && $disabledStyle,
+    $outlineStyleOverride,
     $animatedActiveOutlineStyle,
   ];
 

src/components/TextField/outlined/logic.ts

@@ -31,6 +31,7 @@ export const getOutlinedTextFieldData = (
     style: $inputStyleOverride,
     fieldStyle: $fieldStyleOverride,
     containerStyle: $containerStyleOverride,
+    outlineStyle: $outlineStyleOverride,
     ...textInputProps
   } = props;
 
@@ -88,14 +89,15 @@ export const getOutlinedTextFieldData = (
   /* 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 = [
+  const $outlineStyles: StyleProp<ViewStyle> = [
     $outlineStyle,
     {
       borderWidth: isFocused ? 2 : 1,
       borderColor: outlineColor,
     },
     disabled && { opacity: DISABLED_OUTLINE_OPACITY },
     $fieldStyleOverride,
+    $outlineStyleOverride,
   ];
 
   const $animatedLabelWrapperStyles: StyleProp<

src/components/__tests__/TextField.test.tsx

@@ -329,6 +329,7 @@ it('does not pass TextField-only props through to TextInput', () => {
   expect(input.props.pressableStyle).toBeUndefined();
   expect(input.props.fieldStyle).toBeUndefined();
   expect(input.props.containerStyle).toBeUndefined();
+  expect(input.props.outlineStyle).toBeUndefined();
   expect(input.props.supportingText).toBeUndefined();
   expect(input.props.supportingTextProps).toBeUndefined();
   expect(input.props.prefix).toBeUndefined();

src/components/__tests__/__snapshots__/TextField.test.tsx.snap

@@ -66,6 +66,7 @@ exports[`renders filled TextField with TextField.Icon accessories 1`] = `
             "height": 1,
           },
           false,
+          undefined,
         ]
       }
     />
@@ -90,10 +91,11 @@ exports[`renders filled TextField with TextField.Icon accessories 1`] = `
             "right": 0,
           },
           {
-            "backgroundColor": "rgba(103, 80, 164, 1)",
+            "backgroundColor": "rgba(121, 116, 126, 1)",
             "height": 2,
           },
           false,
+          undefined,
           {
             "transform": [
               {
@@ -115,10 +117,11 @@ exports[`renders filled TextField with TextField.Icon accessories 1`] = `
             "right": 0,
           },
           {
-            "backgroundColor": "rgba(103, 80, 164, 1)",
+            "backgroundColor": "rgba(121, 116, 126, 1)",
             "height": 2,
           },
           false,
+          undefined,
           {
             "transform": [
               {
@@ -711,6 +714,7 @@ exports[`renders filled TextField with TextField.Icon accessories when error is
             "height": 1,
           },
           false,
+          undefined,
         ]
       }
     />
@@ -739,6 +743,7 @@ exports[`renders filled TextField with TextField.Icon accessories when error is
             "height": 2,
           },
           false,
+          undefined,
           {
             "transform": [
               {
@@ -764,6 +769,7 @@ exports[`renders filled TextField with TextField.Icon accessories when error is
             "height": 2,
           },
           false,
+          undefined,
           {
             "transform": [
               {
@@ -1356,6 +1362,7 @@ exports[`renders filled TextField with label and value 1`] = `
             "height": 1,
           },
           false,
+          undefined,
         ]
       }
     />
@@ -1380,10 +1387,11 @@ exports[`renders filled TextField with label and value 1`] = `
             "right": 0,
           },
           {
-            "backgroundColor": "rgba(103, 80, 164, 1)",
+            "backgroundColor": "rgba(121, 116, 126, 1)",
             "height": 2,
           },
           false,
+          undefined,
           {
             "transform": [
               {
@@ -1405,10 +1413,11 @@ exports[`renders filled TextField with label and value 1`] = `
             "right": 0,
           },
           {
-            "backgroundColor": "rgba(103, 80, 164, 1)",
+            "backgroundColor": "rgba(121, 116, 126, 1)",
             "height": 2,
           },
           false,
+          undefined,
           {
             "transform": [
               {
@@ -1676,6 +1685,7 @@ exports[`renders outlined TextField with TextField.Icon accessories 1`] = `
           },
           false,
           undefined,
+          undefined,
         ]
       }
     />
@@ -2279,6 +2289,7 @@ exports[`renders outlined TextField with TextField.Icon accessories when error i
           },
           false,
           undefined,
+          undefined,
         ]
       }
     />
@@ -2882,6 +2893,7 @@ exports[`renders outlined TextField with label and value 1`] = `
           },
           false,
           undefined,
+          undefined,
         ]
       }
     />