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

user_3160135 0
Viewed 6515

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?

TextInput created with react-native-web

expo-web react-native-web expo react-native textinput
2 Answers

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

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