React-native-web: TextInput: support `outline`

[Dremora]

When using <TextInput>, I'd like to be able to disable the default blue outline added by Chrome. However, React Native's TextInput doesn't support this property. I have a few possible solutions for the problem:

• Provide the ability to customize this property, even though it's not present in React Native
• Use external CSS stylesheets
• Reset it in react-native-web and don't allow any customization

[necolas]

I'm thinking we could remove the default outline in RNW's reset, but include a default focus style for TextInput to preserve the accessibility benefits (e.g., borderColor: blue). Then in an app, if you want a custom focus style you define focus styles to be applied onFocus.

[necolas]

Going to add outline for now.

[latanoel]

I found this solution working perfectly

[foureyedraven]

@latanoel Can you share your implementation? I'm adding TS to a RNW project (have updated to latest RNW and added types for related libs) and outlineWidth is showing the following error. My goal is to turn off the polyfill outline on web:

No overload matches this call.
  Overload 1 of 2, '(props: TextInputProps | Readonly<TextInputProps>): TextInput', gave the following error.
    Type '{ outlineWidth: number; }' is not assignable to type 'false | TextStyle | RegisteredStyle<TextStyle> | RecursiveArray<false | TextStyle | RegisteredStyle<TextStyle>> | readonly (false | ... 1 more ... | RegisteredStyle<...>)[]'.
      Object literal may only specify known properties, and 'outlineWidth' does not exist in type 'TextStyle | RecursiveArray<false | TextStyle | RegisteredStyle<TextStyle>> | readonly (false | TextStyle | RegisteredStyle<...>)[]'.
  Overload 2 of 2, '(props: TextInputProps, context: any): TextInput', gave the following error.
    Type '{ outlineWidth: number; }' is not assignable to type 'false | TextStyle | RegisteredStyle<TextStyle> | RecursiveArray<false | TextStyle | RegisteredStyle<TextStyle>> | readonly (false | ... 1 more ... | RegisteredStyle<...>)[]'.
      Object literal may only specify known properties, and 'outlineWidth' does not exist in type 'TextStyle | RecursiveArray<false | TextStyle | RegisteredStyle<TextStyle>> | readonly (false | TextStyle | RegisteredStyle<...>)[]'.ts(2769)
Peek Problem (⌥F8)
No quick fixes available

Implementation looks like:

 <TextInput
    style={[s.b2, s.br5, s.f14, s.p5, { outlineWidth: 0 }, isFocused ? s.bTeal : s.bGray]}
    onFocus={() => setIsFocused(true)}
    onBlur={() => updateValues()}
    placeholder={props.placeholder || label}
    onChangeText={setValue}
    value={value}
/>

[JijoBose]

{ outlineWidth: 0 }

Worked for me. thanks

[latanoel]

@foureyedraven This is my implementation

<TextInput
    ...
    style={[
        styles.inputControl,
        Platform.OS === 'web' && { outlineWidth: 0 },
        {
            textAlignVertical: props.numberOfLines ? 'top' : 'center'
        }
    ]}
/>

You may wish to leave it at outline on Native

[foureyedraven]

@latanoel thank you! turns out I was getting the red squiggly because I had added @types/react and @types/react-native to the project, which doubled up the type defs and confused everything. I had assumed I needed them, but I don't. Removing them from the project made the outline style prop work.