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?

You wanted to change when text input in on focus ? is it working normally when you placed border color? — Waheed Akhtar, Jun 15 '20 at 15:24

Devid Farinelli · Accepted Answer · 2021-02-22T11:42:18.317

21

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" }} />

edited Feb 22 '21 at 11:42

answered Jun 17 '20 at 14:19

Devid Farinelli

7,514
9
42
73

2

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. – Arbnor Jun 17 '20 at 15:04
Nice, that works perfectly, but how did you find this information? – cglacet Dec 23 '20 at 23:29
1

I found setting outlineStyle: 'none' covered more cases. – cjhines May 11 '21 at 11:26

artiom-damaschin · Answer 2 · 2021-06-22T14:26:12.070

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',
      },
    })
}
/>

score 0 · Answer 3 · answered Jul 11 '23 at 16:31

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}]}/>

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

3 Answers3

Linked