Menu
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?
337
import { Platform, StyleSheet, Text, View, TextInput } from "react-native"; Step-3 : Create TextInput component inside the render block and specify borderWidth, borderColor property of CSS Stylesheet in TextInput Component. This CSS property will set the border color in TextInput layout.
TextInput has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed.
To change the text color of text input in React Native, we can set the color style to the text color. to set the color style to 'green' on the TextInput . Therefore, we see that the color of the text we typed into the TextInput is green.
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" }} />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
