Change border color of TextInput when focused in react-native-web (expo)

Question

In the last versions of Expo there is a Web support. In the picture you see a normal TextInput created with React Native & rendered in the Web.

How can I change the color of the TextInput Border that is activated on focus? You see an orange border around the TextInput. Do you know how this can be changed in react-native?

Weatherboard

You wanted to change when text input in on focus ? is it working normally when you placed border color? – Abell

Answer 1

According to react-native-web type definition (link), the available properties are:

outlineColor?: ColorValue,
outlineOffset?: string | number,
outlineStyle?: string,
outlineWidth?: string | number, // set to 0 to disable outline

You can change the outline color using:

<TextInput style={Platform.OS === "web" && {outlineColor: "orange" }} />

Elaterium

Didn't knew that these outline Style props even exist. This is working. If you are developing web & iOS/Android with the same code base then you have to write it inline like: style={[s.textInput, Platform.OS === "web" ? { outlineColor: '#anyColor' } : null]} otherwise you'll get compile errors. iOS and Android don't support these outlineStyles in StyleSheet. – Weatherboard

Nice, that works perfectly, but how did you find this information? – Depression

I found setting outlineStyle: 'none' covered more cases. – Johannajohannah

Answer 2

To avoid any errors you need to specify the web platform because this style prop exist only in react-native-web

<TextInput
  style={
    Platform.select({
      web: {
        outlineColor: 'orange',
      },
    })
}
/>

OR:

You can try to remove the outline styles for web, and apply borderColor style when the input is focused

<TextInput
  style={
    Platform.select({
      web: {
        outlineStyle: 'none',
      },
    })
}
/>

Inalienable

Answer 3

I create a new Component XTextInput which takes all props from parent.

import * as React from 'react'
import { Platform, TextInput, TextInputProps } from 'react-native'
import { TextInput as WebTextInput } from 'react-native-web'

const XTextInput: React.FC<TextInputProps> = (props) => {
  const { style, placeholderTextColor, ...otherProps } = props
  return Platform.OS === 'web' ? (
    <WebTextInput
      {...otherProps}
      style={[{ outlineColor: 'transparent' }, style]}
      placeholderTextColor={placeholderTextColor ?? '#78716C'}
    />
  ) : (
    <TextInput
      style={[style]}
      accessibilityLabel="Text input label"
      accessibilityHint="Text input hint"
      {...otherProps}
      placeholderTextColor={placeholderTextColor ?? '#78716C'}
    />
  )
}

export default XTextInput

To use this

 <XTextInput placeholder="Start your search" style={[{What ever style here}]}/>

Mllly