react-nativeexpotextinputreact-native-webexpo-web

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

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

Solution

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