React-native-web: Get rid of outlineColor warning

[KjellConnelly]

<TextInput style={{outlineColor:"red"}} />

Even though this seems to actually work in the browser, I get a React warning for React-Native-Web in the console for this. Strangely enough, I don't get a warning for React-Native on iOS. Haven't check android though.

Can we silence this warning since it actually does work?

[necolas]

The documentation doesn't list outlineColor as a valid style prop. Are you asking for support to changing the focus ring color when using the keyboard?

[KjellConnelly]

On iOS, I don't expect there to be a focus ring color, so it makes sense for React Native to not have that. But for web, by default, there is a light blue focus ring color when I use the TextInput component and it is focused.

So in a way, yes, I am asking for support to change the focus ring color when using the keyboard. But due to the way web is already handled, outlineColor already works exactly how I would expect it to, other than the issue with React shouting that it isn't a valid prop in the console.

[necolas]

there is a light blue focus ring color when I use the TextInput component and it is focused

Yeah that's true. RNW will display a focus ring on TextInput even if you're using touch/mouse rather than keyboard. Is it the whole ring you want to remove?

[KjellConnelly]

@necolas I don't want to remove the whole ring. That's accomplished by:

<TextInput style={{outline:"none"}} />

The application I'm working on has a specific color palette, and the default blue isn't the color I want showing up. I still do want a glow though, just not that color.

<TextInput style={{outlineColor:"rgb(30,212,40)"}} />

Desired behavior is that on iOS and Android, there is no focus ring. But on web, there is a green focus ring:

<TextInput style={{...Platform.select({
    web: {
        outlineColor:"rgb(30,212,40)"
    }
} />

[necolas]

Thanks. Added support in 0.0.85